Introduction To Featured Modules In Angular 2

This article is in continuation to our Angular 2 series, if you haven’t had a look at the previous articles, then check-out this link. In this article, we’ll talk about featured module. Now, what is featured module? Let’s first understand, why do we need a featured module? UNtil now, in our application, we are registering our components, Directives, Services directly inside our app.module.ts file but consider that you are working on a real world application. What blunders it will make, if you register tons & tons of files in your root module file. Some issues are given below.

Difficult to trace an error, if you forgot to register any of your component or Service or Directives.
No scope for lazy loading.

To avoid such issues, featured module is the answer. Featured modules allow us to group the things together, which are parts of specific functionality. In this way, we can eliminate registering everything at root module & it will also help us to do lazy loading through routing. In our examples, we’ve been registering employee specific components, Services & Directives directly in our root module. It would be great, if we could extract these things from root module & create a featured module for the same, where we can register the things belonging to that specific module & then we can import this module in our root module. To do this, I’m going to create a feature module inside my “emp” folder name “emp.module.ts”.

emp.module.ts File

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { EmployeeListComponent } from './emp-list.component';
import { EmployeeSearchPipe } from './emp-search.pipe';
import { FormatSalaryDirective } from './emp-formatsalary.directive';
import { EmpService } from './emp.service';
import { SharedModule } from '../shared/shared.module';
@NgModule({
imports: [CommonModule, FormsModule, SharedModule],
declarations: [EmployeeListComponent, EmployeeSearchPipe, FormatSalaryDirective],
providers: [EmpService],
exports: [EmployeeListComponent]//we have to export EmployeeListComponent since we are using it in our app.component.ts file template. If we don't export it will have private access by default i.e. will not be available outside this module
})
export class EmpModule {
}

As you can see, I’ve registered all employee related components, Directives & Services in my feature module i.e. EmpModule.

Note

By default, Angular modules such as “Forms Module”, “Common Module” will not be available inside your feature module, even though, you’ve imported those modules in your Application’s root module. You need to explicitly import these modules in your feature module.
Components, Directives declared inside a feature module by default has private access i.e. they won’t be visible outside that module. If you want to access it outside the module, you’ll have to register your components in the exports section of @NgModule.
Import your feature module in your Application’s root module.

Here is the updated code for our app.module.ts file.

We also created SharedModule for our shared widgets. Here, the updated code for the same is given below.

shared.module.ts

import { NgModule } from '@angular/core';
import { ARStarComponent } from './ar-star.component';
@NgModule({
declarations: [ARStarComponent],
exports: [ARStarComponent]
})
export class SharedModule {
}

app.module.ts

/** Importing the angular modules from namespace */
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
/** Importing the AppComponent from the application's app folder */
import { AppComponent } from './app.component';
import 'rxjs/Rx';
import { EmpModule } from './emp/emp.module';
@NgModule({
imports: [BrowserModule, FormsModule, HttpModule, EmpModule],//other modules whose exported classes are needed by component templates declared in this module.
declarations: [AppComponent],// the view classes that belong to this module. Angular has three kinds of view classes: components, directives, and pipes.
bootstrap: [AppComponent]//the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property.
})
export class AppModule { }

In our next post, we’ll continue further. Until then, you can download the solution and test it locally on your end. I am uploading the solution file with this post; but I won’t be able to upload the node_modules folder because of the heavy size. Thus, I request you to install NPM before you run the Application.