Standalone Components (v14)

📚 What are Standalone Components?

Standalone components were introduced in Angular 14 and became the default in Angular 19+.

No NgModule required: Components can be used directly
Self-contained: Imports are declared in the component itself
Better tree-shaking: Only import what you need
Simpler mental model: No need to understand NgModule system
v19+: standalone: true is now the default (no need to specify)

📅 Version History

v14Standalone components introduced (Developer Preview)

v15Standalone APIs stable, standalone bootstrapping

v17Standalone by default for new projects with ng new

v19+standalone: true is implicit (no need to declare)

🎯 Interview Questions

Q1: What are the benefits of standalone components?
A: Simpler code, better tree-shaking, no NgModule boilerplate, easier lazy loading, clearer dependencies.
Q2: How do you import dependencies in a standalone component?
A: Use the 'imports' array in @Component decorator to import other components, directives, and pipes.
Q3: How do you bootstrap a standalone application?
A: Use bootstrapApplication() in main.ts instead of platformBrowserDynamic().bootstrapModule().
Q4: Can standalone components work with NgModules?
A: Yes! You can import NgModules in standalone components, and export standalone components from NgModules.

🔄 NgModule vs Standalone Comparison

❌ Old Way (NgModule)

• Declare in NgModule
• Export from NgModule
• Import NgModule to use
• Complicated dependency chain

✅ New Way (Standalone)

• No NgModule needed
• Import directly in component
• Clear, explicit dependencies
• Better tree-shaking

🔧 This Component is Standalone!

This very component you're looking at is a standalone component. Notice how it doesn't need to be declared in any NgModule - it just works!

In Angular 19+, you don't even need to write standalone: true - it's the default!

💻 Code Examples


// ============ OLD WAY: NgModule (Angular < 14) ============
// app.module.ts
@NgModule({
  declarations: [AppComponent, HeaderComponent, FooterComponent],
  imports: [BrowserModule, CommonModule, FormsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

// main.ts (old)
platformBrowserDynamic().bootstrapModule(AppModule);

// ============ NEW WAY: Standalone (Angular 14+) ============

// Angular 14-18: Must specify standalone: true
@Component({
  selector: 'app-header',
  standalone: true,  // Required in v14-18
  imports: [CommonModule, RouterLink],
  template: `<nav>...</nav>`
})
export class HeaderComponent {}

// Angular 19+: standalone: true is DEFAULT
@Component({
  selector: 'app-header',
  // standalone: true is implicit!
  imports: [RouterLink],
  template: `<nav>...</nav>`
})
export class HeaderComponent {}

// main.ts (new standalone bootstrap)
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';

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

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    // provideHttpClient(),
    // provideAnimations(),
  ]
};