angular6 feature module lazy loading throwing error TypeError: undefined n'est pas une fonction

Question

J'ai ce code en app-routing.module.ts , selon la nouvelle documentation en angulaire, je suis passé par la méthode mais cela ne fonctionne pas, jetant quelques erreurs que je ne peux pas comprendre.

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from "@angular/router";
import { HomeComponent } from "./home/home.component";
import { AdminModule } from "./admin/admin.module";

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule'
  },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
];

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

Cela lance une erreur comme celle-ci.

J'ai également essayé l'ancienne méthode de chargement des enfants comme ça 'app/admin/admin.module#AdminModule' . Mais ça ne marche toujours pas.

 core.js:1601 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
    at Array.map (<anonymous>)
    at webpackAsyncContext ($_lazy_route_resource lazy namespace object:18)
    at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile (core.js:5569)
    at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.load (core.js:5561)
    at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.loadModuleFactory (router.js:3294)
    at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.load (router.js:3282)
    at MergeMapSubscriber.project (router.js:1479)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:117)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:107)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93)
    at Array.map (<anonymous>)
    at webpackAsyncContext ($_lazy_route_resource lazy namespace object:18)
    at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile (core.js:5569)
    at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.load (core.js:5561)
    at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.loadModuleFactory (router.js:3294)
    at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.load (router.js:3282)
    at MergeMapSubscriber.project (router.js:1479)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:117)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:107)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4062)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)
 

Answer 1

J'ai eu le même problème, la raison pour moi était que j'importais le module chargé paresseux dans mon module d'application.

Answer 2

Cette erreur se déclenche après quelques recompilation lorsque ng servir est en cours d'exécution, et après cela, il se montre toujours. Le redémarrage de ng servir de résoudre ce problème.

Important!

À l'aide de loadChildren que la fonction n'est Pas paresseux chargement:

{path: 'admin', loadChildren:() => AdminModule } //not lazy loading

cause, vous devez importer le paresseux module dans le module de routage.

Pour le chargement Paresseux, vous devez envoyer le chemin du paresseux module en tant que Chaîne de caractères!

{path: 'admin', loadChildren:'app/admin/admin.module#AdminModule'} // This is lazy loading

Answer 3

J'ai également rencontré le même problème en utilisant Angular-7 et Angular CLI: 7.1.3 et j'ai essayé de trouver une solution. Il est résolu pour moi en supprimant la déclaration d'importation du module chargé paresseux du fichier app.module.

 // remove this from app.module and app-routing.module file and it will work fine
import { AdminModule } from "./admin/admin.module";
 

Ma configuration de projet pour référence

Answer 4

J'ai fait face au même problème résolu comme: -

1. run => ng serve --aot
2. Suppression du module lors de l'importation du module racine car j'utilisais déjà le module dans le routage dans la section loadChildren .

En utilisant les deux façons, j'ai pu exécuter l'application. Vous pouvez donc essayer n'importe lequel d'entre eux.

Answer 5

Nous n'avons pas eu besoin d'importer AdminModule dans app.module

Supprimez-le du fichier app.module et app-routing.module et cela fonctionnera correctement.

 import { AdminModule } from "./admin/admin.module";