What is a Feature Module?

A feature modules help us organize our code. It helps us to break down our application into specific use cases. As the application grows we don't want everything to live in the root module, the app.module.ts file.

Create a Feature Module

Open terminal and go to the Angular project directory and run

ng generate module Transactions

Angular CLI will create a folder called transactions with transactions.module.ts file inside

Open transactions.module.ts to see its contents

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



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

The content structure is the same as the the app.module.ts but notice that the feature module imports the CommonModule instead of the BrowserModule. CommonModule contains common directives such as ngIf and ngFor while BrowserModule configures the Angular app for the browser which is needed to be done only once in the app.module.ts.

Import Feature Module

The root module must know about the feature module, to do this, we must import the feature module in the root module.

1. Open app.module.ts file
2. Add the following line of code import { TransactionsModule } from './transactions/transactions.module';
3. Add TransactionsModule in the imports array

app.module.ts should look like the following

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

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

import { TransactionsModule } from './transactions/transactions.module';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    TransactionsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Create a Component in the Feature Module

Open terminal and run

ng generate component transactions/TransactionList

This will create a new transaction-list folder for the new component within the transactions folder and will update the transactions.module.ts file to add TransactionListComponent in the declarations array.

Export a feature module’s component

To render the Transaction List component in the App component, we have to export the TransactionListComponent in the TransactionsModule.

1. Open transactions.module.ts file
2. After the imports array, add the following code

exports: [
    TransactionListComponent
  ]

transaction.module.ts should look like the following :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TransactionListComponent} from './transactions/transaction-list.component';



@NgModule({
  declarations: [
    TransactionListComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    TransactionListComponent
  ]
})
export class TransactionsModule { }

Render a feature module’s component template

1. Open app.component.html
2. Add the tag <app-transaction-list></app-transaction-list>
3. In the terminal, run ng serve
4. Launch browser and you should see transaction-list works!

Lazy Load a Feature Module

queencykoh ・ Jul 9 ・ 2 min read