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.