Angular Application Bootstrap Process

When you create an Angular project using Angular CLI ng new command, the CLI installs many npm packages resulting in generation of lot of files. If you are overwhelmed with the number of files and looking for the flow of the Angular application then this article may help you in understanding that. Here we’ll see how Angular bootstraps an application.

Angular application bootstrapping process

When you build your application using ng serve command which builds and serves your app, flow of the Angular is as follows-

First file that is referenced is angular.json which gives information about:
- where to find the source of the application.
- How to build the application.
- Which files to refer for testing.
- Where to find the main file.

Main file which happens to be main.ts provides information about which module to bootstrap.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Here platformBrowserDynamic is the module, which is responsible for loading the Angular application in the desktop browser.

import { AppModule } from './app/app.module'; tells where to find the AppModule class.

Using this module information ng searches for the AppModule class which is specified in the src/app/app.module.ts file.

@NgModule({
  declarations: [
    AppComponent,
    HelloWorldComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

From the app.module.ts file ng gets the information about the components and which component is to be bootstrapped as the top level component. As per the AppModule referred here the component that has to be bootstrapped is AppComponent which is specified in src/app/app.component.ts file.
```
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 ...
 ...
}
```
Component specifies the selector, template and CSS that has to used. As you can see selector property here specifies the app-root (same as used in index.html). Which means any <app-root></app-root> tags that are used within a template will be compiled using the AppComponent class and get the functionality as defined in the class.
With in the angular.json index.html is defined as the first page to be loaded. In index.html you will find the same <app-root></app-root> tags.
```
<body>
  <app-root></app-root>
</body>
```
Template specified in AppComponent ( app.component.html) is rendered between these tags using the flow as explained above.

That's all for this topic Angular Application Bootstrap Process. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page

Related Topics

You may also like-

Tech Tutorials

Sunday, November 7, 2021

Angular Application Bootstrap Process

Angular application bootstrapping process

No comments:

Post a Comment