Every Angular app contains a file named angular.json. This file contains all the configurations of the app. While building the app, the builder looks at this file to find the application’s entry point. See the structure of the angular.json file:
- “build”: {
- “builder”: “@angular-devkit/build-angular:browser”,
- “options”: {
- “outputPath”: “dist/angular-starter”,
- “index”: “src/index.html”,
- “main”: “src/main.ts”,
- “polyfills”: “src/polyfills.ts”,
- “tsConfig”: “tsconfig.app.json”,
- “aot”: false,
- “assets”: [
- “src/favicon.ico”,
- “src/assets”
- ],
- “styles”: [
- “./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css”,
- “src/style.css”
- ]
- }
- }
When the application enters the build section, the options object’s main property defines the entry point of the application. The application’s entry point is main.ts, which creates a browser environment for the application to run and calls a function called bootstrapModule, which bootstraps the application.
These two steps are performed in the following order inside the main.ts file:
- import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
- platformBrowserDynamic().bootstrapModule(AppModule)
In the above line of code, AppModule is getting bootstrapped.
The AppModule is declared in the app.module.ts file. This module contains declarations of all the components.
Below is an example of app.module.ts file:
- import { BrowserModule } from ‘@angular/platform-browser’;
- import { NgModule } from ‘@angular/core’;
- import { AppComponent } from ‘./app.component’;
- @NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule
- ],
- providers: [],
- entryComponents: [],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
In the above file, you can see that AppComponent is getting bootstrapped. It is defined in app.component.ts file. This file interacts with the webpage and serves data to it.
Below is an example of app.component.ts file:
- import { Component } from ‘@angular/core’;
- @Component({
- selector: ‘app-root’,
- templateUrl: ‘./app.component.html’,
- styleUrls: [‘./app.component.css’]
- })
- export class AppComponent {
- title = ‘angular’;
- }
Each component is declared with three properties:
- Selector – It is used to access the component.
- Template/TemplateURL – It contains HTML of the component.
- StylesURL – It contains component-specific stylesheets.
Now, Angular calls the index.html file. This file consequently calls the root component that is app-root. The root component is defined in app.component.ts.
See how the index.html file looks like:
- <!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″>
- </head>
- <body>
- <app-root></app-root>
- </body>
- </html>
The HTML template of the root component is displayed inside the <app-root> tags.This is the way how every angular application works.
