3
votes

Angular 6: Convertissez le chargement impatient en chargement paresseux

J'ai une application angulaire complète qui utilise le chargement impatient. Je veux le convertir en chargement paresseux, mais comme j'ai une garde sur toutes mes routes et que toutes sont des sous-routes vers une route principale surveillée, je ne sais pas s'il est possible de le faire et de toujours le faire fonctionner comme avec un chargement impatient.

Voici mon tableau de routage dans app-routing.module:

// Routing array - set routes to each html page
const appRoutes: Routes = [
  { path: 'login/:id', canActivate: [AuthGuard], children: [] },
  { path: '', canActivateChild: [AuthGuard], children: [
    { path: '', redirectTo: '/courses', pathMatch: 'full' },
    { path: 'courses', component: CourseListComponent,  pathMatch: 'full'},
    { path: 'courses/:courseId', component: CourseDetailComponent, pathMatch: 'full' },
    { path: 'courses/:courseId/unit/:unitId', component: CoursePlayComponent,
      children: [
        { path: '', component: CourseListComponent },
        { path: 'lesson/:lessonId', component: CourseLessonComponent, data:{ type: 'lesson'} },
        { path: 'quiz/:quizId', component: CourseQuizComponent, data: {type: 'quiz'} }
      ]}
    ]},
  { path: 'welcome', component: LandingPageComponent, pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent, pathMatch: 'full' }];

Ce que je veux savoir, c'est s'il est possible de l'implémenter avec un chargement différé et si c'est le cas, j'aimerais connaître l'idée principale ou ce que j'ai besoin de savoir pour faire cela.

Dans tous les tutoriels que j'ai réalisés, je n'ai jamais rencontré ce genre de chose. Merci beaucoup


4 commentaires

Vous devez examiner la méthode de garde canLoad . Et puis, par exemple, si vous prévoyez de déplacer tous les cours en tant que module chargé paresseusement. Ensuite, créez un module de configuration de routage pour cours et ayez un garde séparé pour gérer ses chemins enfants


où dois-je mettre canLoad? sur le module de routage de l'application? ou dans le module de cours? Si vous pouvez expliquer un peu plus, je vous serais reconnaissant, je suis un peu nouveau dans ce chargement paresseux


Si tu sais où je peux trouver un exemple dont je peux tirer des leçons, je serais génial


J'ai essayé de convertir en chargement paresseux mais j'ai eu beaucoup d'erreurs quand j'ai construit ng. J'ai mis à jour la question et ajouté les erreurs et les modifications que j'ai apportées.


4 Réponses :


1
votes

Exemple de code d'une de mes applications:

const routes: Routes = [
  {
    path: '',
    component: PrivateComponent,
    canActivateChild: [AuthGuard],
    children: [
      {
        path: 'childOne',
        loadChildren: '../child-one/child-one.module#ChildOneModule',
        canLoad: [AuthGuard],
      },
      {
        path: 'childTwo',
        loadChildren: '../child-two/child-two.module#ChildTwoModule',
        canLoad: [AuthGuard],
      },
      {
        path: '',
        redirectTo: '/dashboard',
        pathMatch: 'full',
      },
    ],
  },
];

L'implémentation AuthGuard:

export class AuthGuard implements CanActivate, CanLoad {

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    return (some condition) ? true : false
  }

canLoad(route: Route): boolean {
   return (some condition based on route etc) ? true : false
 }

}

Les modules privés possèdent un fichier de routage qui en charge plus modules enfants:

const routes: Routes = [
  {
    path: 'login',
    component: SignupLoginMainContainerComponent,
    canActivate: [AuthGuard],
  },
  {
    path: 'error',
    component: ErrorComponent
  },
  {
    // lazy loading payment module
    path: 'payment',
    loadChildren: './modules/payment/payment.module#PaymentModule'
  },
  {
    // lazy loading private module
    path: '',
    loadChildren: './modules/private/private.module#PrivateModule',
    canLoad: [AuthGuard]
  },
  {path: '**', redirectTo: '/login'},
];

Un autre exemple peut être trouvé à: https://github.com/ashishgkwd/bot/tree/24-lazy-loading-modules . Le AdminModule est chargé tardivement dans celui-ci.


2 commentaires

J'ai essayé de convertir en chargement paresseux mais j'ai eu beaucoup d'erreurs quand j'ai construit ng. J'ai mis à jour la question et ajouté les erreurs et les modifications que j'ai apportées.


L'erreur ne pointe pas directement vers le problème et est difficile à déduire sans plus de code. Cependant, je vois que dans votre app-routing.module.ts le mappage pour {path: 'login /: id', canActivate: [AuthGuard], children: []}, < / code> n'a aucun composant ni enfant.



1
votes
        For lazy loading you should use:
   import {ComponentName} from 'component path';     
        const routes: Routes = [

      //for module 

            {
                path: 'path_Name',
                loadChildren: './modules/abc/abc.module#AbcModule'
            },

       //for component
            {
              path: 'browser',
            component: ComponentName
         },
    ];

