How an Angular 8 app loaded and started

When we create an Angular app and run it by using ng serve command, it looks like the below screenshot.

Angular 8 App Loading

It is a simple Angular app created by using ng new app-name command and no editing in the app. The name of the app is angular8app.

Now, we will see how the Angular’s app is loaded and started.

Remove all the code from the app.component.html file and write some necessary HTML code. 

For example:

This is the default code in the app.component.html file.

When

Angular 8 App Loading

When we update it by the given code:

Angular 8 app load 2

We can see it on the browser.

First angular app

Here, the file is not served by the server. The server served an index.html file.

creating first angular 8 apps

Angular is a framework which allows creating “single-page applications,” and here the index.html is a single page which was produced by the server line.

Index.html:

The above code look like a normal HTML code and here the <title> tag shows the same title in the browser as the app’s title. But the <body> code is different from normal HTML code.

We can see “<app-root>” tag which is provided by the CLI. We can say that, whenever we create a project from the CLI, by default, one component is created, i.e., “app component”.

See the “app.component.ts” file. It is a Typescript file. Here, we see the “selector” property.

Creating Angular 8 APP 2

We can see that the selector property contains the string as index.html file. This information is required the Angular to place this part into an index.html file with the template of a component.

The template of the component is “./app.component.html,” so, Angular includes this part into the index.html file.

Now, we see how an “app-root” is included in index.html file.

How does angular triggers?

When ng-serve builds the application, it creates “bundles” and automatically adds these to index.html file at runtime. So, from these bundles, the first code has to be executed from “main.ts,” i.e., “main.ts” file is the main file from where the execution of an angular application starts.

main.ts file:

angular

Here, the bootstrap method starts the Angular application. It refers to AppModule, which looks in the app folders. We can see in the “app.module” file that bootstrap array which is basically a list of all the components analyses the index.html file.

app.module.ts file:

angular app loading

Now, we can see that the angular application gets loaded as;

Pin It on Pinterest

Share This