CODEWITHSUNDEEP
angularangular-router
Shiffi
Shiffi

Reputation: 11

Resolver doesn't work as expected

I created a resolver and except that all components will load after the resolver will be finish to run, but the components are sometimes loaded before the resolver function is done.

The resolver code is:

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { ApiService } from '../services';
import { AppState } from 'spotlightcloud-angular-common-website';
import { Locale } from '../locale/locale';

@Injectable()
export class MetricsLocaleResolver implements Resolve<any> {
  constructor(public api: ApiService, public appState: AppState, private locale: Locale) {
  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
    return this.api.get('monitoring', 'uiconfiguration/metricsmetadata', {}).subscribe(
      localeData => {
        console.log('localeData: ', localeData);
        this.locale.setMetricsLocaleObj(localeData);
      }
    );
  }
}

The localeData print sometimes appears after the print in the component (in onChanges lifecycle).

Upvotes: 1

Views: 347

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657158

Change 

return this.api.get('monitoring', 'uiconfiguration/metricsmetadata', {}).subscribe(

to

return this.api.get('monitoring', 'uiconfiguration/metricsmetadata', {}).map(

If you call .subscribe() you return a Subscription, the router expects an Observable, Promise, or boolean value instead.

The callback also should return a boolean value

  localeData => {
    console.log("localeData:",localeData);
    this.locale.setMetricsLocaleObj(localeData);
    return true;
  }

Upvotes: 1

Related Questions