Verwenden von Angular 2 Kann aktivieren; TS ist in Ordnung, aber ich bekomme einen Fehler

Question

Ich bin neu in Angular 2, versucht, Routen in einer neuen App zu schützen. Die zu verwendende Sache scheint Can Activate zu sein, aber selbst das einfachste Beispiel von can activate scheint kantig zu brechen. Ich erhalte den folgenden Fehler:

ZoneAwareError message: 
"Uncaught (in promise): TypeError: Cannot set property 'stack' of undefined 
TypeError: Cannot set property 'stack' of undefined 
at NoProviderError.set [as stack] (http://localhost:4200/vendor.bundle.js:6147:61) 
at assignAll (http://localhost:4200/vendor.bundle.js:98482:29) 
at NoProviderError.ZoneAwareError (http://localhost:4200/vendor.bundle.js:98553:16) 
at NoProviderError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:6109:16) 
at NoProviderError.AbstractProviderError [as constructor] (http://localhost:4200/vendor.bundle.js:58855:16) 
at new NoProviderError (http://localhost:4200/vendor.bundle.js:58904:16) 
at ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor.bundle.js:80617:19) 
at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor.bundle.js:80654:25) 
at ReflectiveInjector_._getByKey (http://localhost:4200/vendor.bundle.js:80604:25) 
at ReflectiveInjector_.get (http://localhost:4200/vendor.bundle.js:80366:21) 
at AppModuleInjector.NgModuleInjector.get (http://localhost:4200/vendor.bundle.js:59758:52) 
at PreActivation.getToken (http://localhost:4200/vendor.bundle.js:24841:25) 
at MapSubscriber.project (http://localhost:4200/vendor.bundle.js:24737:48) 
at MapSubscriber._next (http://localhost:4200/vendor.bundle.js:11337:35) 
at MapSubscriber.Subscriber.next (http://localhost:4200/vendor.bundle.js:6655:18) 

Mein Code ist der folgende.

Kann aktivieren:

import { Injectable } from '@angular/core'; 
import { 
    CanActivate, 
    ActivatedRouteSnapshot, 
    RouterStateSnapshot 
} from '@angular/router'; 

@Injectable() 
export class CanActivateAuthGuard implements CanActivate { 

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
    return false; 
    } 
} 

Routing-Modul:

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

import { ThoughtListComponent } from './thoughts/thought-list.component'; 
import { LoginComponent } from './login/login.component'; 

import { CanActivateAuthGuard } from './can-activate.service'; 

const routes: Routes = [ 
    { path: '', pathMatch: 'full', redirectTo: 'thoughtList' }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'thoughtList', 
     component: ThoughtListComponent, 
     canActivate: [CanActivateAuthGuard] 
    } 
] 
@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule {} 

export const routableComponents = [ 
    ThoughtListComponent, 
    LoginComponent 
]; 

Da ich verwende Typoskript, ich weiß, dass canActivate Lage sein sollte, einen einfachen boolean zurück ... also bin ich nicht sicher, warum das bricht. Der eigentliche Stack-Trace befindet sich im Lieferantencode ohne Referenzen auf meinen Code.

Ich sah aus anderen Posts, dass die falsche Version der Zone (0.7.3) kann einen Fehler verursachen, aber ich habe versucht, Versionen, die funktionieren sollten (0.7.2 & 0.7.4). Der Rest der App wurde aus Winkel-Cli gebaut.

Ich merke auch, dass mein Code gut funktioniert, wenn ich nur die canActivate-Eigenschaft der Route auskommentieren ... so etwas zu canActivate etwas bricht.

Answer 1

Das Hinzufügen von CanActivateAuthGuard zu den Anbietern Ihres Moduls sollte diesen Fehler beheben.