Angular Standalone Components
⏱️ ~14-minute bite · solve the sandbox to master
5-Year-Old Metaphor
— The physical, real-world picture. No jargon.NgModule = HOA (Homeowners Association) that manages shared amenities. You have to register with the HOA to use the pool — every component must be declared in a module before it can be used anywhere.
Standalone = condo owner who brings their own washer/dryer. More self-contained, less ceremony. You import exactly what you need, right on your component. No registration. No shared membership.
The tradeoff: you're responsible for your own imports. But that's also the superpower — Angular can tree-shake exactly what you don't import, and you can see your component's dependencies at a glance.
Interactive Sandbox
— Move something, see it react instantly.Add standalone: true to @Component. The component manages its own imports — no NgModule needed to declare it.
| 1 | // ❌ NgModule approach — must declare in a module |
| 2 | @NgModule({ |
| 3 | declarations: [UserCardComponent], |
| 4 | imports: [CommonModule], |
| 5 | exports: [UserCardComponent], |
| 6 | }) |
| 7 | export class UserModule {} |
| 8 | |
| 9 | @Component({ |
| 10 | selector: 'app-user-card', |
| 11 | templateUrl: './user-card.component.html', |
| 12 | }) |
| 13 | export class UserCardComponent { |
| 14 | @Input() name!: string; |
| 15 | } |
Angular 14+ feature. The standalone flag removes the requirement to declare the component in an NgModule before use.
Challenge
Explore all 5 standalone patterns. Compare NgModule vs standalone side-by-side for each.
Why Should I Care?
— The exact interview question + the bug it kills.Q: What problem do standalone components solve?
NgModule boilerplate — you had to declare every component in a module before using it. Standalone removes that indirection, simplifies the mental model, and enables finer-grained tree-shaking since each component explicitly lists what it uses.
Q: Can you mix NgModule and standalone components?
Yes. An NgModule can import a standalone component directly (it appears in its imports array, not declarations). A standalone component can import an NgModule to access its exported directives/pipes. Migration can be incremental.
Q: Is NgModule deprecated?
Not officially removed, but standalone is the Angular team's recommended path forward (Angular 17+ scaffolding generates standalone by default). NgModule will be supported long-term for backward compatibility.
The Deep Dive
— Spec refs, engine internals, the minutiae.Angular internals and migration tooling for standalone architecture:
- 01
importProvidersFrom(RouterModule.forRoot(routes)) bridges third-party NgModule providers into an ApplicationConfig — the escape hatch for libraries not yet standalone-ready.
- 02
ApplicationConfig shape: { providers: EnvironmentProviders[] } — note EnvironmentProviders (returned by provide* functions) is distinct from Provider (class/value/factory providers).
- 03
ENVIRONMENT_INITIALIZER: a DI token for running side effects during environment setup — use it in providers to run code before the app bootstraps.
- 04
Standalone migration schematic: ng generate @angular/core:standalone — runs in three modes: convert components, remove unnecessary NgModules, bootstrap to standalone. Run in that order.
- 05
Route-level providers: { path: 'admin', providers: [AdminService], loadComponent: () => ... } — creates an environment injector scoped to the route subtree.
Interview Questions
— Real questions from real interviews — with answers.They eliminate NgModule boilerplate — each component declares its own imports, no module membership required.
bootstrapApplication(AppComponent, appConfig) replaces platformBrowserDynamic().bootstrapModule(AppModule).
loadComponent() lazy-loads one standalone component; loadChildren() lazy-loads a subtree of routes.
Yes to both — they interop cleanly for incremental migration.
Functional providers return EnvironmentProviders — explicit, composable, tree-shakeable; no NgModule side effects.
Each route with providers: [] creates a scoped environment injector for that route subtree.
Memory Game
— Quick quiz — lock the concept in long-term memory.What is the purpose of the ENVIRONMENT_INITIALIZER token in standalone apps?