Angular 8 App Loading

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.

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:

<h5>This is my first angular application, and I
am in app.component.html (TutorialandExample)</h5>

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

When

When we update it by the given code:

We can see it on the browser.

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

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:

<!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Angular8firstapp</title>
   <base href="/"> 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
   <app-root></app-root>
 </body>
 </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.

import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 }) 
 export class AppComponent {
   title = 'angular8firstapp';
 } 

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:

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, 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:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; 
@NgModule({
  declarations: [
    AppComponent
  ], 
  imports: [
    BrowserModule,
    AppRoutingModule
  ], 
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } 

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

main.ts  >>   app.Module.ts  >> app.component.ts  >>  index.html >>  app.component.html