Angular Feature Modules

Create FModule:

ng generate module <module-name>

Output content:

app/
    <module-name>/
        <module-name>.module.ts
Copy the code
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';



@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class Module01Module { }
Copy the code

The output is as follows:

  1. Use the @NgModule decorator to decorate a Module class.
  2. CommonModule provides common directives such as ngIf,ngFor, and so on.

Import FModule into AppModule

@NgModule({imports: [Module01Module, // Add FModule], bootstrap: [AppComponent]}) export Class AppModule {}Copy the code

Render the component template of the FModule

  1. Add a component to an FModuleng generate component <module-name>/<ComponentName>
  2. Angular’s modularity limits require an export from module A in case A non-A module uses A component from module A. The modified Module01 module is as follows: 
    @NgModule({ declarations: [ Comp1Component ], imports: [ CommonModule ], exports: [Comp1Component, // Export component]}) export class Module01Module {}Copy the code