Creating a Feature Module
Tags: angular
Published: 2021-04-28 05:32:56

---
title: Creating a Feature Module
published: true
description: 
tags: angular
//cover_image: https://direct_url_to_image.jpg
---

# 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!`

{% link queencykoh/lazy-load-a-feature-module-41h6 %}