2 commentaires

J'ai essayé de convertir en chargement paresseux mais j'ai eu beaucoup d'erreurs quand j'ai construit ng. J'ai mis à jour la question et ajouté les erreurs et les modifications que j'ai apportées.


Dans le chargement paresseux, vous définissez le module et chaque module a son propre module de routage.vous ne définissez que ce module principal dans le module d'application uniquement pas tous les enfants



3
votes

Merci à tous pour vos réponses. J'ai réussi à convertir mon routage en chargement différé avec succès. Voici le code:

app-routing.module

import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { Router, CanActivate, CanActivateChild, CanLoad, ActivatedRouteSnapshot, RouterStateSnapshot, NavigationExtras, Route } from '@angular/router';
import { AuthUserService } from './users/auth-user.service';
import { LocalStorage } from '@ngx-pwa/local-storage';

@Injectable()
export class AuthGuard implements CanActivate , CanActivateChild {

    constructor(private authUserService: AuthUserService, private router: Router) {   }

    canActivate(route: ActivatedRouteSnapshot, state:
       RouterStateSnapshot): boolean |
       Observable<boolean> | Promise<boolean> {
         let id, course_id;

         // save the id from route snapshot
         if (route.params) {
           id = +route.params.id;
           course_id = +route.params.courseId;
         }

         // if you try to logging with id
         if (id) {
           this.router.navigate(["/courses"]);
           return this.authUserService.login(id);
         }

         // if you're already logged in and navigate between pages
         if (this.authUserService.isLoggedIn()){
           if (course_id){
             // check if someone try to access a locked course
             if (this.authUserService.isCourseNotPartOfTheSubscription(course_id)){
               this.router.navigate(["/welcome"]);
               return false;
             }
             else
               return true;
           }
           else
             return true;
         }

         // if you are not logged and didn't try to log - redirect to landing page
         else {
           this.router.navigate(["/welcome"]);
           return false;
         }
        }

      canActivateChild(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): boolean |
      Observable<boolean> | Promise<boolean> {
         return this.canActivate(route, state);
       }

       canLoad(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): boolean |
       Observable<boolean> | Promise<boolean> {
         return this.canActivate(route, state);
       }
}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from "@angular/router";
import { AuthGuard } from '../auth.guard';

import { CourseListComponent } from './course-list/course-list.component';
import { CourseDetailComponent } from './course-detail/course-detail.component';
import { CoursePlayComponent } from './course-play/course-play.component';
import { CourseQuizComponent } from './course-play/course-quiz/course-quiz.component';
import { CourseLessonComponent } from './course-play/course-lesson/course-lesson.component';


const routes:Routes = [
  { path: '', component: CourseListComponent, canActivate: [AuthGuard] },
  { path: ':courseId', component: CourseDetailComponent, canActivate: [AuthGuard] },
  { path: ':courseId/unit/:unitId', component: CoursePlayComponent, canActivate: [AuthGuard], canActivateChild: [AuthGuard], children: [
    { path: 'lesson/:lessonId', component: CourseLessonComponent, data:{ type: 'lesson'} },
    { path: 'quiz/:quizId', component: CourseQuizComponent, data: {type: 'quiz'}}
  ]}
]

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

import { NgModule } from '@angular/core';
import { Routes, RouterModule, Router } from '@angular/router';
import { AuthGuard } from './auth.guard';

import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { LandingPageComponent } from './landing-page/landing-page.component';
import { HeaderComponent } from './header/header.component';
import { CourseModule } from './courses/course.module';


const routes:Routes = [
  { path: 'welcome', component: LandingPageComponent, pathMatch: 'full' },
  { path: 'login/:id', canActivate: [AuthGuard],  children: [] },
  { path: '', canActivateChild: [AuthGuard], children: [
    { path: '', redirectTo: 'courses', pathMatch: 'full' },
    { path: 'courses',  loadChildren: () => CourseModule }
  ]},
  { path: '**', component: PageNotFoundComponent, pathMatch: 'full' }
]

@NgModule({
  imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload', initialNavigation: 'enabled',
      paramsInheritanceStrategy: 'always' })],
  providers: [AuthGuard],
  exports: [RouterModule]
})


export class AppRoutingModule {  }


0 commentaires

1
votes

Avec le titre de la question générale " Convertir le chargement impatient en chargement paresseux ".

Je partage ma façon de convertir le chargement impatient en chargement paresseux avec 4 étapes pour qui concerne.

Étape 1: Créer un module par la commande ng g module ModuleName dans le dossier du composant

const routes: Routes = [
  //{ path: 'dashboard/analysis-status', component: AnalysisStatusComponent },
  { path: 'dashboard/analysis-status', loadChildren: './dashboard/analysis-status/analysis-status.module#AnalysisStatusModule' },
}

Étape 2: Ajouter une route pour le module comme

@NgModule({
   declarations: [
      AppComponent,
      NavBarComponent,
      LoginComponent,
      //AnalysisStatusComponent,
      PairsPipe,
      MainComponent
   ],


0 commentaires