Angular – best practice of sharing common code between projects

Question

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.

Answer 1

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 Angular Docs - Creating libraries.

Answer 2

If the majority of Apps share the common code, I will suggest another approach using dynamic routing and lazy-loading modules. Within the same code base, you can add all App specific code into a new Module. Then you add a additional flag in the environment file, and create a new environment file, so the App can be built into different bundle by the internment configuration --c. for more details, have a look this article