CODEWITHSUNDEEP
angularangular-routingcanactivate
Gary
Gary

Reputation: 2339

Unable to use canDeActivate or canActivate in Angular

I am trying to use the canDeActivate and canActivate and I am using it as below with Angular 4. I am getting a no provider error for the same. What is wrong with the implementation or what is the right way to implement this cleanly and simply.

import {ModuleWithProviders, } from '@angular/core';

    import {Routes, RouterModule, RouterStateSnapshot, ActivatedRouteSnapshot, CanDeactivate} from '@angular/router';


    import {HomeComponent} from '../home/home.component';

    var x: any = true;

    const appRoutes: Routes = [
        {path: '', component: HomeComponent, canDeactivate: [true]},
        {path: 'test', component: HomeComponent, canDeactivate: [x]},

    ];

    export const appRoutingProviders: any[] = [];

    export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Update of the error:

ERROR Error: Uncaught (in promise): Error: No provider for true!
Error: No provider for true!
    at injectionError (reflective_errors.ts:71)
    at noProviderError (reflective_errors.ts:105)
    at ReflectiveInjector_._throwOrNull (reflective_injector.ts:500)
    at ReflectiveInjector_._getByKeyDefault (reflective_injector.ts:543)
    at ReflectiveInjector_._getByKey (reflective_injector.ts:404)
    at ReflectiveInjector_.get (reflective_injector.ts:349)
    at AppModuleInjector.NgModuleInjector.get (ng_module_factory.ts:141)
    at PreActivation.getToken (router.ts:1232)
    at MergeMapSubscriber.eval [as project] (router.ts:1191)
    at MergeMapSubscriber._tryNext (mergeMap.ts:125)
    at injectionError (reflective_errors.ts:71)
    at noProviderError (reflective_errors.ts:105)
    at ReflectiveInjector_._throwOrNull (reflective_injector.ts:500)
    at ReflectiveInjector_._getByKeyDefault (reflective_injector.ts:543)
    at ReflectiveInjector_._getByKey (reflective_injector.ts:404)
    at ReflectiveInjector_.get (reflective_injector.ts:349)
    at AppModuleInjector.NgModuleInjector.get (ng_module_factory.ts:141)
    at PreActivation.getToken (router.ts:1232)
    at MergeMapSubscriber.eval [as project] (router.ts:1191)
    at MergeMapSubscriber._tryNext (mergeMap.ts:125)
    at resolvePromise (zone.js:769)
    at resolvePromise (zone.js:740)
    at zone.js:817
    at ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (ng_zone.ts:253)
    at ZoneDelegate.invokeTask (zone.js:423)
    at Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:584)
    at HTMLAnchorElement.ZoneTask.invoke (zone.js:490)

Upvotes: 0

Views: 886

Answers (1)

Max Koretskyi
Max Koretskyi

Reputation: 105547

All guards take a token which refers to a function or a class reference. Here is the simple example for a function as a guard:

 // create a token
 const token = new InjectionToken('name');

 // register the provider by that token
 providers: [{provide: token, useValue: function() {} }]

 // use this token in a guard
 const appRoutes: Routes = [
     {path: '', component: HomeComponent, canDeactivate: [token]},
 ];

Often times you don't create a token explicitly, but it's created by the reference to the class when you use it like this:

@Injectable()
class CanActivateContacts {
    constructor() {}
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)

@NgModule({
    providers: [CanActivateContacts] <------ token is implicitly created here
})
class AppModule

const appRoutes: Routes = [
    {path: '', component: HomeComponent, canDeactivate: [CanActivateContacts]},
];

Upvotes: 1

Related Questions