Bootstrapping

Angular as well as many frameworks provide a way for you quickly get started with a project, this process of generating framework specific project startup files is known as bootstrapping.

bootstrapping, refers to the initial piece of code that is executed upon startup. The very first bit of code to run after startup is what the entire operating system depends on in order to work properly.

Prerequisites

A basic understanding of the following:

JavaScript Modules and NgModules.

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 Angular CLI to generate an app, the default AppModule is as follows:

TypeScript Code:

/* JavaScript imports */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

/* the AppModule class with the @NgModule decorator */
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Live Demo:

It is just a code snippet explaining a particular concept and may not have any output

See the Pen default_app.module.ts by w3resource (@w3resource) on CodePen.

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—service providers.
• bootstrap—the root component that Angular creates and inserts into the index.html host web page.

The default application created by the Angular CLI only has one component, AppComponent, so it is in both the declarations and the bootstrap arrays.

The declarations array

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 to 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.

Those three steps look like the following. In the file where you create your directive, export it. The following example, named ItemDirective is the default directive structure that the CLI generates in its own file, item.directive.ts:

Directive.ts

import { Directive } from '@angular/core';
@Directive({
  selector: '[appItem]'
})
export class ItemDirective {
  constructor() { }
}

The key point here is that you have to export it so you can import it elsewhere. Next, import it into the NgModule, in this example app.module.ts, with a JavaScript import statement:

app.module.ts

import { ItemDirective } from './item.directive';

in the same file, add it to the @NgModule declarations array:

app.module.ts

declarations: [
  AppComponent,
  ItemDirective
],

Now you could use your ItemDirective in a component. This example uses AppModule, but you'd do it the same way for a feature module. For more about directives, see Attribute Directives and Structural Directives. You'd also use the same technique for pipes and components.

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 is those that export components, directives, or pipes that the component templates in this module reference.

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.

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.

Previous: Practical Usage
Next: NgModules