Friday 14 February 2020

How to create and use shared module in angular application

AngularShared moduleLazy loading

In this article we are going to discuss about creating a shared module and using it in an Angular application. If your project is big and you have lot of modules, and components are shared across the module then you need a shared module.

Take an example of having 10 modules in an Angular application, and you need to use many components across the modules. In this scenario it is not a good practise to import all components in all module or in app module. Instead of that create a shared module and import this in app module.

If you are using lazy module routing and shared module, then no need to import any module in app.module instead use shared module. You can have more than one shared module as well as per your requirement. This way you can improve the performance as well also it is will help you to prevent getting JavaScript heap memory issues.

Lazy loaded routing example


import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';

const routes: Routes = [
  {
    path: 'module-one',
    loadChildren: () => import('./sample-one/sample-one.module')
        .then(m => m.SampleOneModule)
  },
  {
    path: 'module-two',
    loadChildren: () => import('./sample-two/sample-two.module')
        .then(m => m.SampleTwoModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}



Here make sure to add childRoot for lazy loaded modules and forRoot for appmodule.

App module


imports: [RouterModule.forRoot(routes)],

Child module


imports: [RouterModule.childRoot(routes)],

Now let us create two modules and one shared module.


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SampleOneComponent } from './sample-one.component';
import {SampleOneRoutingModule} from './sample-one-routing.module';

@NgModule({
  declarations: [SampleOneComponent],
  imports: [
    CommonModule,
    SampleOneRoutingModule
  ],
  providers: []
})
export class SampleOneModule { }




import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {SampleOneComponent} from '../sample-one/sample-one.component';


@NgModule({
  declarations: [SampleOneComponent],
  imports: [
    CommonModule
  ]
})
export class SampleTwoModule { }



Import the components which are required for the modules and if you feel some components should be reused across these modules then keep those in the shared module. And import this shared module in the appmodule.

Shared module example


import {ModuleWithProviders, NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import {SharedComponentComponent} from './components/shared-component/shared-component.component';

@NgModule({
  declarations: [SharedComponentComponent],
  imports: [
    CommonModule
  ],
  exports: [SharedComponentComponent]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: []
    };
  }
}



Here we are exporting our components, similar way you can add pipe, service etc.

Import shared module.


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {SharedModule} from './shared/shared.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


Instead of importing all components every where we can create one or more shared module and manage the application easily. This will help us to improve the performance as well as the code visibility. In the above example I have added in the appmodule so that all shared components can use across the modules. Please find the screenshot of folder structure below.

In this article we have discussed about creating a shared module and using it in Angular application.

Related Info

1. How to solve JavaScript heap out of memory issue in Angular project

2. How to create an Angular application from scratch with simple steps.

1 comment :

  1. Thanks for this article, worked like a charm.

    ReplyDelete