This tutorial explains the difference between declarations, providers, bootstrap and imports in @NgModule and Angular Bootstrapping.
Bootstrapping or booting is nothing but self-starting process that is supposed to proceed without external input.
Do you know what exactly happens after you run “ng serve” from the command line ?
Running Angular CLI command “ng serve” will look at file called ‘.angular–cli.json’ or ‘angular.json’ to find the entry point to our app.
How “ng” finds the components that you will create or build ?
- “ng serve” will look at file called ‘.angular–cli.json’ or ‘angular.json’ to find the entry point to our app. The main.ts is the entry point of our app and it bootstraps our application. The bootstrap process boots an Angular module (app.module.ts)
- Therefore, we use AppModule to bootstrap the app.
- AppModule specifies which component to use as top-level component. AppComponent is our top-level component.
Angular module system – NgModule
Note, Angular has powerful concept of modules. When you boot an angular app, you are not booting a component directly, instead you create an NgModule which points to the component you want to load.
Like all decorators, this @NgModule( … ) code adds metadata to the class immediately following (in this case, AppModule).
Our @NgModule decorator has four keys: declarations, imports, providers, and bootstrap. Think of “NgModule” like a package .
Difference between declarations, providers, bootstrap and imports in @NgModule
declarations – It specifies the components that are defined in this module. You have to declare components in a NgModule before you can use them in your templates.
providers – providers are used for dependency injection. Therefore, to make a service available to be injected throughout our application.
bootstrap – Basically, it tells Angular that when this module is used to bootstrap an app, we need to load the AppComponent component as the top-level component.
imports – Put something in your NgModule’s imports if you are going to be using it in your templates or with dependency injection. Note, this imports is different from import statements.
That’s it. Basically, you had learnt what is Angular Bootstrapping, about NgModule and the difference between declarations, providers, bootstrap and imports in @NgModule.
Hope it helped 🙂
- Best way to bundle an angular app for production deployment ?
- Type cannot be used as an index type.
- Declare model class and use in Angular component : Typescript
- Set default value in the dropdown list in Angular 9
- Best way to delete components in Angular 9 with CLI ?
- Create custom events and fire in Angular 9 with EventEmitter – Example
- ERROR in multi /bootstrap.min.css ./src/styles.css in Angular 9
- Get index of ngFor element using index as value in attribute
- Dynamic and conditional CSS classes with ngClass : Angular
- Apply CSS style attribute dynamically with ngStyle : Angular 9
- This version of CLI is only compatible with Angular versions
- Global Angular CLI version is greater than your local version
- Display different colors for odd/even rows using ngFor loop and ngClass
- TrackBy with *ngFor in Angular 9 : Example