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 { }