Zone.js क्या है और "zoneless" Angular का क्या मतलब है?

Question

Accepted Answer

**Zone.js** एक library है जो Angular ने ऐतिहासिक रूप से **जब change detection चलाना है यह जानने** के लिए उपयोग की है। यह browser async APIs को patch करता है ताकि Angular स्वचालित रूप से किसी भी event का पता लगा सके जो state को बदल सकता है। **Zoneless** Angular इस dependency को हटाता है, signals और explicit notifications पर निर्भर करता है।

## Zone.js क्या करता है

```text
Zone.js monkey-patches async APIs: setTimeout, addEventListener, Promise,
XHR/fetch, etc. When any of them fires, Zone.js notifies Angular →
Angular runs change detection automatically.
```

यह Angular के automatic updates के पीछे का "magic" है: आप एक HTTP response या click के बाद एक property बदलते हैं, और view बस update हो जाता है — क्योंकि Zone.js ने Angular को बताया कि एक async event पूरा हो गया।

```ts
// you write this, and the view updates automatically — thanks to Zone.js:
setTimeout(() => { this.message = "Updated"; }, 1000); // Zone.js triggers CD
```

## Zone.js के नुकसान

```text
✗ Overhead — patches everything, and triggers CD broadly (checks the whole tree)
✗ ~100KB added to the bundle
✗ Imprecise — runs change detection even when nothing relevant changed
✗ Can be confusing with third-party code that runs outside Angular's zone
```

क्योंकि Zone.js यह नहीं बता सकता कि *क्या* बदला, यह कई events पर एक पूर्ण change-detection pass को trigger करता है — बड़े apps के लिए inefficient।

## Zoneless Angular (signals-आधारित)

```ts
bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()], // no Zone.js
});
```

Zoneless mode में, Angular patched async APIs पर निर्भर नहीं करता। इसके बजाय, change detection **explicitly** trigger होता है — मुख्य रूप से **signals** द्वारा (जो Angular को सचेत करते हैं जब उनका value बदलता है), साथ ही `async` pipe, events, और `markForCheck()`।

```ts
count = signal(0);
increment() { this.count.set(this.count() + 1); } // the signal tells Angular what changed → fine-grained update
```

## Zoneless जाने के लाभ

```text
✓ Smaller bundle (drop ~100KB Zone.js)
✓ Better performance — fine-grained, precise updates (only what depends on changed signals)
✓ Cleaner integration with non-Angular code
✓ Simpler debugging (no zone-related stack noise)
```

## यह क्यों महत्वपूर्ण है

Zone.js Angular के लंबे समय से "automatic" change detection को explain करता है — और इसकी cost (bundle size, broad/imprecise checking)।

**Signals** द्वारा संचालित **zoneless** की ओर बढ़ना एक major architectural shift है: यह updates को fine-grained और explicit बनाता है, bundle को shrink करता है, और performance में सुधार करता है।

दोनों को समझना — Zone.js क्यों existed था और क्या इसे replace करता है — तेजी से महत्वपूर्ण है क्योंकि Angular signals-based, zoneless future की ओर जा रहा है जो default के रूप में है।