Creating shared module in angular

Suggested Videos
Part 31 - Angular modules explained | Text | Slides
Part 32 - Creating feature module in angular | Text | Slides
Part 33 - Creating feature routing module in angular | Text | Slides

In this video we will discuss creating a shared module in angular.


As the name implies, the shared module contains all the commonly used directives, pipes, and components that we want to share with other modules that import this shared module. 


Things to consider when creating a shared module

• The SharedModule may re-export other common angular modules, such as CommonModule, FormsModule, ReactiveFormsModule etc. Instead of writing the same code in every feature module to import these commonly used Angular modules we can re-export them from a SharedModule, so these commonly used Angular Modules are available to all the feature modules that import this SharedModule.
• The SharedModule should not have providers. This is because, lazy loaded modules create their own branch on the Dependency Injection tree. As a result of this, if a lazy loaded module imports the shared module, we end up with more than one instance of the service provided by the shared module. If this does not make sense at the moment, please do not worry, we will discuss with an example in our upcoming videos. For this same reason, the SharedModule should not import or re-export modules that have providers.
• The SharedModule is then imported by all the FeatureModules where we need the shared functionality. The SharedModule can be imported by both - eager loaded FeatureModules as well as lazy loaded FeatureModules. We will discuss eager and lazy loading modules in our upcoming videos.

Use the following Angular CLI command to generate a SharedModule

ng g m shared/shared --flat -m employee/employee

Copy and paste the following code in the SharedModule (shared.module.ts)

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({

  imports: [

    // At the moment we do not have any components in this SharedModule

    // that require directives of CommonModule or ReactiveFormsModule

    // So we did not include them here in the imports array. We can

    // export a module without importing it first

  ],

  declarations: [],

  // Our Employee FeatureModule requires the CommonModule directives

  // such as ngIf, ngFor etc. Similarly, Employee FeatureModule also

  // requires ReactiveFormsModule directives. So export CommonModule

  // and ReactiveFormsModule.

  exports: [

    CommonModule,

    ReactiveFormsModule

  ]

})

export class SharedModule { }

In EmployeeModule (employee.module.ts), remove CommonModule and ReactiveFormsModule references as these modules are now provided by the imported SharedModule. 

import { NgModule } from '@angular/core';

import { EmployeeRoutingModule } from './employee-routing.module';

import { CreateEmployeeComponent } from './create-employee.component';

import { ListEmployeesComponent } from './list-employees.component';

import { SharedModule } from '../shared/shared.module';

@NgModule({

  imports: [

    EmployeeRoutingModule,

    SharedModule,

  ],

  declarations: [

    CreateEmployeeComponent,

    ListEmployeesComponent

  ]

})

export class EmployeeModule { }