DEV Community

Cover image for How angular starts
Sibaram Sahu
Sibaram Sahu

Posted on

How angular starts

#angular #typescript #javascript #programming

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)