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 Réponses :
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.
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.
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 }, ];
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
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 { }
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 ],
Vous devez examiner la méthode de garde
canLoad
. Et puis, par exemple, si vous prévoyez de déplacer tous lescours
en tant que module chargé paresseusement. Ensuite, créez un module de configuration de routage pourcours
et ayez un garde séparé pour gérer ses chemins enfantsoù 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.