Optimizing the usage of common modules – the SharedModule pattern – Organizing Your Application

If we look at Angular projects, we will see patterns of use of modules such as HttpModule, as in the following example:
import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { HomeComponent } from ‘./home/home.component’;
import { LayoutModule } from ‘@angular/cdk/layout’;
import { MatToolbarModule } from ‘@angular/material/toolbar’;
import { MatButtonModule } from ‘@angular/material/button’;
import { MatSidenavModule } from ‘@angular/material/sidenav’;
import { MatIconModule } from ‘@angular/material/icon’;
import { MatListModule } from ‘@angular/material/list’;
@NgModule({
 declarations: [HomeComponent],
 imports: [
   CommonModule,
   LayoutModule,
   MatToolbarModule,
   MatButtonModule,
   MatSidenavModule,
   MatIconModule,
   MatListModule,
 ],
 exports: [HomeComponent],
})
export class HomeModule {}

To avoid code duplication and also make it easier for new team members, don’t forget to add an important module to the project; we can create the SharedModule call to centralize the common dependencies of an Angular project.

Let’s do this in our project using the Angular CLI:
ng generate module shared

In the newly generated file, we will place the Angular Material dependencies:
import { NgModule } from ‘@angular/core’;
…
@NgModule({
 imports: [
   CommonModule,
   LayoutModule,
   MatToolbarModule,
   MatButtonModule,
   MatSidenavModule,
   MatIconModule,
   MatListModule,
 ],
 exports: [
   CommonModule,
   LayoutModule,
   MatToolbarModule,
   MatButtonModule,
   MatSidenavModule,
   MatIconModule,
   MatListModule,
 ]
})
export class SharedModule { }

In this module, we are importing Angular Material’s dependencies and exporting the same dependencies, without declaring any component, directive, or pipe.

In the home.module.ts file, we can refactor to use SharedModule:
import { NgModule } from ‘@angular/core’;
import { HomeComponent } from ‘./home/home.component’;
import { SharedModule } from ‘../shared/shared.module’;
@NgModule({
 declarations: [HomeComponent],
 imports: [
   SharedModule
 ],
 exports: [HomeComponent],
})
export class HomeModule {}

Notice how the file has become much more succinct and easier to read using SharedModule.

Important

The modules present in SharedModule must be modules common to the majority of modules in your project, as this can increase the size of the module’s bundle. If the module needs some specific dependency, you must declare it in that dependency and not in SharedModule.

In the next topic, we’ll see a feature that will improve your user’s experience and is based on organizing the application into modules.