NgWorkspaceTest
This is a test monorepo that builds angular libraries with different tools like turbo.build, Nx and wireit.
There are the following branches to check the differences:
- main the normal
angular CLI
workspace
and adjustments to build and test apps and libraries
and also a branch to test sync version and dependency versions across workspaces
Commands to create this repo
ng new ng-workspace-test --create-application=false
ng g application test-app1 --project-root=projects/apps/test-app1 --prefix=app
ng g application test-app2 --project-root=projects/apps/test-app2 --prefix=app
ng g library lib1 --project-root=projects/libs/lib1 --prefix=lib
ng g library lib2 --project-root=projects/libs/lib2 --prefix=lib
ng g library lib3 --project-root=projects/libs/lib3 --prefix=lib
Adjustments
- make apps depend on libs to test cross-dependencies
- make lib2 and lib3 depend on lib1
- add package.json files to apps
- and declare cross-dependencies for libraries and apps
- set paths in tsconfig.json for development for ng serve and ng test
- set
main
in libs package.json src/public-api so the path mapping from tsconfig.json is working correctly
To get TypeScript import libs in development mode (ng serve or ng test) set paths to the source files in main tsconfig.json.
// tsconfig.json
{
...
"compilerOptions": {
...
"paths": {
"@libs/*": [
"projects/libs/*",
]
},
...
},
...
}
Unfortunately, this cannot be used to build libraries.
-
override paths for libs in prod config to build with paths to dist
To build them we have to reference the dist folder and pre built each lib in the correct order!!! use projects/libs/**/tsconfig.lib.prod.json to override the path's
// tsconfig.lib.prod.json
{
...
"compilerOptions": {
...
"paths": {
"@libs/*": [
"dist/*"
]
}
},
...
}
Other Resources
Creating Libraries
Enterprise Angular Monorepo Patterns:
Is there a better way to build an Angular monorepo app with libraries:
Add flag for running NPM commands in transitive dependencies:
This project was generated with Angular CLI version 15.2.4.
Development server
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The application will automatically reload if you change any of the source files.
Code scaffolding
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Build
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory.
Running unit tests
Run ng test
to execute the unit tests via Karma.
Running end-to-end tests
Run ng e2e
to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
Further help
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.