Skip to content

App intialization is configured in main.ts Since standalone component is a thing now, so there are 2 ways to intialize an Angular application

Bootstrap module

My prefered method, using this method, we have to declare AppModule with some basic imports and declare which component to be bootstraped

typescript
// AppModule
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

// main.ts
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Bootstrap standalone component

This method skip the Application module declaration, therefore reducing boiler plate code.

The root component to be bootstraped must be standalone: true

typescript
// main.ts
export const appConfig: ApplicationConfig = {
	providers: [
		provideZoneChangeDetection({ eventCoalescing: true }),
		provideRouter(routes)
	]
};

bootstrapApplication(AppComponent, appConfig)
	.catch((err) => console.error(err));

The differences between the 2 methods are the former uses platformBrowserDynamic().bootstrapModule while the latter uses bootstrapApplication