Angular/Rxjs pipe async does not work with ssr?

问题

I have an issue with the async pipe running on SSR. there are no errors, only an infinite loop (it seems that the server is waiting for the observable to be resolved).

I am using:

1. @nestjs/ng-universal
2. Angular 9
3. Firebase
4. Rxjs

A simple case like this works:

<p>{{ observable | async }}</p>

But using structural directives do not work:

ngIf

<p *ngIf="(observable$ | async) > 5">{{ observable$ | async }}</p>

Ngfor

<p *ngFor="let item of items | async">{{ item }}</p>

Using async is a good practice because it will avoid manual unsubscribe to avoid memory leak when the component is destroyed. However, using manual unsubscribe works.

Update 08/06/2020

When I add the index.html after http://localhost:4200 the app loads

The async is in the template like this:

<ng-container *ngIf="currentUser$ | async; else loadingUser">

and currentUser$ is set in the ngOnInit method of the component:

  ngOnInit(): void {
    this.currentUser$ = this.authService.currentUser$;
  }

Update 16/06/2020

When we remove ALL uses of OnPush detection strategy in components, then SSR mode works, even with async used in structural directives.

So this seems to indicate that using OnPush TOGETHER with async in structural directives does not work in SSR mode.

Note

We are using nest.js for SSR/Universal.

回答1:

When we use OnPush change detection strategy we basically detect the changes when we specifically want it.

OnPush change is only detected when we change the reference of the variable and not just the value.

So here your both the concepts are getting conflicted. Either you change your detection strategy or you change the reference of the currentUser$ observable.

I would suggest you should change the detection strategy here.

来源：https://stackoverflow.com/questions/62246010/angular-rxjs-pipe-async-does-not-work-with-ssr