So, we have quite a big app and we started working on optimizations.... one of the optimizations were lazy loading some parts....
so we have Demo pages with whole load of example usage that we DON'T want anywhere but on out DEV environment...
so lazy loading that part was quite easy...
in our app-routing module we have
const routes: Routes = [
...
{path: 'design', canActivate: ['DevOnlyGuard'], loadChildren: 'app/pages/demo/demo.module#DemoPagesModule'},
...
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
So without canActivate route all works fine and demo routes are loaded lazily...
now, if I add this canActivate in my guard, that looks like this
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivateChild } from '@angular/router';
import { environment } from 'environments/environment';
@Injectable()
export class DevOnlyGuard implements CanActivate, CanActivateChild {
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return (environment.envName === 'dev');
}
canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return this.canActivate(route, state);
}
}
I am getting this error once I hit the demo route:
ERROR Error: Uncaught (in promise): Error: StaticInjectorError[DevOnlyGuard]:
StaticInjectorError[DevOnlyGuard]: NullInjectorError: No provider for DevOnlyGuard! Error: StaticInjectorError[DevOnlyGuard]: ....
even if I added the Guard to the list of providers in my app.module like
providers: [
...
DevOnlyGuard,
];
Any ideas?
remove single quotes from canActivate: ['DevOnlyGuard']
Below is how should we use canActivate:
Method 1:
@Injectable()
class CanActivateTeam implements CanActivate {
constructor(private permissions: Permissions, private currentUser: UserToken) {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean>|Promise<boolean>|boolean {
return this.permissions.canActivate(this.currentUser, route.params.id);
}
}
@NgModule({
imports: [
RouterModule.forRoot([
{
path: 'team/:id',
component: TeamCmp,
canActivate: [CanActivateTeam]
}
])
],
providers: [CanActivateTeam, UserToken, Permissions]
})
class AppModule {}
Method 2(with Single Quote...):
@NgModule({
imports: [
RouterModule.forRoot([
{
path: 'team/:id',
component: TeamCmp,
canActivate: ['canActivateTeam']
}
])
],
providers: [
{
provide: 'canActivateTeam',
useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => true
}
]
})
class AppModule {}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments