Angular Modules

Module is one of the fundamental concepts of Angular. Today we are going to understand the types of module and their uses in Angular.

In simple words, Module is mechanism to group components, pipes, directives, services that are related.
These individual modules can be combined together to create an application.

We use @NgModule decorator to declare class as module.
@NgModule decorator contains below properties:

• declarations: It includes component, directives, pipes that belongs to this module.
• exports: It include component, directives, pipes which can be accessible to other NgModule.
• imports: Contains Modules whose exported classes needed by this module.
• providers: Contains the services generated by this module.
• bootstrap: Initialize root component

Module Encapsulation:

Similar to ES module, angular module also provide encapsulation. We cannot use component from other module unless we define that component in imports list of current module.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule, 
    DashboardModule, //  Imported members from feature module are now accessible in AppModule.
    CoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

So to use exported component from other module we need to import that module first.

According to type of module we are going to use above properties.

There are different types of Angular Modules:

• RootModule: Each angular application has at least one module called as Root Module. Conventionally named as AppModule. We launch our by bootstrapping the root module.(check main.ts)
• Routing Module: We use this module to load and configure angular routes. The name of the routing module should match the name of its companion module.
  • It does not use declarations property inside @NgModule decorator.
  • Always exports RouterModule.

const routes: Routes = [
  {path: '', component: HomeComponent}
];

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

Use more than one routing module for better organization and lazy loading.

• Feature Module: As App gets more feature we can group those feature and create feature modules.
  • It contains declaration, providers (only services related to the feature)
  • As per the standards it should export only the top component.

@NgModule({
  declarations: [DashboardComponent],
  imports: [
    CommonModule
  ]
})
export class DashboardModule { }

• Shared Module: Almost similar to Feature Module. The only difference is they add all their declarations to the exports as well so they can be used in other module. Mostly includes UI element like (spinners, toasters, Alerts)

@NgModule({
  declarations: [AlerComponent],
  exports: [AlertComponent]
  imports: [
    CommonModule
  ]
})
export class SharedModule { }

• Core Module: Also known as service module. This module does not have any declaration property as it only focuses on services. Inside Core module we can create any service that provides data globally through out the app. Example: AuthService

@NgModule({
  providers: [
    AuthService,
    UserServcie
  ]
})
export class CoreModule { }

Once you understand the use of each module it will be easy to plan development.

How to create module?

ng generate module <module-name> --module=module

   ng generate module shared --module=app

Here --module=app line will register SharedModule in the imports array of the AppModule.

Most of the time developer just starts coding without second thought. Take a pause design your application with modular approach then start coding!!!