使用Angular 2可以激活; TS很好，但我得到一個錯誤

我是Angular 2的新手，試圖保護新應用中的路由。使用的東西似乎是可以激活的，但即使使用最簡單的激活示例似乎也可以打破角度。我收到以下錯誤：使用Angular 2可以激活; TS很好，但我得到一個錯誤

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)

我的代碼如下。

可以激活：

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; 
    } 
}

路由模塊：

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 
];

由於我使用的打字稿，我知道canActivate應該能夠返回一個簡單的布爾...所以我不知道爲什麼這是打破。實際的堆棧跟蹤全部在供應商代碼中，沒有提及我的代碼。

我從其他帖子看到，錯誤版本的區域（0.7.3）可能會導致錯誤，但我試過的版本應該可以工作（0.7.2 & 0.7.4）。該應用程序的其餘部分是由angular-cli構建的。

我還注意到，當我只註釋掉路由的canActivate屬性時，我的代碼工作正常......所以特定於canActivate的某些內容正在中斷。

來源

2017-01-15 ansorensen

您是否已將CanActivateAuthGuard添加到模塊的提供者？ –

似乎提供商的聲明缺少路由 – Gary

將CanActivateAuthGuard添加到您的模塊的提供者應該修復此錯誤。

來源

2017-01-16 06:40:30 Ron537

使用Angular 2可以激活; TS很好，但我得到一個錯誤

回答

相關問題