Getting “No provider error” when using CanActivate guard

Question

This is the guard:

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

Injectable()
export class MyGuard implements CanActivate {
  canActivate(next: ActivatedRouteSnapshot, prev: RouterStateSnapshot) {
    console.log('GUARD:', next, prev);
    return true;
  }
}

This is the router:

import { RouterConfig } from '@angular/router';
import { MyGuard } from './guards/my.guard';
export const AppRoutes : RouterConfig = [
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [MyGuard]
  }
];

When the page loads I get:

EXCEPTION: Error: Uncaught (in promise): No provider for MyGuard!

No tutorial I've seen mentions how to inject MyGuard as a provider. How do I do this?

Answer 1

My solution was to add the AuthGuard service to the providers in my AppModule metadata:

@NgModule({
    ...
    providers: [AuthGuard],
})
export class AppModule {}

To be able to use a service in the the whole app you need to provide it in the AppModule metadata. The "Service Providers" section on https://angular.io/docs/ts/latest/guide/ngmodule.html gave me the hint.

Answer 2

Your routes configuration should be like this:

export const APP_ROUTER_PROVIDERS = [
    MyGuard, <== notice this line
    provideRouter(AppRoutes )
];

and then

import { APP_ROUTER_PROVIDERS } from './app.routes';    
import { AppComponent } from './app.component';

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS
])

Answer 3

I have solved this problem by adding the 'MyGuard' in providers array

@NgModule({
  declarations: [
..........
],
providers: [MyGuard]
........