resolve guard on angular2 rc6 will not work

Question

Whats with the deal with the resolve guard on angular2 rc6?

Here is my resolver. See where the console log prints WTF? Well that works I see the data I want.

import { Injectable } from '@angular/core';
import { Router, Resolve,ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { ApiService } from '../api_service/api.service';

@Injectable()
export class BasicSetupResolve implements Resolve<any> {

  constructor(private _apiService: ApiService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot): Observable<any> | Promise<any> | any {
    let id = route.params['id'];
    let model_id = id;
    let endpoint='/test/model/basic';
    return this._apiService.getModel(endpoint,model_id,false).subscribe(api_object => {
      if (api_object) {
        console.log('WTF',api_object);
        return api_object;
      } else { // id not found
        this.router.navigateByUrl('/dashboard(content:models/basic/' +  model_id +')');
        return false;
      }
    });


  }
}

In my component

ngOnInit() {

    this.route.data.forEach((data: { crisis: BasicSetup }) => {
        console.log('WHEREAREYOU',data);
        //this.editName = data.crisis.name;
        //this.crisis = data.crisis;
    });

}

Here is my service call:

getModel(endpoint:string,modelId:any,isHash=true){
    console.log(isHash);
    var url = this.getEndpointUrl(endpoint);
     if (isHash==true){
       var result = this._authHttp.get(this.getModelUrl(endpoint,modelId)).map(res => res.json());
     } else {
       var result =this._authHttp.get(this.getModelUrl(endpoint,modelId)).map(res => res.json().results);
     }

        return result;
    }

Why does this not work?

Here is the console log of the the router.data object.

WHEREAREYOU Object {api_object: Subscriber}api_object: Subscriber_subscriptions: nullclosed: truedestination: SafeSubscriber_complete: undefined_context: null_error: undefined_next: (api_object)arguments: (...)caller: [Exception: TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context.
        at Function.remoteFunction (<anonymous>:3:14)]length: 1name: ""prototype: Objectconstructor: (api_object)arguments: [Exception: TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context.
        at Function.remoteFunction (<anonymous>:3:14)]caller: [Exception: TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context.
        at Function.remoteFunction (<anonymous>:3:14)]length: 1name: ""prototype: Objectconstructor: (api_object)arguments: [Exception: TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context.
        at Function.remoteFunction (<anonymous>:3:14)]caller: [Exception: TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context.
        at Function.remoteFunction (<anonymous>:3:14)]length: 1name: ""prototype: Object__proto__: ()<function scope>__proto__: Object__proto__: ()apply: apply()arguments: nullcaller: nulllength: 2name: "apply"__proto__: ()<function scope>arguments: (...)get arguments: ThrowTypeError()set arguments: ThrowTypeError()bind: bind()call: call()caller: (...)get caller: ThrowTypeError()set caller: ThrowTypeError()constructor: Function()length: 0name: ""toString: toString()Symbol(Symbol.hasInstance): [Symbol.hasInstance]()__proto__: Object<function scope><function scope>ClosureClosureGlobal: Window__proto__: Object__defineGetter__: __defineGetter__()__defineSetter__: __defineSetter__()__lookupGetter__: __lookupGetter__()__lookupSetter__: __lookupSetter__()constructor: Object()hasOwnProperty: hasOwnProperty()isPrototypeOf: isPrototypeOf()propertyIsEnumerable: propertyIsEnumerable()toLocaleString: toLocaleString()toString: toString()valueOf: valueOf()get __proto__: __proto__()set __proto__: __proto__()__proto__: ()<function scope>_parent: null_subscriptions: nullclosed: truedestination: ObjectisStopped: truesyncErrorThrowable: falsesyncErrorThrown: falsesyncErrorValue: null__proto__: Subscriber__tryOrSetError: (parent, fn, value)__tryOrUnsub: (fn, value)_unsubscribe: ()complete: ()constructor: SafeSubscriber(_parent, observerOrNext, error, complete)error: (err)next: (value)__proto__: SubscriptionisStopped: truesyncErrorThrowable: falsesyncErrorThrown: falsesyncErrorValue: null__proto__: Subscription__proto__: Object

Answer 1

Try adding first() so the observable closes after the first event. Not sure if this fixes your issue but somehow it seems the router doesn't like to start another navigation while the previous one is still in progress waiting for the response:

resolve(route: ActivatedRouteSnapshot): Observable<any> | Promise<any> | any {
    let id = route.params['id'];
    let model_id = id;
    let endpoint='/test/model/basic';
    return this._apiService.getModel(endpoint,model_id,false).map(api_object => {
      if (api_object) {
        console.log('WTF',api_object);
        return api_object;
      } else { // id not found
        this.router.navigateByUrl('/dashboard(content:models/basic/' +  model_id +')');
        return false;
      }
    }).first();
}