Stay Ahead with the Power of Upskilling - Invest in Yourself! 
An NgModule describes how the application parts fit together. Every application has at least one Angular module, the root module that you bootstrap to launch the application. By convention, it is usually called AppModule.
If you use the CLI to generate an app, the default AppModule is as follows:
/* JavaScript imports */
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { FormsModule } from ‘@angular/forms’;
import { HttpModule } from ‘@angular/http’;
import { AppComponent } from ‘./app.component’;
/* the AppModule class with the @NgModule decorator */
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
After the import statements is a class with the @NgModule decorator.
The @NgModule decorator identifies AppModule as an NgModule class. @NgModule takes a metadata object that tells Angular how to compile and launch the application.
- declarations—this application’s lone component.
- imports—import BrowserModule to have browser specific services such as DOM rendering, sanitization, and location.
- providers—the service providers.
- bootstrap—the root component that Angular creates and inserts into the index.html host web page.
The default CLI application only has one component, AppComponent, so it is in both the declarations and the bootstrap arrays.
The declarations array
The module’s declarations array tells Angular which components belong to that module. As you create more components, add them to declarations.
You must declare every component in exactly one NgModule class. If you use a component without declaring it, Angular returns an error message.
The declarations array only takes declarables. Declarables are components, directives and pipes. All of a module’s declarables must be in the declarations array. Declarables must belong to exactly one module. The compiler emits an error if you try to declare the same class in more than one module.
These declared classes are visible within the module but invisible to components in a different module unless they are exported from this module and the other module imports this one.
An example of what goes into a declarations array follows:
declarations: [
YourComponent,
YourPipe,
YourDirective
],
A declarable can only belong to one module, so only declare it in one @NgModule. When you need it elsewhere, import the module that has the declarable you need in it.
Only @NgModule references go in the imports array.
Using directives with @NgModule
Use the declarations array for directives. To use a directive, component, or pipe in a module, you must do a few things:
- Export it from the file where you wrote it.
- Import it into the appropriate module.
- Declare it in the @NgModule declarations array.
The imports array
The module’s imports array appears exclusively in the @NgModule metadata object. It tells Angular about other NgModules that this particular module needs to function properly.
This list of modules are those that export components, directives, or pipes that the component templates in this module reference. In this case, the component is AppComponent, which references components, directives, or pipes in BrowserModule, FormsModule, or HttpModule. A component template can reference another component, directive, or pipe when the referenced class is declared in this module or the class was imported from another module.
You don’t have any services to provide yet. But you will create some before long and you may chose to provide many of them here.
The providers array
The providers array is where you list the services the app needs. When you list services here, they are available app-wide. You can scope them when using feature modules and lazy loading.
The bootstrap array
The application launches by bootstrapping the root AppModule, which is also referred to as an entryComponent. Among other things, the bootstrapping process creates the component(s) listed in the bootstrap array and inserts each one into the browser DOM.
Each bootstrapped component is the base of its own tree of components. Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.
While you can put more than one component tree on a host web page, most applications have only one component tree and bootstrap a single root component. This one root component is usually called AppComponent and is in the root module’s bootstrap array.
Bootstrap in main.ts
There are many ways to bootstrap an application. The variations depend upon how you want to compile the application and where you want to run it.
In the beginning, you will compile the application dynamically with the Just-in-Time (JIT) compiler and you’ll run it in a browser. You can learn about other options later.
The recommended place to bootstrap a JIT-compiled browser application is in a separate file in the src folder named src/main.ts
src/main.ts
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
import { AppModule } from ‘./app/app.module’;
platformBrowserDynamic().bootstrapModule(AppModule);
This code creates a browser platform for dynamic (JIT) compilation and bootstraps the AppModule described above.
The bootstrapping process sets up the execution environment, digs the root AppComponent out of the module’s bootstrap array, creates an instance of the component and inserts it within the element tag identified by the component’s selector.
The AppComponent selector — here and in most documentation samples — is my-app so Angular looks for a <my-app> tag in the index.html like this one …
setup/src/index.html
<my-app><!– content managed by Angular –></my-app>
… and displays the AppComponent there.
This file is very stable. Once you’ve set it up, you may never change it again.
Angular Do-Bootstrap
DoBootstrap – It is an interface and hook for manual bootstrapping of the application instead of using bootstrap array in @NgModule annotation. Reference to the current application is provided as a parameter.
interface DoBootstrap {
ngDoBootstrap(appRef: ApplicationRef): void
}
It has a method – ngDoBootstrap() and usage is as
ngDoBootstrap(appRef: ApplicationRef): void
Example
class AppModule implements DoBootstrap {
ngDoBootstrap(appRef: ApplicationRef) {
appRef.bootstrap(AppComponent); // Or some other component
}
}
