Standalone Components

Q: What is a standalone component in Angular, and how do you create one?

A standalone component declares its own dependencies, like which other components or directives it uses, directly within itself using an imports array, without needing to be registered inside a separate NgModule. New Angular projects use standalone components by default.

Q: How do you bootstrap an Angular application using only standalone components, without a root NgModule?

You call bootstrapApplication with your root standalone component, and provide any application wide services or configuration directly as providers, completely skipping the traditional AppModule that older Angular apps needed.

Q: How do standalone components handle lazy loading differently from NgModule based lazy loading?

Instead of lazy loading an entire feature module, you can lazy load a single standalone component directly in your route configuration using loadComponent, letting you split your app into smaller, more granular pieces without needing a wrapping NgModule just for routing purposes.

Q: How would you migrate an existing NgModule based Angular application to standalone components?

Angular provides an official CLI schematic that automatically analyzes your existing NgModules and converts your components, directives, and pipes to standalone versions, updating their imports accordingly, significantly reducing the manual work needed for a large scale migration.

Q: Why does the standalone components approach generally result in smaller final bundle sizes?

Because each standalone component explicitly lists exactly what it depends on, Angular's build tools can more easily determine which code is actually used and safely remove anything that is not, a process called tree shaking, resulting in a final bundle that more closely reflects only what the app genuinely needs.

5 questions found

What is a standalone component in Angular, and how do you create one?

Beginner

A standalone component declares its own dependencies, like which other components or directives it uses, directly within itself using an imports array, without needing to be registered inside a separate NgModule. New Angular projects use standalone components by default.

@Component({
  selector: 'app-greeting',
  standalone: true,
  imports: [CommonModule],
  template: `<p>Hello there</p>`
})
export class GreetingComponent {}

Real-world example A new Angular project built entirely with standalone components skips creating any NgModules at all, keeping each component's own dependencies clearly listed right where they are actually used.

Common follow-ups: Can standalone components be used together with existing NgModule based components in the same app?;Why did Angular introduce standalone components as the new default approach?

NgModules & Modular Architecture;Components & Templates

How do you bootstrap an Angular application using only standalone components, without a root NgModule?

Beginner

You call bootstrapApplication with your root standalone component, and provide any application wide services or configuration directly as providers, completely skipping the traditional AppModule that older Angular apps needed.

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

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

Real-world example A new Angular project's main.ts file bootstraps the application directly from a single standalone AppComponent, without any AppModule file existing anywhere in the project at all.

Common follow-ups: What providers commonly need to be set up here that used to live inside imports in the AppModule?;Can you still add a root NgModule later if a project's needs change?

Angular CLI & Project Structure;Dependency Injection Providers & Injection Tokens

How do standalone components handle lazy loading differently from NgModule based lazy loading?

Intermediate

Instead of lazy loading an entire feature module, you can lazy load a single standalone component directly in your route configuration using loadComponent, letting you split your app into smaller, more granular pieces without needing a wrapping NgModule just for routing purposes.

const routes: Routes = [
  { path: 'settings', loadComponent: () => import('./settings.component').then(m => m.SettingsComponent) }
];

Real-world example A settings page's code is only downloaded the first time a user actually navigates there, using loadComponent to lazy load that single standalone component directly, without needing a dedicated SettingsModule just to enable lazy loading.

Common follow-ups: What is the difference between loadComponent and loadChildren in the router configuration?;Does lazy loading a single component provide the same performance benefit as lazy loading an entire module?

Performance & Lazy Loading;NgModules & Modular Architecture

How would you migrate an existing NgModule based Angular application to standalone components?

Advanced

Angular provides an official CLI schematic that automatically analyzes your existing NgModules and converts your components, directives, and pipes to standalone versions, updating their imports accordingly, significantly reducing the manual work needed for a large scale migration.

ng generate @angular/core:standalone

// Offers several migration steps, such as converting components to standalone
// and removing now unnecessary NgModule declarations

Real-world example A team running an older, large Angular application uses the official migration schematic to convert the vast majority of their components to standalone automatically, only needing to manually review and fix a handful of edge cases afterward.

Common follow-ups: What parts of a migration typically still need manual review after running the automated schematic?;Should a large application migrate all at once, or gradually feature by feature?

Angular Schematics & Custom Builders;NgModules & Modular Architecture

Why does the standalone components approach generally result in smaller final bundle sizes?

Beginner

Because each standalone component explicitly lists exactly what it depends on, Angular's build tools can more easily determine which code is actually used and safely remove anything that is not, a process called tree shaking, resulting in a final bundle that more closely reflects only what the app genuinely needs.

// Only the specific pieces this component actually needs are imported and bundled
@Component({
  standalone: true,
  imports: [NgIf, RouterLink] // explicit, precise dependencies
})
export class HeaderComponent {}

Real-world example A team notices a measurable reduction in their app's final bundle size after fully migrating to standalone components, since Angular's build tools could now more precisely determine and remove genuinely unused code.

Common follow-ups: How significant is this bundle size reduction typically in practice for a real project?;Does this same tree shaking benefit apply equally to third party libraries used in the app?

Performance & Lazy Loading;Build Environments & Deployment