web-dev-qa-db-fra.com

erreur lors du chargement du module de fonctions angular6 TypeError: undefined n'est pas une fonction

J'ai ce code dans app-routing.module.ts, Selon la nouvelle documentation en angulaire, je suis passé par la méthode mais ça ne marche pas, en lançant des erreurs que je ne comprends pas.

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 { }

Il lance une erreur comme celle-ci.

J'ai aussi essayé l'ancienne méthode de charger des enfants comme celle-ci '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)
angularangular6
14
Abinash Mohapatra

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

16
yoerideschrijver

Cette erreur se déclenche après une recompilation lorsque ng serve est en cours d'exécution. Après cela, elle affiche toujours .Redémarrer ng serve - a résolu ce problème.

Important!

Utiliser loadChildren comme fonction - is Not lazy loading:

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

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

Pour le chargement paresseux, vous devez envoyer le chemin au module paresseux - sous la forme String!

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

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 l’instruction 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

0
sharad jain

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

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

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

0
Shashikant Pandit