Advanced Angular
Standalone Components
Modern Angular (No NgModules)
💡 Standalone components ek SELF-SUFFICIENT traveler jaise hain — apna khud ka SAMAAN (imports) carry karते hain, kisi TOUR GROUP (NgModule) ki zaroorat nahi. Modern Angular (17+ DEFAULT) mein ye standard approach hai.
Standalone components standalone: true (Angular 14-18) ya DEFAULT (Angular 19+) se apni OWN dependencies IMPORTS array mein directly specify karते hain — NO NgModule zaroori. Simpler mental model, kam boilerplate, better tree-shaking (unused code automatically REMOVE hota hai final bundle se).
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-user-list',
standalone: true, // Angular 19+ mein DEFAULT (likhna optional)
imports: [CommonModule, RouterLink], // apni khud ki dependencies
template: `
<ul>
<li *ngFor="let user of users">
<a [routerLink]="['/users', user.id]">{{ user.name }}</a>
</li>
</ul>
`
})
export class UserListComponent {
users = [{ id: 1, name: 'Aarav' }];
}
// Bootstrap bhi NgModule ke bina:
// bootstrapApplication(AppComponent, { providers: [provideRouter(routes)] });🎯
Standalone components ek SELF-SUFFICIENT traveler jaise hain — apna khud ka SAMAAN (imports) carry karते hain, kisi TOUR GROUP (NgModule) ki zaroorat nahi. Modern Angular (17+ DEFAULT) mein ye standard approach hai.
1 / 2
⚡ झट से Recap
- standalone: true = apni khud ki imports, no NgModule zaroori
- Simpler, less boilerplate, better tree-shaking
- Angular 17+ mein DEFAULT approach naye projects ke liye
इस page में (2 subtopics)
Angular CLI ek MIGRATION SCHEMATIC deता hai EXISTING NgModule-based apps ko standalone mein CONVERT karne ke liye — automatically imports figure out karके, components ko update karता hai.
# Migration command:
ng generate @angular/core:standalone
# Ye teen steps mein chalता hai:
# 1. Components ko standalone: true mark karo
# 2. NgModules remove karo
# 3. Bootstrap ko bootstrapApplication() mein convert karoTip: Migration GRADUAL bhi ho sakti hai — Angular STANDALONE aur NgModule-based components ko SAME app mein COEXIST karने deta hai, isliye BADI, EXISTING applications ko EK-BAAR mein sab kuch convert karने ki zaroorat nahi.
Sirf COMPONENTS nahi — DIRECTIVES aur PIPES bhi standalone ho sakte hain (Angular 14+ mein standalone: true, 19+ mein DEFAULT) — SAME simplified, NgModule-free pattern.
@Directive({
selector: '[appHighlight]',
standalone: true // Angular 19+ mein optional/default
})
export class HighlightDirective { }
@Pipe({
name: 'truncate',
standalone: true
})
export class TruncatePipe implements PipeTransform { }Tip: Poora Angular ecosystem (components, directives, pipes) STANDALONE-first design ki taraf move ho raha hai — NgModules ab OPTIONAL hain, purane, existing large-scale codebases ke liye backward compatibility ke roop mein maintained hain.