NoProviderError using CanActivate in Angular 2

Question

I'm using Angular 2 with Router 3.0.0-aplha.8.

I'm trying to use CanActivate function to check if an user is authenticated. I have an AuthGuard that implements CanActivate, for now I only return true.

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;
   }
}

When I try to access "/admin" (AdminDashboardComponent), I'm getting this error:

I have no idea what is happening. Someone has any idea?

Thanks Iván

score 5 · Accepted Answer · answered Jun 30 '16 at 16:59

5

I think if you change MAIN_ROUTER_PROVIDER to

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

it should work.

answered Jun 30 '16 at 16:59

Günter Zöchbauer

623,577
216
2,003
1,567

Thank you!! I was really stuck. What's the difference between your answer and the answer from @ed-morales. Could you tell me what is the best practice?? Thanks again! – IvanMoreno Jun 30 '16 at 17:09
He has one more level of abstraction otherwise its the same. – Günter Zöchbauer Jun 30 '16 at 17:11

score 2 · Answer 2 · edited Jun 30 '16 at 17:23

2

You need to bootstrap the guards too, so they can be used properly:

export const AUTH_PROVIDERS = [AuthGuard];

and then

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

more info here https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

edited Jun 30 '16 at 17:23

Günter Zöchbauer

623,577
216
2,003
1,567

answered Jun 30 '16 at 16:59

Ed Morales

1,027
5
9

score 1 · Answer 3 · answered Jun 30 '16 at 17:08

1

You need to bootstrap AuthGuard as well. Update your route provider as below

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

And adjust the bootstrap function to include this list bootstrap(appcomp,MAIN_ROUTER_PROVIDER)

answered Jun 30 '16 at 17:08

Arpit Agarwal

3,993
24
30

NoProviderError using CanActivate in Angular 2

3 Answers3

Linked