How angular app works? what happen in background when angular application starts.

Let’s understand how an angular application works from core, what happen when it starts.

In index.html file there is a <app-root> custom html code, this app-root is a selector of app component of application.

During the build process the whole application build is generated and this script filess added to the bottom of index.html files.

app component is connected to the index.html file through its app-root selector.

This app-root selector scope the content of app component html file to index.html file.

In the app.module.ts file we declare this app component and also bootstrap it.

 declarations: [AppComponent],
 bootstrap: [AppComponent]

We can only bootstrap one component at a time to make it a root component.

But we can declare multiple components and connect them to each other.

How it start the angular application ?

In main.ts (it execute first) file platformBrowserDynamic() function executes and it start the angular application in browser then we call another function bootstrapModule() function.

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

Here we pass the link of our own module which is AppModule in this case.

We pass this as an argument and this say angular to start the application.

Now angular parse this module

Register the components which are declared

Import some other modules.

detects bootstrap array and looks for selector of this components.

Related Posts

angular icon

How to create Draggable Grid Blocks using angular-gridster2

To create Draggable Grid Blocks using angular-gridster2 first you need to Install the angular-gridster2 library by running npm install angular-gridster2 in your project’s root directory. You also…

angular vs react-min

What is the difference between Angular & React JS, Which one you should choose?

Angular & React JS both are use for Frontend Development, To make Single page applications or Web Apps. Here is a quick difference between both of them….

angular icon

What is Angular Framework? Why we use Angular and What are the Advantages and Disadvantages?

Hi Everyone, In this blog we will discuss about Angular Framework and this is going to be a brief blog about Angular and its pros and cons….

angular icon

Why toPromise is depricated and Explain other options like firstValueFrom and lastValueFrom methods

toPromise method is a method form Rxjs library, It is used to convert an observable to a promise. The toPromise method subscribe to observable and retrun the…

angular icon

How to use RxJS observables in Angular? How to subscribe services with reactive programming

RxJS is a library for reactive programming, RxJS stands for reactive extension for JavaScript. It helps to handle asynchronous request in a easier way using observables. You…

angular icon

How to organize your angular application using modules

Angular Basics Its a javascirpt framework Its different from angular js Used to build powerful frontend applications. Its used for rapid application development and code generation. Some…

Leave a Reply

Your email address will not be published. Required fields are marked *