web-dev-qa-db-fra.com

Dans la version angulaire 7, le chargement paresseux ne fonctionne pas

J'ai mis à jour ma version angulaire 6 en version angulaire 7. Maintenant, je reçois une erreur lorsque j'essaie de naviguer vers ' http: // localhost: 4200/pages '. Je suis utiliser le concept de route de chargement paresseux dans mon application. 

Erreur:- 

core.js: 12584 ERREUR Erreur: Non capturé (promis): Erreur: Impossible de trouver le module './Pages/Test/Test.module' Erreur: Impossible de trouver le module './Pages/Test/Test.module' at $ _lazy_route_resource Objet d'espace de noms paresseux: 5 sur ZoneDelegate.Push ../modules_noeud/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js: 388) sur Object.onInvoke (core.js: 14143) sur ZoneDelegate.Push ../modules_noeud/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js: 387) sur Zone.Push ../modules_noeud/zone.js/dist/zone.js.Zone.run (zone.js: 138) à zone.js: 872 sur ZoneDelegate.Push ../modules_noeud/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js: 421) sur Object.onInvokeTask (core.js: 14134) sur ZoneDelegate.Push ../modules_noeud/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js: 420) sur Zone.Push ../modules_noeud/zone.js/dist/zone.js.Zone.runTask (zone.js: 188) at $ _lazy_route_resource Objet d'espace de noms paresseux: 5 sur ZoneDelegate.Push ../modules_noeud/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js: 388) sur Object.onInvoke (core.js: 14143) sur ZoneDelegate.Push ../modules_noeud/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js: 387) sur Zone.Push ../modules_noeud/zone.js/dist/zone.js.Zone.run (zone.js: 138)

app-routage.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes} from '@angular/router';

export const AppRoutes : Routes = [
 {
  path : '',
  redirectTo: 'test',
  pathMatch: 'full',
 }
 {
  path: 'test',
  loadChildren: './Pages/test/test.module#TestModule'
 }      
]

Dis-moi, comment résoudre cette erreur.

webpackangular-routingangular-routerangular7
5
Harleen Kaur Arora

Après avoir essayé de nombreuses modifications, j'ai constaté que mon application.routing.ts devrait ressembler à ceci: - 

import { TestModule } from './Pages/test/test.module';

 export const AppRoutes : Routes = [
 {
  path : '',
  redirectTo: 'test',
  pathMatch: 'full',
 }
 {
  path: 'test',
  loadChildren: () =>  TestModule
 }      
]

Après les changements, cela fonctionne parfaitement pour moi.

6
Harleen Kaur Arora

J'utilise https://stackoverflow.com/a/53128336/5360463 Mais j'obtiens cette erreur en mode prod

Envisagez de modifier l'expression de la fonction en une fonction exportée.

et je change le code à cette

import { TestModule } from './Pages/test/test.module';

export function getTestModule() {
  return TestModule;
}

 export const AppRoutes : Routes = [
 {
  path : '',
  redirectTo: 'test',
  pathMatch: 'full',
 },
 {
  path: 'test',
  loadChildren: getTestModule
 }      
]
0
behroozbc