Angular Shared Module

#angular #github

In my last post we look at lazy loading in angular Link in the post here, but we have a little draw back to this structure. Which is duplications of modules or components.
Take for instance I am to use ng-news-api in 3 of my lazy loaded modules , I have to load this modules in all 3 modules which is stressful and code duplication. The best way to handle this is by creating a shared module which can be reuses across the 3 modules.

To implement this :

Step 1: create a module without

ng g m @shared/share

Step 2:Refactor the newly create module to work like a shared module. By adding exports key to the ngModule:

@NgModule({
  declarations: [TableComponent],


  imports: [
NewsModule

  ], exports: [
   NewsModule
  ]
})
export class SharedModule { }

Step 3:This newly created shared module can be imported in the all the 3 modules by adding it to the imports section of the
@NgModule in the module.ts file of each of the modules.

With this you can just import and export new modules on the shared module and it reflect across board.

Thanks for reading.