Angular App Bootstrap

Angular App Bootstrap

Every Angular application needs a starting point to launch and render on the screen.

This process of initializing the application is called "Bootstrapping".

Historically, Angular used a complex AppModule to bootstrap the application.

Modern Standalone Bootstrapping

In modern Angular (v15+), the framework introduced "Standalone Components".

This completely eliminated the need for NgModules.

You can now bootstrap an application directly using a single component!

The main.ts File

The main.ts file is the primary entry point for your entire application.

When the browser loads your app, this is the very first file that executes.

Inside this file, you call the bootstrapApplication() function.

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

// Bootstraps the application using the standalone AppComponent
bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

Providing Global Application Providers

Even without modules, your app still needs global services like the Router or HttpClient.

You provide these global services as a second argument to bootstrapApplication().

You pass them inside an object under the providers array.

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
});