Zone.js भनेको के हो र "zoneless" Angular को अर्थ के हो?

Question

Accepted Answer

**Zone.js** एक library हो जसलाई Angular ले ऐतिहासिक रूपमा **कहिले change detection चलाउने** भनेर जान्नको लागि प्रयोग गरेको छ। यसले browser async APIs लाई patch गर्छ ताकि Angular ले स्वचालित रूपमा कुनै पनि event पत्ता लगाउन सक्छ जसले state परिवर्तन गर्न सक्छ। **Zoneless** Angular यो निर्भरता हटाउँछ, यसको सट्टा signals र स्पष्ट 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 को "जादू" हो स्वचालित अपडेटको पछाडि: तपाई एक property बदल्नुहुन्छ HTTP response वा click पछाडि, र view मात्र अपडेट हुन्छ — किनकि 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 ट्रिगर गर्छ — ठूलो apps को लागि अक्षम।

## Zoneless Angular (signals-based)

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

Zoneless mode मा, Angular ले patch गरिएको async APIs मा निर्भर गर्दैन। यसको सट्टा, change detection लाई **स्पष्ट रूपमा** ट्रिगर गरिन्छ — मुख्यतया **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 को लामो समयको "स्वचालित" change detection — र यसको लागत (bundle size, व्यापक/अपूर्ण checking) को व्याख्या गर्छ।

**Zoneless** मा सरिरहने आन्दोलन, **signals** को माध्यमबाट शक्तिशाली, एक प्रमुख आर्किटेक्चरल परिवर्तन हो: यसले अपडेटहरूलाई fine-grained र स्पष्ट बनाउँछ, bundle को आकार घटाउँछ, र performance मा सुधार गर्छ।

दुवै बुझ्नु — Zone.js किन अस्तित्वमा छ र यसलाई के प्रतिस्थापन गर्छ — आरै आरै महत्त्वपूर्ण हुन्दैछ किनकि Angular signals-based, zoneless भविष्यको दिशामा सरिरहेको छ जो default को रूपमा छ।