Angular Route Guard 在提供时抛出 ZoneAwareError

Question

我正在学习 Angular（从 AngularJS 1.5 升级到 Angular）并尝试我在 v1.5 中可以做的事情，比如守卫路线。

使用 AngularCLI 我添加了一个守卫，但是一旦它被提供给 canActivate 它就会抛出这个错误：

ERROR ZoneAwareError {__zone_symbol__error: Error: Uncaught (in promise): Error
Error
    at Error.ZoneAwareError (http://localhost:4200/polyfil…, rejection: Error, promise: ZoneAwarePromise, zone: Zone, task: ZoneTask}

如果我只使用 canActivate: [] 错误就会消失，但是一旦它是 canActivate: [AuthGuard] 无论我对守卫做什么，总是会抛出错误。

我也一直在关注 docs，如果我用他们在 src/app/auth-guard.service.ts (excerpt) 中提供的最简单的示例替换 AuthGuard，它仍然会抛出相同的错误。

谁能看出为什么这不起作用？

// APP-ROUTING.MODULE.TS

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

import { AuthGuard } from './core/auth.guard';

import { DashboardComponent } from './dashboard/dashboard/dashboard.component';
import { PageNotFoundComponent } from './core/page-not-found/page-not-found.component';

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    pathMatch: 'full',
    canActivate: [AuthGuard] // <-- throws error
    //canActivate: [] // <-- no error
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

// AUTH.GUARD.TS

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

import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
  }
}

// AUTH.GUARD.TS（来自文档的更简单版本仍然失败）

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

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate() {
    console.log('AuthGuard#canActivate called'); // never logs to console
    return true;
  }
}

Answer 1

将守卫放在定义仪表板路径的地方：

//...
{  path : 'dashboard',
   component : DashboardComponent
   canActivate: [AuthGuard]
}
//...

Answer 2

好的，虽然提供的文档中没有示例。文档确实在一行中指出 Guards and the service providers they require must be provided at the module-level. 所以我在提供程序（以及它使用的服务）下添加了我的 app.module.ts 因为它将在整个应用程序中使用并且现在可以使用。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';   
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module'; 
import { AuthModule } from './auth/auth.module';
import { CoreModule } from './core/core.module';
import { DashboardModule } from './dashboard/dashboard.module'; 
import { AuthGuard } from './core/auth.guard';
import { AuthService } from './core/auth.service'; // <-- also had to add  
import { PageNotFoundComponent } from './core/page-not-found/page-not-found.component';

// TODO: trim down imports and spread them into features like FormsModule and HttpModule
@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  imports: [
    // Angular modules
    BrowserModule,
    FormsModule,
    HttpModule,
    // Custom modules
    CoreModule,
    AuthModule,
    DashboardModule,
    AppRoutingModule
  ],
  providers: [AuthGuard, AuthService], // <-- added here
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular Route Guard 在提供时抛出 ZoneAwareError

Angular Route Guard Throws ZoneAwareError when Provided

angular2-routing

angular