Feature Modules in Angular

Feature Modules are additional modules which can be added to the root module for better modularity and maintainability of the Angular applications. As the application grows it becomes difficult to maintain all the components, services etc in a single root module, hence we organize the components into sub-modules called Feature Modules and hook them to the root module.

The feature modules should be included in the imports[] section of the root module so that they can be loaded when required. Once we add the feature modules in the import list, we render the components in the feature module in the root modules components by embedding the feature module component’s selector tags anywhere in the root modules components.

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

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

import { AppComponent } from './app.component';

@NgModule({

  declarations: [AppComponent],

  imports: [BrowserModule, myFeatureModule],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }


<!-- Main comonent template -->

<app-feature-component></app-feature-component>