Type 'Observable<{}>' is not assignable to type 'Observable<boolean> | boolean '

Question

Im trying to follow this tutorial , but I'm getting errors.

1. pathMatch: 'full'. I tried changing " @angular/router " to " 3.0.0-beta.2 ", still the same issue.

My dependencies:

"dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/platform-server": "2.0.0-rc.3",
    "@angular/router": "3.0.0-beta.2",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "nativescript-angular": "0.2.0",
    "tns-core-modules": "^2.1.0"
},

2. Type ' Observable<{}>' is not assignable to type 'Observable ', where it points to the line 'return o' ;

    canDeactivate(): Observable<boolean> | boolean { if (!this.crisis || this.crisis.name === this.editName) { return true; } let p = this.dialogService.confirm('Discard changes?'); let o = Observable.fromPromise(p); return o; } 

Can anyone guide me to fix these errors? thanks.

Answer 1

You could try casting:

canDeactivate(): Observable<boolean> | boolean {

    if (!this.crisis || this.crisis.name === this.editName) {

        return true;
    }
    let p = this.dialogService.confirm('Discard changes?');
    let o = <Observable<boolean>>Observable.fromPromise(p);
    return o;
}

Answer 2

The compiler is complaining because the return value o is of type Observable<{}> . This is most likely because you are constructing an Observable from p , which resolves to type Promise<{}> . Double-check dialogService.confirm() and make sure its return value is of type Promise<boolean> .

If that doesn't work, you could try explicitly casting like @rinukkusu suggests.

Answer 3

I had the same error and the problem was that i wasn,t injecting Authguard as a service on providers and also that i wasn,t put in routes an array in canActivated . Make sure that you have your AuthGuard as

`@Injectable()
export class AuthGuard implements CanActivate {
  logued: boolean = false;

  constructor(private rest: UsuarioService, private router: Router) {
    this.rest.getObservLogued().subscribe(res => {
      this.logued = res;
    });
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree  {
    let url: string = state.url;

    return this.checkLogin(url);
  }`

then in routes where you wish authguard set like this

`{ path: 'articulos', component: ArticuloComponent,

   canActivate: [AuthGuard] },`

and then check you are injecting as a service AuthGuard in app.module

providers : [AuthGuard]