How to share code between projects ?
I have two apps created using:
ng generate application app1
ng generate application app2
I want projects/app1/src/app.module.ts to import a module from projects/app2/src/shared/common.module.ts
What is the best practice for this without creating a 3rd project called common or something ? Create a projects/common or just have a folder called common and plate TypeScript files here and import them.
Use library projects!
ng generate library common
This will automatically add path aliases to the main tsconfig.json
"common": [
"dist/prod/common"
],
"common/*": [
"dist/prod/common/*"
]
Which will allow you to refer to the modules and exported components, services and pipes defined in the common library project.
For example in any of your app.module.ts:
import { SharedModule } from 'common';
@NgModule({
imports: [
SharedModule,
...
],
declarations: [...],
exports: [...]
bootstrap: [AppComponent]
})
export class AppModule { }
An alternative to support hot-reloading during ng serve of a consuming app (say, for development) is to import from the common public_api from the project level, as follows:
import { SharedModule } from 'projects/common/src/public_api';
@NgModule({
imports: [
SharedModule,
...
],
...
})
export class AppModule { }
Give it a try, I've used it heavily and it works marvels! I strongly recommend you read this document:
