Angular Standalone vs NgModule

Angular में application structure define करने के लिए पहले NgModules use होते थे। Modern Angular (v14+) में Standalone Components, Directives और Pipes introduce किए गए हैं, जिससे module dependency कम होती है और application setup simple होता है।

इस chapter में आप सीखेंगे:

• NgModule क्या है
• Standalone Components क्या हैं
• दोनों में अंतर (difference)
• कब standalone use करें और कब module-based architecture

NgModule क्या है

NgModule Angular का traditional building block है। यह components, directives, pipes और services को group करता है और application के scope को manage करता है।

Example: AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello/hello.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Explanation

• declarations: Components, directives, pipes register होते हैं
• imports: External modules include होते हैं
• providers: Services inject करने के लिए
• bootstrap: Root component define करता है

Angular में अब तक हर component को module में declare करना पड़ता था।

Standalone Components क्या हैं

Standalone Components modern Angular का feature है।

• इन्हें NgModule declare करने की जरूरत नहीं होती
• इन्हें directly bootstrap किया जा सकता है
• Lightweight और modular applications बनती हैं

Example: Standalone Component

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-standalone',
  standalone: true,
  imports: [CommonModule],
  template: `<h2>Hello Standalone Component!</h2>`,
})
export class StandaloneComponent { }

Explanation

• standalone: true property बताती है कि यह module-independent है
• imports array में सिर्फ वही modules डालें जो required हों
• Component directly use किया जा सकता है (no NgModule required)

Standalone Component को Bootstrap करना

import { bootstrapApplication } from '@angular/platform-browser';
import { StandaloneComponent } from './app/standalone.component';

bootstrapApplication(StandaloneComponent);

Explanation

• bootstrapApplication replace करता है traditional platformBrowserDynamic().bootstrapModule(AppModule)
• Root component directly standalone हो सकता है

Difference: NgModule vs Standalone

Feature	NgModule	Standalone Component
Module Required?	हाँ	नहीं
Bootstrap Process	bootstrapModule(AppModule)	bootstrapApplication(Component)
Code Size / Simplicity	Bigger, more boilerplate	Smaller, simple
Reusability	Modules need to import/export components	Directly import component in other components
Recommended for New Apps	Old Angular apps	New projects, modern Angular

कब Standalone Use करें

• Small to medium projects
• New Angular projects
• Simplified module structure चाहते हैं
• Less boilerplate चाहते हैं

कब NgModule Use करें

• Legacy Angular projects maintain करने के लिए
• Large enterprise applications जिसमें multiple modules already exist
• Third-party library heavily module-based हो

Best Practices

• New Angular apps → prefer standalone components
• Existing apps → gradual migration to standalone possible
• Services और global modules के लिए अभी भी NgModule concepts use होते हैं
• Feature-based organization के लिए standalone + modules दोनों mix कर सकते हैं

Summary

इस chapter में आपने सीखा:

• Traditional NgModule क्या है
• Modern Standalone Components क्या हैं
• दोनों में differences और advantages
• Standalone components को bootstrap करना
• कब standalone use करना चाहिए और कब modules