DEV Community

Cover image for How angular starts
Sibaram Sahu
Sibaram Sahu

Posted on

How angular starts

How angular starts executing?

  1. There is file name called angular.json which act like a configuration for the whole application.

Its looks like this

  "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"
        ]
    }
}
Enter fullscreen mode Exit fullscreen mode

The entry point will be mentioned in the "main" section.
Which is "main.ts" here.

The main.ts file creates a browser environment to run the app.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
Enter fullscreen mode Exit fullscreen mode

Along with this it called a function called "bootstrapModule"

platformBrowserDynamic().bootstrapModule(AppModule)
Enter fullscreen mode Exit fullscreen mode

In the above code AppModule is getting bootstrapped.

AppModule is looks like this

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 { }
Enter fullscreen mode Exit fullscreen mode

If you see in the AppModule AppComponent is getting bootstrapped.

The AppComponent is defined in app.component.ts file.
Which looks like below

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'angular';
}
Enter fullscreen mode Exit fullscreen mode

These file interacts with the webpage and serves data to it.

After this its calls index.html which looks like this

  <!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>

Enter fullscreen mode Exit fullscreen mode

The html template of the root component is displayed inside the <app-root></app-root>

Top comments (0)