NoProviderError mit CanActivate in Angular 2

Question

Ich benutze Angular 2 mit Router 3.0.0-aplha.8.

Ich versuche mit der CanActivate-Funktion zu überprüfen, ob ein Benutzer authentifiziert ist. Ich habe einen AuthGuard, der CanActivate implementiert, für den Moment gebe ich nur wahr zurück.

route.ts

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

import { AuthGuard } from './auth-guard' 

import { SecurityComponent } from './security/security.component'; 
import { AdminDashboardComponent } from './admin/admin.dashboard.component'; 


export const mainRoutes: RouterConfig = [ 
{ path: '', component: SecurityComponent, }, 
{ path: 'admin', component: AdminDashboardComponent, terminal: true, canActivate: [AuthGuard] }] 

export const MAIN_ROUTER_PROVIDER = provideRouter(mainRoutes); 

Auth-guard.ts

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

@Injectable() 
export class AuthGuard implements CanActivate { 
    constructor(private router: Router) {} 

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

Wenn ich versuche, "/ admin" (AdminDashboardComponent) zuzugreifen, erhalte ich diese Fehlermeldung:

Ich habe keine Ahnung was passiert. Jemand hat eine Idee?

Dank Iván

Answer 1

Ich denke, wenn man MAIN_ROUTER_PROVIDER zu

export const MAIN_ROUTER_PROVIDER = [provideRouter(mainRoutes), AuthGuard]; 

es funktionieren sollte geändert werden.

Answer 2

Sie müssen auch die Wachen Bootstrap, damit sie richtig eingesetzt werden:

export const AUTH_PROVIDERS = [AuthGuard]; 

und dann

export const MAIN_ROUTER_PROVIDER = [ 
    provideRouter(mainRoutes), 
    AUTH_PROVIDERS, 
]; 

weitere Informationen hier https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

Answer 3

Sie müssen AuthGuard Bootstrap auch . Aktualisieren Sie Ihre Route Anbieter wie unten

export const MAIN_ROUTER_PROVIDER = [provideRouter(mainRoutes), AuthGuard]

und stellen Sie die Bootstrap-Funktion enthalten diese Liste bootstrap(appcomp,MAIN_ROUTER_PROVIDER)