web-dev-qa-db-fra.com

Angulaire (5) - chargement paresseux et garde canActivate - StaticInjectorError

Donc, nous avons une assez grosse application et nous avons commencé à travailler sur les optimisations .... l'une des optimisations était le chargement paresseux de certaines parties ....

nous avons donc des pages de démonstration avec une charge entière d'exemples d'utilisation que nous ne voulons PAS ailleurs que dans l'environnement DEV ...

donc le chargement paresseux de cette partie était assez facile ...

dans notre module de routage d'application, nous avons

const routes: Routes = [
    ...
    {path: 'design', canActivate: ['DevOnlyGuard'], loadChildren: 'app/pages/demo/demo.module#DemoPagesModule'},
    ...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Donc, sans canActivate route, tout fonctionne bien et les routes de démonstration sont chargées paresseusement ...

maintenant, si j'ajoute ce canActivate dans ma garde, cela ressemble à ceci

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

Je reçois cette erreur une fois que j'ai atteint l'itinéraire de démonstration:

ERREUR Erreur: non interceptée (en promesse): erreur: StaticInjectorError [DevOnlyGuard]:
StaticInjectorError [DevOnlyGuard]: NullInjectorError: Aucun fournisseur pour DevOnlyGuard! Erreur: StaticInjectorError [DevOnlyGuard]: ....

même si j'ai ajouté le Guard à la liste des fournisseurs dans mon module d'application comme

providers: [
    ...
    DevOnlyGuard,
];

Des idées?

angularlazy-loadingrouter
9
DS_web_developer

supprimer les guillemets simples de canActivate: ['DevOnlyGuard']

Voici comment utiliser canActivate:

Méthode 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 {}

Méthode 2 (avec guillemet simple ...):

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        canActivate: ['canActivateTeam']
      }
    ])
  ],
  providers: [
    {
      provide: 'canActivateTeam',
      useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => true
    }
  ]
})
class AppModule {}
5
Haifeng Zhang