Angular resolver get an Observable

Question

I work on Angular 10 project. I get data from my backEnd with a simple

return this.http
      .get<{ returned: Animal[] }>('animals')
      .pipe(map((res) => res.returned.map((value) => value)));

this is call by my resolver and send through router in my routing module with

resolve: {
        animals: AnimalResolver,
}

I get resolve data with this.route.snapshot.data.animals

I want to have an Obervable<Animal[]> for use AsyncPipe. The type return by the resolver is an Observable<Animal[]> but I get an error invalid Pipe argument, to resolve this error I need to make :

of(this.route.snapshot.data.animals);

Why?

Answer 1

In this case you need to use this.route.data observable where route is ActivatedRoute while ActivatedRouteSnapshot is just "static" data of current route and there are no observables here.

this.animals$ = this.route.data
  .pipe(map(data => data.animals));