Standalone Components (Angular 14+)

Historically, the biggest complaint developers had regarding Angular was the NgModule. Before Angular 14, every single Component, Directive, and Pipe you created had to be manually declared inside a massive app.module.ts file. If you forgot to declare it, your app crashed.

In an incredible pivot, modern Angular (v14 and v17 defaults) introduced Standalone Components, which drastically reduces boilerplate and makes Angular feel much closer to React and Vue.

What is a Standalone Component?

A Standalone Component declares strictly what it needs within its own @Component decorator utilizing the imports array, rather than relying on a global NgModule.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; // Replaces BrowserModule
import { HeaderComponent } from '../header.component';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-dashboard',
  standalone: true, // <--- The magic flag!
  
  // We explicitly import ONLY what this exact component requires!
  imports: [CommonModule, HeaderComponent, FormsModule],
  
  template: `
    <app-header></app-header>
    <h1>Welcome, {{ user }}</h1>
    <input [(ngModel)]="user" />
  `
})
export class DashboardComponent {
  user = 'Admin';
}

Bootstrapping a Standalone App

Because app.module.ts no longer exists in a modern standalone setup, you bootstrap the application directly from your main AppComponent via main.ts.

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

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

Migrating Old Apps

You can freely mix and match old NgModule components and new Standalone components within the exact same project! Angular even provides a schematic CLI command to automatically convert an entire legacy codebase to Standalone architecture.

ng generate @angular/core:standalone

Conclusion

Standalone components make Angular significantly easier to learn, debug, and scale. They paved the way for another massive modernization in Angular 16+: Reactive Signals!