How is angular application triggering and booting index.html file?
We have a lot of questions about how the angular application triggering index.html file while running the application. When you run your application using the ng serve command, angular starting the bundling, transpilation and compilation according to your configuration.
- Angular bundling all HTML and typescript file, when ng build your application.
- Transpiler compiled all typescript code as a JavaScript code.
- Ng server serving index.html by default because of angular executing main.ts file initially.
Angular booting process step by step:
1. Angular executes Main.ts file initially.
2.Main.ts file booting Appmodule file using the code of
platformBrowserDynamic().bootstrapModule(AppModule)
4. Appmodule bootstrapping the AppComponent file using the code of
bootstrap: [AppComponent]
5. Now the index.html file will be triggered through AppComponent file.AppComponent.ts having the selector tag of app-root, this root tag is defined in index.html file.
<app-root></app-root>
4. Remember that angular is a single page application (SPA). This app root is the main role of SPA mechanism.
How to change different component loading instead of loading app.component.ts by default in index.html?
Create a new component in the name of databinding using the command of ng g c databinding.
Change the index.html file tag <app-root></app-root> to <app-databinding></app-databinding> and change app.module code bootstrap: [AppComponent] to bootstrap: [DatabindingComponent].Now index.html file will load databinding component.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Myapp</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-databinding></app-databinding>
</body>
</html>app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DatabindingComponent } from './databinding/databinding.component';
@NgModule({
declarations: [
AppComponent,
DatabindingComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [DatabindingComponent]
})
export class AppModule { }
Keyword:
Angular booting process
How angular booting index.html file?
How angular application loaded and started.
No comments:
Post a Comment