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.

// 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

// ]

})

exportclass EmployeeModule { }

Browser Module v/s Common ModuleIn 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]

})

exportclass 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.