What are standalone components?

Question

Accepted Answer

**Standalone components** (Angular 14+, default in newer versions) let a component declare its **own dependencies directly**, without needing to belong to an `NgModule`. They dramatically reduce boilerplate and are now the recommended way to build Angular apps. ## A standalone component ```ts import { Component } from "@angular/core"; import { CommonModule } from "@angular/common"; import { RouterLink } from "@angular/router"; @Component({ selector: "app-user-list", standalone: true, // ← no NgModule needed imports: [CommonModule, RouterLink], // ← declare dependencies HERE, on the component template: ` {{ u.name }} `, }) export class UserListComponent { users = []; } ``` The component imports exactly what its template uses (`CommonModule` for `*ngFor`, `RouterLink` for links) — its dependencies are explicit and co-located, rather than declared in a separate NgModule. ## The contrast with NgModules ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Bootstrapping a standalone app (no AppModule) ```ts import { bootstrapApplication } from "@angular/platform-browser"; import { provideRouter } from "@angular/router"; import { provideHttpClient } from "@angular/common/http"; bootstrapApplication(AppComponent, { providers: [ provideRouter(routes), // configure router functionally provideHttpClient(), // HttpClient without HttpClientModule ], }); ``` Standalone apps replace the root `AppModule` with `bootstrapApplication` and **`provideX`** functions — a cleaner, function-based configuration. ## Benefits ```text ✓ Less boilerplate — no NgModule files to maintain ✓ Explicit dependencies — see exactly what a component uses ✓ Easier lazy loading — loadComponent() directly ✓ Simpler mental model — components are self-contained units ✓ Better tree-shaking potential ``` ## Why it matters Standalone components are the **modern direction of Angular** — the framework now scaffolds standalone by default and provides `provideX` functions to configure features without modules. They remove the longstanding NgModule overhead, make dependencies explicit and local, and simplify lazy loading and the overall mental model. Understanding standalone (and the `bootstrapApplication`/`provideRouter`/`provideHttpClient` setup) is essential for working in current Angular, while NgModule knowledge remains needed for legacy code.