CODEWITHSUNDEEP
angularrxjs
Ansuman
Ansuman

Reputation: 1494

Route resolver is not working for nested Observables in Angular

Code for route resolver:

  resolve() {
    return this.myService.activeReleases$;
  }

Below is the code for observable in the 'myService'. I have 2 streams here. reloadData$ is the stream which I am using to reload the data. I have added 'startWith(0)' so that the observable will start emitting when it's called.

private readonly reloadData$ = new Subject<void>();

    activeReleases$: Observable<ActiveRecords[]> = this.reloadData$
        .pipe(
          startWith(0),
          tap( () => console.log('Triggered reload')),
          switchMap( () => this.http.get(this.URL)
            .pipe(
              tap( () => console.log('Triggered getting records')),
              map((values: ActiveRecords[]) => {
                console.log('hi')
                return values;
              }),
              catchError(e => of(e)),
              ))
    );

    reloadData() {
        this.reloadData$.next();
    }

I can see the log statements I have mentioned above when I hit the url in browser but somehow the route is not resolving and I am seeing a blank page. However if I remove the 'this.reloadData$' observable then it works fine. Can't figure out what might be the issue.

I have created a dirty example if stackblitz - https://stackblitz.com/edit/angular-ugvvrc

If you click on the link 'Go to test page', nothing happens.

Would appreciate any help on this!

Upvotes: 2

Views: 772

Answers (1)

benshabatnoam
benshabatnoam

Reputation: 7632

All you need to do is to add take(1), to your pipe.

What this take operator does is it completes the observable after taking the n times you've passed it, in our case just the first one.

Forked Stackblitz

import { ..., take } from 'rxjs/operators';

activeReleases$: Observable<ActiveRecords[]> = this.reloadData$
        .pipe(
          startWith(0),
          take(1),
          tap( () => console.log('Triggered reload')),
          switchMap( () => this.http.get(this.URL)
            .pipe(
              tap( () => console.log('Triggered getting records')),
              map((values: ActiveRecords[]) => {
                console.log('hi')
                return values;
              }),
              catchError(e => of(e)),
              ))
    );

NOTE: I don't know why this is a must in your situation but it works. (it looks like an angular's bug to me)

Upvotes: 2

Related Questions