Overview
In this post we are going to take look on how angular application starts.
For any angular application, entry point is index.html. In index.html file there is tag called as <app-root>
<!--index.html-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular</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>In main.ts file <app-root> selector is picked up by the AppModule.
Below is code snippet from main.ts file
//main.ts
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));AppModule is module which is bootstrapped this means specified module is going to load first in our angular application.
AppModule can be found in app folder (AppName/src/app/app.module.ts)
In app.module.ts file, we need to specify bootstrap array. Component listed here are automatically added as entry component.
As shown in code below App component is bootstrapped, so App Component will be added as entry component.
//bootstrap: [AppComponent]
Below is app.module.ts file for reference, there you can see AppComponent is bootstrapped. //app.module.ts
@NgModule({
declarations: [AppComponent, HeaderComponent],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
StoreModule.forRoot(fromapp.appReducer),
EffectsModule.forRoot([AuthEffects,RecipeEffects]),
SharedModule,
CoreModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}App Component will have same selector as <app-root> ,which is specified in it’s app.component.ts file. In app.component.ts file, inside the component decorator selector is specified as "app-root"
//app.component.ts
import { Component} from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {}Therefore, template of this component specified in templateUrl will be rendered in index.html i.e. app.component.html
In this way angular application starts, please let me know in comment section below if you have any question.
Happy Coding !!