Angular modules

testYourselfAngular Angular918 3 0

An NgModule consolidates components, directives, and pipes into cohesive blocks of functionality. The NgModule is a class marked by the @NgModule decorator.

Every Angular app has at least one module, the root module.

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

@NgModule({
})
export class AppModule {}

Declarations

The declarations property is used to register the components, directives, and pipes that belong to this NgModule. If we omit this step Angular doesn't recognize the selector.

import { NgModule } from '@angular/core';
import { MyComponent } from './my.component';
import { MyPipe } from './my.pipe';
import { MyDirective } from "./my.directive";

@NgModule({
  declarations: [
    MyComponent,
​​​​​​​    MyPipe,
​​​​​​​    MyDirective
​​​​​​  ​]
})
export class AppModule {}

Providers

The providers defines the set of injectable objects that are available in the injector of this module.

import { NgModule } from '@angular/core';
import { MyService } from './my.service';

@NgModule({
  providers: [
    MyService
  ]
})
export class AppModule {}

Imports

The imports property specifies a list of modules whose exported directives/pipes should be available to templates in this module

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
  ]
})
export class AppModule {}​​​​​​​

Exports

The exports property specifies a set of components/directives/pipes/modules that an importing module can use (can be used within the template of any component that is part of another ngModule that imports this NgModule).

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
@NgModule({
  exports: [
    FormsModule​​​​​​​
  ]
})
export class AppModule {
}

All components/pipes/directive registered in  the declarations are only accessible to other components, directives and pipes declared in the same module. We can make them public, through the exports property, so that external components can use them.

Bootstrap

The bootstrap property defines the components that should be bootstrapped when this module is bootstrapped. The components added to the bootstrap property are automatically added to entryComponents.

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
​​​​​​​  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

The bootstrap property is optional. We can bootstrap our Angular application manually by executing:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule);

entryComponents

The entryComponents property allow to declare a list of components that can be dynamically loaded into a view.

By default, an Angular application always has at least one entry component, the root component.

Angular automatically adds components in the module's bootstrap and route definitions into the entryComponents list.

Dynamic component loading is not common beyond the router. So that's why if you need to dynamically load components, you must add these components to the entryComponents list.

import { NgModule } from "@angular/core";
import { ChildComponent } from "./child.component";

@NgModule({
  entryComponents: [
    ChildComponent
  ]
})
export class AppModule {
}​​​​​​​