Angular execute resolve with observable

Question

In an angular 5 project I want to execute a resolver before the view is loaded. The problem is the data I want to return from the resolver is depending on an observable. This is the code:

Resolver:

@Injectable()
export class PlayersResolver implements Resolve<any> {
  constructor(private playersSrv: PlayersService) {
    this.playersSrv.getStandings();
  }

  resolve() {
    return this.playersSrv.standings$;
  }
}

Service used by the resolver:

@Injectable()
export class PlayersService {
  standingsSubject = new ReplaySubject<any>();
  standings$ = this.standingsSubject.asObservable();

  constructor(private http: HttpClient) {}

  getStandings(): void {
    this.http.get('http://localhost:8080/api/fixtures/standings')
      .subscribe((response: any) => {
        this.standingsSubject.next(response);
      });
  }
}

With this code when trying to navigate to the view anything is displayed. Any idea about how can I implement the resolve to get the data in my component?

Thanks

Trust me on this; you dont want to subscribe inside of a service. — Jota.Toledo
– Jota.Toledo, Commented Dec 22, 2017 at 15:34

Rohit Ramname · Accepted Answer · 2017-12-22 15:37:13Z

2

1.Return observable from the service function. 2.Remove subscribe from the service. 3.Just call the service function in resolve method that return the call to the service function inturn which returns an observable

resolve():observable<any>{
return  this.playersSrv.getStandings().map((data)=>{//do something with data})
}

4.Resolve guard automatically subscribes to the service call and next route is loaded only when its resolved

answered Dec 22, 2017 at 15:37

Rohit Ramname

8342 gold badges9 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

axl-code Over a year ago

Sorry it doesn't work. Property 'map' does not exist on type 'Observable<Object>'

Rohit Ramname Over a year ago

try not returning the observable from the service...did you import the operator? import 'rxjs/add/operator/map'; getStandings() { return this.http.get('localhost:8080/api/fixtures/standings')}

axl-code Over a year ago

Oh was that. Thanks!!

Collectives™ on Stack Overflow

Angular execute resolve with observable

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related