I know how to build out my project with Angular CLI: ng build --prod
How can I compile each module separately? This is my project:
AnagAccreditamento
and cruscottofiliera
are separate modules, with their module.ts
, routing.module.ts
file. How I can build them separately and insert them into my project at a later time as if they were libraries?
Not sure about angular2 but you 'could'(!) definitely do this with angular 10. Not sure if it's the right way to do it (or if further separation would be a good idea).
To achieve building multiple modules out of a single project:
You obviously need multiple modules. So not only app.module.ts
but another one that contains similar model configuration stuff, i.e. called app-extension.module.ts
.
Accordingly you'll need another main.ts
file, referencing the module. I.e. called main-extension.ts
. You import the specific module there and bootstrap it.
Same for tsconfig.app.json
-> tsconfig.app-extension.json
Next, in your angular.json
file, you can extend the project -> architect -> build section by adding something like this:
"configurations": {
"extension": {
"main": "src/main-extension.ts",
"tsConfig": "tsconfig.app-extension.json",
"outputPath": "../resources/public/extension"
}
finally within your package.json
you add a new script
"build:extension": "ng build && ng build --output-hashing none --configuration extension "
the --output-hashing none is not really relevant here. I did this for building a custom elements-module / webcomponents for standalone use, so that's why i left it in here. Next step would be to concatenate. A better alternative probably is to use https://github.com/manfredsteyer/ngx-build-plus#readme for that purpose..
to build simply execute npm run build:extension
If you want to be able to pull in modules as they are needed, you want lazy loading. You can find out how to use lazy loading here: https://angular.io/docs/ts/latest/guide/router.html#!#asynchronous-routing
Or there is a Pluralsight course about it here: https://app.pluralsight.com/library/courses/angular-routing/table-of-contents