"No hay proveedor para AuthGuard!"uso de canActivate en Angular 2

Tuve este mismo problema después de pasar por la sección de Guardias de ruta del tutorial de Enrutamiento y Autorización en el sitio web Angular https://angular.io/docs/ts/latest/guide/router.html , es la sección 5.

Estoy agregando AuthGuard a una de mis rutas principales y no a rutas secundarias como muestra el tutorial.

Lo arreglé al agregar AuthGuard a mi lista de proveedores en mi aplicación.módulo.ts archivo, por lo que el archivo ahora se ve así:

import { AppComponent } from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {AuthGuard} from './auth-gaurd.service';

import { AnotherPageComponent } from './another-page/another-page.component';
import { LoginPageComponent } from './login-page/login-page.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    JsonpModule,
    AppRoutingModule,
    HttpModule
  ],
  declarations: [
    AppComponent,
    LoginPageComponent,
    AnotherPageComponent
  ],
  providers: [AuthGuard],
  bootstrap: [AppComponent]
})

export class AppModule { }

He vuelto a través de la tutorial y en su aplicación.módulo.archivo ts, no agregan AuthGuard a los proveedores, no estoy seguro de por qué.

Además, no caigas en la trampa de usar un literal para la clase guard dentro de tu configuración de enrutamiento, solo porque algunos artículos de blog lo hacen:

{ path: 'whatever', component: WhatEverComponent, canActivate: ['WhatEverGuard'] }

No va a funcionar (No provider for...), en su lugar, use la clase directamente:

{ path: 'whatever', component: WhatEverComponent, canActivate: [WhatEverGuard] }

Otra sugerencia, cuando componentes de carga lenta, el guardia se aplica en la configuración de enrutamiento del componente padre, no en la configuración de enrutamiento del componente de carga lenta.

Para aquellos que todavía tienen este error, no olvide incluir su servicio o clase AuthGuard en la función principal de bootstrap. Y no olvide importar este servicio antes de que se ejecute bootstrap.

import { bootstrap } from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';
import { AuthGuard } from './shared/auth.service';

bootstrap(AppComponent, [
  appRouterProviders,
  AuthGuard
]);

El equipo de Angular 2 no mencionó esto en los documentos principales del enrutador, y me tomó un par de horas averiguarlo.

La respuesta está más abajo en el tutorial. Vea los listados de archivos en el tema "Agregar el LoginComponent" bajo el tema " Ruta sin componentes:..."section in "Milestone 5: Route Guards"(en inglés). Muestra AuthGuard y AuthService siendo importados y agregados a la matriz de proveedores en login-routing.módulo.ts, y luego ese módulo que se importa en la aplicación.módulo.ts.

Login-routing.módulo.ts

  ...
    import { AuthGuard }            from './auth-guard.service';
    import { AuthService }          from './auth.service';
    ...
    @NgModule({
    ...
      providers: [
        AuthGuard,
        AuthService
      ]
    })
    export class LoginRoutingModule {}

App.módulo.ts

import { LoginRoutingModule }      from './login-routing.module';

@NgModule({
  imports: [
    ...
    LoginRoutingModule,
    ...    
  ],
  ...
  providers: [
    DialogService
  ],
  ...

Me encontré con este problema cuando estaba siguiendo un tutorial. He intentado la mayor parte de la respuesta aquí, pero no conseguir ningún éxito. Entonces probé la manera tonta como poner el AuthGuard antes que los otros servicios en el proveedor y funciona.

// app.module.ts

 .. 
 providers: [
   AuthGuard,
   UserService,
   ProjectService
  ]

Ya que obtuvo la solución, ya que se debió a un problema de sintaxis. Solo quería compartir esta información.

Necesitamos proporcionar el AuthGaudSerivce como proveedor solo en ese módulo que corresponda a la ruta respectiva. No es necesario proporcionar en el módulo principal o el módulo raíz, ya que el módulo principal cargará automáticamente todo el módulo secundario dado.Esto ayuda a mantener el código modular y encapsulado.

Por ejemplo, supongamos que tenemos el siguiente escenario

1. we have module m1
2. we have route m1r in module m1
3. route m1r has 2 route r1 and r2
4. we want to protect r1 using authGaurd
5. finally we have main module that is dependent on sub module m1 

A continuación es sólo prototipo, no el código real para comprender el propósito

//m1.ts    
import {AuthGaurd} from './auth.gaurd.service'
import {m1r} from './m1r'
    @NgModule(
     imports: [m1r],
     providers: [AuthGaurd]
    )
    export class m1{
    }

//m1r.ts
import {AuthGaurd} from './auth.gaurd.service'
const authRoute = [
 {path: '/r1', component: 'authComponent', canActivate: [AuthGaurd]},
 {path: '/r2', component: 'other'}
]
export authRoute

//main.module.ts
import {m1} from ''
import {mainComponent} from ''
@NgModule({
  imports: [m1],
  bootstrap: [mainComponent]
  })
export class MainModule{}    

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

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (localStorage.getItem('currentUser')) {
            // logged in so return true
            return true;
        }

        // not logged in so redirect to login page with the return url
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
        return false;
    }
}

Importar tanto HttpModule como HttpClientModule me ayudó.

import { HttpClientModule } from '@angular/common/http'; 
import { HttpModule } from '@angular/http';

Puede intentar importar AuthGuard en el proveedor de ese módulo y luego importarlo en el componente de enrutamiento-enrutamiento.módulo.ts file also

@NgModule({
providers: [
    AuthGuard
  ],})