Bootstrapping of Angular App

Before we proceed further in this course, let’s have a quick overview of how an Angular application works internally and bootstraps our app.

Bootstrapping is the process of initializing or loading an Angular application. Every web application needs a starting point, and in an Angular app, index.html is the first page that loads in the browser.

Loading index.html

When an Angular project starts, it first loads the index.html file in the browser. However, if you check this file, you will notice:

• There is no JavaScript or CSS file referenced.
• The body contains the <app-root> tag.

So, how does Angular know what to load in place of this <app-root>? Let's explore.

Using ng serve -o

To run an Angular application, we use the Angular CLI command:

ng serve -v

This command:

• Compiles the application without saving the compiled output to disk.
• Stores the compiled application in memory and starts the development server.
• Watches for changes and recompiles the project if needed.

Building the Angular Project

To see the compiled output, we need to build the project using:

ng build

This command generates a dist/ folder containing the compiled application, including:

• runtime.js: Webpack runtime file
• polyfills.js: Ensures compatibility with older browsers
• main.js: Contains the compiled TypeScript application code
• vendor.js: Includes Angular and third-party libraries
• styles.js: Contains compiled CSS

Webpack and Bundling

Angular CLI uses Webpack as a module bundler. Webpack:

• Scans the project for JavaScript, CSS, and other files.
• Bundles them into fewer files.
• Injects the bundled files into index.html.

This ensures that by the time index.html loads in the browser, all necessary libraries and scripts are already loaded.

Finding the Entry Point

Angular determines the entry point from angular.json:

{
  "projects": {
	"my-app": {
	  "architect": {
		"build": {
		  "options": {
			"main": "src/main.ts"
		  }
		}
	  }
	}
  }
}

This tells Angular that the entry point is main.ts.

The main.ts File

The main.ts file bootstraps the application:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Explanation:

• platformBrowserDynamic: Loads Angular in the browser.
• AppModule: The root module of the application.
• bootstrapModule(AppModule): Starts the Angular application.

The app.module.ts File

Angular applications are organized into modules. The app.module.ts file defines the root module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Key properties:

• declarations: Lists components, directives, and pipes.
• imports: Includes external modules.
• providers: Registers services.
• bootstrap: Specifies the root component (AppComponent).

The app.component.ts File

The app.component.ts file defines the main application component:

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
}

Explanation:

• selector: 'app-root': The component can be used as <app-root> in HTML.
• templateUrl: Specifies the associated HTML file.
• styleUrls: Specifies the associated CSS files.

Rendering the app-root Component

Wherever <app-root> is used, the content of app.component.html is displayed. This completes the bootstrapping process, and the Angular application is fully loaded in the browser.

Conclusion

This is how an Angular application bootstraps and loads the UI. The process includes:

1. Loading index.html.
2. Compiling and injecting bundled files.
3. Identifying the entry point via main.ts.
4. Loading the root module (AppModule).
5. Rendering the root component (AppComponent).

With this understanding, you are now ready to build and structure Angular applications efficiently.

If you have any questions, feel free to ask. Thank you for reading!