What are standalone components in Angular and why were they introduced?
Learn what Angular standalone components are, why they replaced NgModules, how imports and bootstrapApplication work, with examples and interview answers.
Expected Interview Answer
Standalone components are Angular components that declare their own dependencies directly via the imports array and do not need to be registered in an NgModule.
Introduced as stable in Angular 15, they set standalone: true and import the pipes, directives, and other components they use themselves. This removes the boilerplate of NgModules, makes dependencies explicit and local, and enables simpler lazy loading with loadComponent and cleaner bootstrapping via bootstrapApplication. From Angular 19 onward, standalone: true is the default.
- Less boilerplate — no NgModule needed
- Explicit, local dependencies via imports
- Simpler lazy loading with loadComponent
- Easier bootstrapping with bootstrapApplication
- Better tree-shaking and a clearer mental model
AI Mentor Explanation
A standalone component is like an all-rounder who carries their own kit bag with bat, pads, and gloves onto the field, rather than relying on a shared team locker (the NgModule) to hand out equipment before every match. Everything the player needs travels with them, so they can be dropped into any XI instantly.
Step-by-Step Explanation
Step 1
Mark the component
Set standalone: true in the @Component decorator (default from Angular 19).
Step 2
Declare imports locally
Add the pipes, directives, and components you use to the component's own imports array.
Step 3
Drop the NgModule
Remove the declarations entry for it — no module registration is needed anymore.
Step 4
Bootstrap or route to it
Use bootstrapApplication for the root, or loadComponent in routes for lazy loading.
Step 5
Provide dependencies
Supply providers via bootstrapApplication or route-level providers instead of module providers.
What Interviewer Expects
- Knows standalone: true removes the NgModule requirement
- Understands the imports array declares local dependencies
- Can explain bootstrapApplication and loadComponent
- Aware it became default in Angular 19
- Understands the motivation: less boilerplate, explicit deps
Common Mistakes
- Still declaring a standalone component inside an NgModule's declarations
- Forgetting to add used pipes or directives to the imports array
- Assuming standalone means no dependency injection
- Confusing standalone components with web components
- Not knowing how to provide services without a module
Best Answer (HR Friendly)
“Standalone components let an Angular component work on its own without being registered in a big central module. It lists exactly what it needs, which cuts down setup code and makes the app easier to understand and load piece by piece.”
Code Example
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserCardComponent } from './user-card.component';
@Component({
selector: 'app-profile',
standalone: true,
imports: [CommonModule, UserCardComponent],
template: `
<h2>{{ name }}</h2>
<app-user-card *ngIf="name" [name]="name"></app-user-card>
`,
})
export class ProfileComponent {
name = 'Ada';
}import { bootstrapApplication } from '@angular/platform-browser';
import { ProfileComponent } from './app/profile.component';
bootstrapApplication(ProfileComponent);Follow-up Questions
- How do you lazy-load a standalone component in the router?
- How do you provide services when there is no NgModule?
- Can standalone and NgModule-based components coexist in one app?
- What is bootstrapApplication and how does it differ from bootstrapModule?
- How does importProvidersFrom help when migrating from modules?
MCQ Practice
1. What does a standalone component use to declare its dependencies?
A standalone component lists the pipes, directives, and components it needs directly in its own imports array, no NgModule required.
2. Which function bootstraps an app rooted at a standalone component?
bootstrapApplication starts an app from a standalone root component and accepts app-level providers directly.
3. From which Angular version is standalone: true the default?
Standalone became stable in Angular 15 and the default (standalone: true implied) from Angular 19.
Flash Cards
What makes a component standalone? — Setting standalone: true so it declares its own imports and needs no NgModule.
How do standalone components declare dependencies? — Via their own imports array listing the pipes, directives, and components they use.
How do you bootstrap a standalone root? — Use bootstrapApplication(RootComponent) with providers passed directly.
How do you lazy-load one in routes? — Use loadComponent: () => import('...').then(m => m.MyComponent).