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?

score 12 · Answer 1 · answered Oct 13 '16 at 20:51

12

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.

answered Oct 13 '16 at 20:51

larssin

372
4
5

1

My problem was that the name of the class guard has wrapped with simple quote, like: ```providers: ['AuthGuard']``` – ruzenhack Apr 13 '17 at 21:14
1

Thanks, I added it to my sub modules and the problem is solved. – Nammen8 Sep 27 '17 at 10:06

score 3 · Answer 2 · answered Jul 28 '16 at 19:39

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
])

score 2 · Answer 3 · edited Jun 18 '18 at 14:09

2

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

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

edited Jun 18 '18 at 14:09

pushkin

9,575
15
51
95

answered Jun 18 '18 at 13:59

Abhilash

457
5
9

Getting "No provider error" when using CanActivate guard

3 Answers3