{ "id": "guide/feature-modules", "title": "Feature modules", "contents": "\n\n\n
\n mode_edit\n
\n\n\n
\n

Feature moduleslink

\n

Feature modules are NgModules for the purpose of organizing code.

\n

For the final sample app with a feature module that this page describes,\nsee the .

\n
\n

As your app grows, you can organize code relevant for a specific feature.\nThis helps apply clear boundaries for features. With feature modules,\nyou can keep code related to a specific functionality or feature\nseparate from other code. Delineating areas of your\napp helps with collaboration between developers and teams, separating\ndirectives, and managing the size of the root module.

\n

Feature modules vs. root moduleslink

\n

A feature module is an organizational best practice, as opposed to a concept of the core Angular API. A feature module delivers a cohesive set of functionality focused on a\nspecific application need such as a user workflow, routing, or forms.\nWhile you can do everything within the root module, feature modules\nhelp you partition the app into focused areas. A feature module\ncollaborates with the root module and with other modules through\nthe services it provides and the components, directives, and\npipes that it shares.

\n

How to make a feature modulelink

\n

Assuming you already have an app that you created with the Angular CLI, create a feature\nmodule using the CLI by entering the following command in the\nroot project directory. Replace CustomerDashboard with the\nname of your module. You can omit the \"Module\" suffix from the name because the CLI appends it:

\n\nng generate module CustomerDashboard\n\n

This causes the CLI to create a folder called customer-dashboard with a file inside called customer-dashboard.module.ts with the following contents:

\n\nimport { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n imports: [\n CommonModule\n ],\n declarations: []\n})\nexport class CustomerDashboardModule { }\n\n

The structure of an NgModule is the same whether it is a root module or a feature module. In the CLI generated feature module, there are two JavaScript import statements at the top of the file: the first imports NgModule, which, like the root module, lets you use the @NgModule decorator; the second imports CommonModule, which contributes many common directives such as ngIf and ngFor. Feature modules import CommonModule instead of BrowserModule, which is only imported once in the root module. CommonModule only contains information for common directives such as ngIf and ngFor which are needed in most templates, whereas BrowserModule configures the Angular app for the browser which needs to be done only once.

\n

The declarations array is available for you to add declarables, which\nare components, directives, and pipes that belong exclusively to this particular module. To add a component, enter the following command at the command line where customer-dashboard is the directory where the CLI generated the feature module and CustomerDashboard is the name of the component:

\n\nng generate component customer-dashboard/CustomerDashboard\n\n

This generates a folder for the new component within the customer-dashboard folder and updates the feature module with the CustomerDashboardComponent info:

\n\n// import the new component\nimport { CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component';\n\n@NgModule({\n imports: [\n CommonModule\n ],\n declarations: [\n CustomerDashboardComponent\n ],\n})\n\n\n\n

The CustomerDashboardComponent is now in the JavaScript import list at the top and added to the declarations array, which lets Angular know to associate this new component with this feature module.

\n

Importing a feature modulelink

\n

To incorporate the feature module into your app, you have to let the root module, app.module.ts, know about it. Notice the CustomerDashboardModule export at the bottom of customer-dashboard.module.ts. This exposes it so that other modules can get to it. To import it into the AppModule, add it to the imports in app.module.ts and to the imports array:

\n\nimport { HttpClientModule } from '@angular/common/http';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { AppComponent } from './app.component';\n// import the feature module here so you can add it to the imports array below\nimport { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FormsModule,\n HttpClientModule,\n CustomerDashboardModule // add the feature module here\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n\n

Now the AppModule knows about the feature module. If you were to add any service providers to the feature module, AppModule would know about those too, as would any other feature modules. However, NgModules don’t expose their components by default.

\n

Rendering a feature module’s component templatelink

\n

When the CLI generated the CustomerDashboardComponent for the feature module, it included a template, customer-dashboard.component.html, with the following markup:

\n\n<p>\n customer-dashboard works!\n</p>\n\n\n

To see this HTML in the AppComponent, you first have to export the CustomerDashboardComponent in the CustomerDashboardModule. In customer-dashboard.module.ts, just beneath the declarations array, add an exports array containing CustomerDashboardComponent:

\n\nexports: [\n CustomerDashboardComponent\n]\n\n\n

Next, in the AppComponent, app.component.html, add the tag <app-customer-dashboard>:

\n\n<h1>\n {{title}}\n</h1>\n\n<!-- add the selector from the CustomerDashboardComponent -->\n<app-customer-dashboard></app-customer-dashboard>\n\n\n

Now, in addition to the title that renders by default, the CustomerDashboardComponent template renders too:

\n
\n \"feature\n
\n

More on NgModuleslink

\n

You may also be interested in the following:

\n\n\n \n
\n\n\n" }