Angular resolver not resolving?

问题

This is a demo of the problem:

https://stackblitz.com/edit/angular-routing-with-resolver-observable?file=src%2Fapp%2Fpost-resolver.service.ts

Switching out this.observeLoading$ with of(false) makes it work, so I think it has something to do with the fact that this.observeLoading$ is notified by a ReplaySubject that can provide more than one notification ...

Here are more details:

First this does resolve:

    async resolve(
        route: ActivatedRouteSnapshot) {
        const topic = await of(false).pipe(
            switchMap((v) =>{
                console.log("MADE IT THIS FAR: ", v)
                return of(new Topic)
            })).toPromise()
        console.log("THE TOPIC RETURNED IS", topic)

        return topic;

In the above case it logs everything and performs the navigation.

In the below case it logs "MADE IT THIS FAR: false", but then it hangs.

    async resolve(
        route: ActivatedRouteSnapshot) {
        const id = route.paramMap.get('id')
        const topic = await this.cs.loadingTopicStore$.pipe(
            switchMap((v) =>{
                console.log("MADE IT THIS FAR: ", v)
                return of(new Topic)
            })).toPromise()
        console.log("THE TOPIC RETURNED IS", topic)

        return topic;

As far as I can tell the two scenarios are essentially the same. The only difference is in the first we are using of(false) and in the second we are using this.cs.loadingTopicStore$, and both of these are firing since "MADE IT THIS FAR: " is logged in both cases.

Thoughts?

Filed an Issue with Angular

https://github.com/angular/angular/issues/34535

回答1:

If the this.cs.loadingTopicStore$ observable emits more than one false value (Which it is doing in this case) entire sequence fails and just hangs.

The solution is to limit the notifications to only one false value using takeWhile like this:

        const topic = await this.cs.loadingTopicStore$.pipe(
            takeWhile(v => v != false, true),
            switchMap((v) => { ...

来源：https://stackoverflow.com/questions/59447093/angular-resolver-not-resolving