2
votes

Angular comment créer des routes spécifiques uniquement en mode développement

Comment puis-je charger certaines routes uniquement en mode développement. Lorsque je construis avec le mode production activé, je souhaite que ces routes soient désactivées.

Quelqu'un a-t-il de bonnes recommandations sur la façon de réaliser cette fonctionnalité? Par exemple, masquez le composant route2 ci-dessous si vous êtes en mode développement.

    const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    canActivate: [AuthGuard],
    runGuardsAndResolvers: 'always',
    data: { allowedRoles: ['Role1','Role2'] },
    children: [
      {
        path: '',
        redirectTo: 'dashboard/main',
        pathMatch: 'full'
      },
      {
        path: 'route2',
        loadChildren: './theme/route2/route2.module#route2Module'
      }
    ]
   }

typescript angular angular6

2 commentaires

peut-être que vous pouvez ajouter un autre service à canActivate et désactiver l'itinéraire en fonction du mode

Ajoutez également AuthGuard pour le composant enfant. Le AuthGuard doit être activé en mode Dev.

3 Réponses :

3
votes

Puisque vous utilisez des modules différés , utilisez un guard (où vous pouvez vérifier l'environnement réel) à l'intérieur du canActivate .

0 commentaires

1
votes

Puisqu'il s'agit d'un tableau, vous pouvez définir le tableau en fonction de l'environnement dans votre fichier environment.ts.

const routes = [...production route set];
if (!environment.production) {
    routes.push(...dev route set);
}

Lors de l'importation, utilisez simplement le fichier environment.ts car le fileRepleacements dans angular.json gérera cela pour vous prêt à l'emploi.

...
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
...

Votre implémentation pourrait donc être similaire à:

//environment.ts
export const environment = {
  production: false
};

//environment.prod.ts
export const environment = {
  production: true
};

0 commentaires

4
votes

Selon le code de votre routeur angulaire:

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    canActivate: [AuthGuard],
    runGuardsAndResolvers: 'always',
    data: { allowedRoles: ['Role1','Role2'] },
    children: [
      {
        path: '',
        redirectTo: 'dashboard/main',
        pathMatch: 'full'
      },
      {
        path: 'route2',
        loadChildren: './theme/route2/route2.module#route2Module', // Don't want to load this module
        canLoad: [DevEnvGuard]
      }
    ]
   }


@Injectable()
class DevEnvGuard implements CanLoad {
  constructor() {}

  canLoad(route: Route, segments: UrlSegment[]): Observable<boolean>|Promise<boolean>|boolean {
    return !environment.prod; // if prod = false it will load module
  }
}

Vous essayez d'obtenir un chargement paresseux en utilisant un routeur et vous avez également activé le chargement de modules spécifiques uniquement pour l'environnement de développement (si ma compréhension est correcte). pour ce routeur angulaire fourni un Guard appelé CanLoad . CanLoad est venu jouer lorsque vous ne voulez pas charger des modules spécifiques sur la route pour des raisons de chargement paresseux. Si CanActivate est utilisé pour le Guarding au niveau des composants, mais dans ce cas, il charge le module dans le navigateur.

Modifiez donc le code de cette manière:

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    canActivate: [AuthGuard],
    runGuardsAndResolvers: 'always',
    data: { allowedRoles: ['Role1','Role2'] },
    children: [
      {
        path: '',
        redirectTo: 'dashboard/main',
        pathMatch: 'full'
      },
      {
        path: 'route2',
        loadChildren: './theme/route2/route2.module#route2Module'
      }
    ]
   }

Je pense que c'est l'approche. S'il me manque quelque chose, faites-le moi savoir dans les commentaires.

0 commentaires