Angular Universal App представляет серверную часть с выдающимися микро- и макротазами

Question

Я запрашиваю API-интерфейс SaaS из-за сторонней библиотеки. Сервер заканчивает рендеринг углового универсального приложения, когда есть ожидающие / незаконченные вызовы сервиса

---

Я использую Angular 5.2.0 и его функциональность SSR. Это абстрактная структура моей установки:

server.ts

/* ... */
renderModuleFactory(AppServerModuleNgFactory, {
  document: template,
  url: options.req.url,
  extraProviders: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}).then(html => {
  console.log('--- HTML DATA FETCHED ---');
});
/* ... */

my.component.html

<div *ngIf="data$ | async as responseData">
  Data is available
</div>

my.component.ts

export class MyComponent implements OnInit {
  public data$: Observable<any>;
  @Input() serviceKey: string;

  constructor(private serviceWrapper: ServiceWrapper) { }

  ngOnInit() {
    this.data$ = this.serviceWrapper.get(this.serviceKey);
  }
}

сервис-wrapper.service.ts

export class ServiceWrapper {
  private thirdPartyClient: ThirdPartyClient;
  constructor(private _zone: NgZone) {
    /* ...initialize thirdPartyClient... */
  }
  get(serviceKey: string): Observable<any> {

    console.log(serviceKey + ' is stable: ' + this._zone.isStable);
    console.log(serviceKey + ' outstanding macrotasks: ' + this._zone.hasPendingMacrotasks);
    console.log(serviceKey + ' outstanding microtasks: ' + this._zone.hasPendingMicrotasks);

    return new Observable<any>(subscriber => {
      this.thirdPartyClient.getFromRemote(serviceKey).then(response => {
        subscriber.next(response);
        subscriber.complete();
      });
    });
  }
}

app.component.html

<app-my-component service-key="keyA"> </app-my-component>
<app-my-component service-key="keyB"> </app-my-component>
<app-my-component service-key="keyC"> </app-my-component>
<app-my-component service-key="keyD"> </app-my-component>
<app-my-component service-key="keyE"> </app-my-component>

Выход

keyA is stable: false
keyA outstanding macrotasks: false
keyA outstanding microtasks: false
keyB is stable: false
keyB outstanding macrotasks: true
keyB outstanding microtasks: true
keyC is stable: false
keyC outstanding macrotasks: true
keyC outstanding microtasks: true
keyD is stable: false
keyD outstanding macrotasks: true
keyD outstanding microtasks: true
--- HTML DATA FETCHED ---
keyE is stable: false
keyE outstanding macrotasks: false
keyE outstanding microtasks: true

---