Angular 6中await Promise致后续请求跳出NgZone问题求助

Let's break down what's happening here and how to fix this frustrating behavior:

The Problem Recap #

You've hit a quirky issue where your first HTTP request via toPromise() runs inside Angular's NgZone, but every subsequent request escapes it—leading to broken change detection unless you manually trigger detectChanges(). Switching to plain subscribe() keeps all requests in the zone, and changing your TypeScript target from esnext to es5 also resolves the problem entirely.

Why This Happens #

Angular's NgZone relies on monkey-patching common async APIs (like Promise.then, setTimeout, etc.) to track when async operations finish, which automatically triggers change detection.

When compiling to esnext, TypeScript uses the native ESNext Promise implementation instead of transpiling down to ES5-compatible code. Older Angular versions (like 6) have compatibility gaps with native ESNext Promises—specifically, the toPromise() method on RxJS Observables fails to preserve the NgZone context after the first invocation.

With subscribe(), RxJS's internal scheduling stays within NgZone because Angular patches RxJS's schedulers directly. But toPromise() bridges RxJS to native Promises, which in ESNext mode bypasses NgZone's patches after the first use, causing subsequent requests to run outside the zone.

Solutions #

Here are actionable fixes, ordered from quick workarounds to long-term resolutions:

1. Wrap Async Calls in NgZone
   Explicitly force your async operations to run inside Angular's zone using NgZone.run(). You can apply this globally in your base HTTP service or locally in component code:

   Option A: Global Fix in Base Service

   import { NgZone } from '@angular/core';
   // ...
   constructor(protected http: HttpClient, protected zone: NgZone) {}
   
   // Modify your request method to wrap the promise in NgZone
   makeRequest(request: any) {
     console.log('xxxx', request.url, NgZone.isInAngularZone());
     return this.zone.run(() => {
       return this.http.request(request).toPromise();
     });
   }
   

   Option B: Local Fix in Component Code

   import { NgZone } from '@angular/core';
   // Inject NgZone in your component constructor
   constructor(private zone: NgZone, /* ... other services */) {}
   
   // Wrap your Promise.all and await calls
   async yourComponentMethod() {
     const [yy, xx] = await this.zone.run(() => Promise.all([
       this._labelApi.find().toPromise(),
       this._workspaceApi.find().toPromise()
     ]));
     const z = await this.zone.run(() => this._labelApi.find().toPromise());
   }
   

2. Replace toPromise() with RxJS's lastValueFrom/firstValueFrom
toPromise() is deprecated in RxJS 7+, and its replacements (lastValueFrom and firstValueFrom) have far more consistent behavior with NgZone. If you can upgrade RxJS (compatible with Angular 6 using RxJS 6.x+), try this:

   import { lastValueFrom } from 'rxjs';
   
   async yourComponentMethod() {
     const [yy, xx] = await Promise.all([
       lastValueFrom(this._labelApi.find()),
       lastValueFrom(this._workspaceApi.find())
     ]);
     const z = await lastValueFrom(this._labelApi.find());
   }
   

3. Upgrade Angular to a Newer Version
   Angular 6 is quite outdated (released in 2018), and later versions (8+) fixed many compatibility issues with ESNext and NgZone. Upgrading to a supported stable version will resolve this problem at the root, along with other bugs and security patches.

4. Temporary: Stick with es5 Target
   If you don't need ESNext-specific features right now, keeping target: es5 in your tsconfig.json is a quick fix—transpiled ES5 Promises are properly patched by NgZone, avoiding the escape issue entirely.

Why subscribe() Works #

RxJS Observables in Angular are tightly integrated with NgZone: Angular patches RxJS's internal schedulers to ensure all subscription callbacks run inside the zone. This means every subscribe() call maintains the correct context, avoiding the escape problem you see with toPromise() in ESNext mode.

内容的提问来源于stack exchange，提问作者jmls