Bootstrapping with standalone in Angular

Introduction

Bootstrapping with standalone means starting an Angular app using components that don't need extra modules. It makes your app simpler and faster to start.

When you want a simple Angular app without creating NgModules.

When building small or medium apps that benefit from less setup.

When learning Angular and focusing on components only.

When you want faster app startup and easier code structure.

When using Angular 14 or newer that supports standalone components.

Syntax

Angular

bootstrapApplication(AppComponent, { providers: [...] })

bootstrapApplication is a function to start your app with a standalone component.

You pass your main component and optional providers for services.

Examples

Basic bootstrapping with a standalone AppComponent without extra providers.

Angular

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

bootstrapApplication(AppComponent);

Bootstrapping with providers, here adding HttpClientModule for HTTP services.

Angular

import { importProvidersFrom } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [importProvidersFrom(HttpClientModule)]
});

Sample Program

This example shows a simple standalone component used as the app root. It is bootstrapped directly without an NgModule. We also add HttpClientModule providers for future HTTP needs.

Angular

import { Component, importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<h1>Welcome to Standalone Bootstrapping!</h1>`,
})
export class AppComponent {}

bootstrapApplication(AppComponent, {
  providers: [importProvidersFrom(HttpClientModule)]
});

Important Notes

Standalone components must have standalone: true in their decorator.

You no longer need to create or import NgModules for bootstrapping.

Use importProvidersFrom to add providers from modules if needed.

Summary

Bootstrapping with standalone components simplifies Angular app startup.

Use bootstrapApplication with a standalone component as the root.

This approach reduces boilerplate and improves app performance.