A module is a class with the @NgModule decorator. To create a module we add @NgModule passing some parameters:
bootstrap: The component that will be the root of your application. This configuration is only present on your root moduledeclarations: Resources the module declares. When you add a new component you have to update the declarations (ng generate component does it automatically)exports: Resources the module exports that can be used in other modulesimports: Resources the module uses from other modules (only module classes are accepted)providers: Resources that can be injected (di) in a componentA simple example:
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
@NgModule({
bootstrap: [AppComponent]
declarations: [AppComponent],
exports: [],
imports: [BrowserModule],
providers: [],
})
export class AppModule { }
Modules can be nested by using the imports parameter of @NgModule decorator.
We can create a core.module in our application that will contain generic things, like a ReservePipe (a pipe that reverse a string) and bundle those in this module:
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReversePipe } from '../reverse.pipe';
@NgModule({
imports: [
CommonModule
],
exports: [ReversePipe], // export things to be imported in another module
declarations: [ReversePipe],
})
export class CoreModule { }
Then in the app.module:
import { CoreModule } from 'app/core/core.module';
@NgModule({
declarations: [...], // ReversePipe is available without declaring here
// because CoreModule exports it
imports: [
CoreModule, // import things from CoreModule
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }