Creating feature module in angular

Suggested Videos
Part 29 - Angular reactive forms put example | Text | Slides
Part 30 - Angular reactive forms post example | Text | Slides
Part 31 - Angular modules explained | Text | Slides

In this video we will discuss creating a feature module in Angular. Let's understand this with an example.


The following is the root module (AppModule) of the application that we have been working with so far in this video series.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';

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

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

import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { HomeComponent } from './home.component';

import { PageNotFoundComponent } from './page-not-found.component';

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

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

import { EmployeeService } from './employee/employee.service';

@NgModule({

  declarations: [

    AppComponent,

    CreateEmployeeComponent,

    ListEmployeesComponent,

    HomeComponent,

    PageNotFoundComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    ReactiveFormsModule,

    HttpClientModule

  ],

  providers: [EmployeeService],

  bootstrap: [AppComponent]

})

export class AppModule { }

At the moment all our application components, directives, pipes and services are in this one module. As we add more features, this module is going to get more complex and extremely difficult to maintain.

What we want to do now is move all the EMPLOYEE feature related components, directives, pipes and services into a separate feature module. Let's name this new feature module - EmployeeModule.

To create this new Employee feature module, let's use Angular CLI. Here is the command.

ng g m employee/employee --flat -m app

The above command 

• Creates the EmployeeModule in a file with name employee.module.ts. 
• Imports EmployeeModule into the root module - AppModule.

Copy and paste the following code in employee.module.ts

// employee.module.ts

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

// Exports all the basic Angular directives and pipes

// such as NgIf, NgFor, DecimalPipe etc.

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

// CreateEmployeeComponent uses ReactiveFormsModule directives such as

// formGroup so ReactiveFormsModule needs to be imported into this Module

// An alternative approach would be to create a Shared module and export

// the ReactiveFormsModule from it, so any other module that needs

// ReactiveFormsModule can import it from the SharedModule.

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

// Import and declare the components that belong to this Employee Module

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

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

@NgModule({

  imports: [

    CommonModule,

    ReactiveFormsModule

  ],

  declarations: [

    CreateEmployeeComponent,

    ListEmployeesComponent

  ],

  // If you want the components that belong to this module, available to

  // other modules, that import this module, then include all those

  // components in the exports array. Similarly you can also export the

  // imported Angular Modules

  // exports: [

  //   CreateEmployeeComponent,

  //   ReactiveFormsModule

  // ]

})

export class EmployeeModule { }

Browser Module v/s Common Module
In the root module(AppModule), we do not have to import CommonModule explicitly because the BrowserModule imports and re-exports CommonModule. So all the directives and pipes provided by the CommonModule are available in the RootModule, because root module imports BrowserModule.

BrowserModule provides services that are essential to launch and run a browser application. BrowserModule should be imported only once and that too only by the root module.

app.module.ts after refactoring

Since we have moved the following components to EmployeeModule, we can remove them from the RootModule.

• CreateEmployeeComponent
• ListEmployeesComponent

Similarly ReactiveFormsModule is also not required in the root module. ReactiveFormsModule components, directives and pipes are only needed in EmployeeModule so we moved it there. So at the moment our root module, looks as shown below.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';

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

import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';

import { EmployeeModule } from './employee/employee.module';

import { EmployeeService } from './employee/employee.service';

import { AppComponent } from './app.component';

import { HomeComponent } from './home.component';

import { PageNotFoundComponent } from './page-not-found.component';

@NgModule({

  declarations: [

    AppComponent,

    HomeComponent,

    PageNotFoundComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule,

    EmployeeModule

  ],

  providers: [EmployeeService],

  bootstrap: [AppComponent]

})

export class AppModule { }

We can still simplify the code in root module. Notice the EmployeeService is still in the root module. We can move this service to the EmployeeModule or CoreModule. We will discuss this in our upcoming videos.

At the moment all our application routes, including the routes to LIST, CREATE & EDIT employees are in one routing module - AppRoutingModule. We will discuss moving EMPLOYEE feature related routes to a separate routing module in our upcoming videos.