Build NgModule-free Angular apps with standalone: true, bootstrapApplication, importProvidersFrom, and loadComponent lazy loading
0 / 5 completed
1 / 5
What does standalone: true do in an Angular component decorator?
Standalone components: introduced in Angular 14 and stable in v15+, allow components to manage their own dependencies via the imports array in @Component. They bypass NgModule entirely, simplifying the module boilerplate and enabling tree-shakeable, composable component design.
2 / 5
How do you bootstrap an Angular application using bootstrapApplication?
bootstrapApplication(): accepts the root standalone component as its first argument and an ApplicationConfig object as the second: bootstrapApplication(AppComponent, appConfig). The appConfig holds providers such as provideRouter() and provideHttpClient(), replacing the AppModule bootstrapping pattern.
3 / 5
What is importProvidersFrom() used for in standalone Angular?
importProvidersFrom(): is a compatibility bridge. Since many existing Angular libraries still ship NgModules (e.g. HttpClientModule, third-party modules), importProvidersFrom(HttpClientModule) extracts their providers and makes them available in standalone apps. Over time, libraries migrate to standalone-native provideX() functions.
4 / 5
How is lazy loading implemented in a standalone Angular application using loadComponent?
loadComponent: is the standalone equivalent of lazy-loaded NgModules. Route config example: { path: 'profile', loadComponent: () => import('./profile.component').then(c => c.ProfileComponent) }. Angular splits the component into a separate chunk and fetches it only when the route is activated, reducing initial bundle size.
5 / 5
In a standalone Angular component, how are CommonModule directives like *ngIf and *ngFor accessed?
CommonModule in standalone: since standalone components manage their own imports, you must explicitly include CommonModule or import individual directives such as NgIf, NgFor from @angular/common in the component's imports: [] array. Angular 17+ introduces control flow syntax (@if, @for) as a built-in alternative that requires no import.