Angular application is initialised or bootstrapped based on the configuration and the specified properties.The important parts of Angular application from bootstrapping point of view are:
- main.ts This file defines the starting point of the angular application.It is defined by the following line in main.ts:
1 | platformBrowserDynamic().bootstrapModule(AppModule); |
We need to understand how this works.Angular initializes / bootstraps our application when the bootstrapModule() method is called.We pass the name of the root module to this method.So if our module is called AppModule then we call it as:
1 | platformBrowserDynamic().bootstrapModule(AppModule) |
bootstrapModule is in the @angular/platform-browser-dynamic.In the above line AppModule is the name of our root Module which we want to bootstrap.The platformBrowserDynamic object specifies that we want to execute the application in a browser.Please note Angular applications can execute on different types of platforms and not just on browser.
2. app.module Next important part for BootStrapping is the root Module which we passed to the bootstrapModule() method in step 1.The bootstrap property in the AppModule decorator specifies the component which we want to use for launching the application.Now Angular tries to find the selector specified of the roor component in DOM and initializes the component.Here the root component is declared as AppComponent.
We specify the bootstrap property in NgModule as:
1 2 3 | @NgModule({ bootstrap: [AppComponent] }) |
3. RootComponent this is the actual component which defines the selector which is used for initializing the application.Our component is declared as:
1 2 3 4 5 6 7 8 9 10 | @Component({ selector: 'app-root', templateUrl: "./app.component.html", ... }) export class AppComponent { } |
4.index.html This file actually declares the selector of the root component which we have declared above.
This relation can be depicted with the following image
