Angular: Erreur: Uncaught (promis) à webpackAsyncContext (eval à ./src/$$_lazy_route_resource

Question

Je passe de Angular 4.0.0 à Angular 5.2.6

Je suis confronté à un problème de chargement de module paresseux.

avec 4.0.0 angulaire , cela fonctionne bien, mais maintenant, avec 5.2.6 , je reçois une telle erreur en cliquant sur mon bouton de redirection:

 core.js:1448 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:27), <anonymous>:13:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:27), <anonymous>:13:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at resolvePromise (zone.js:809)
    at resolvePromise (zone.js:775)
    at eval (zone.js:858)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4740)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1517)
 

mon fichier de routage ressemble à ceci:

 const homeRoutes: Routes = [
  {
    path: 'home', component: HomeComponent,
    children: [
        ....
      {
        path: 'admin',
        loadChildren: 'app/home/admin/admin.module#AdminModule',
        canActivate: [AuthGuardAdmin]
      },
    ]
  },
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(homeRoutes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})
export class HomeRoutingModule { }
 

suggestions ??

Answer 1

N'importez pas votre module chargé paresseux dans votre app.module.ts principal. Cela provoquera une dépendance circulaire et rejettera l’erreur que vous recevez.

Answer 2

J'ai changé l'ordre des importations dans mes app.module.ts comme mentionné ici

Vous devez donc l'avoir par exemple comme ceci:

 imports: [
  BrowserModule,
  FormsModule,
  HeroesModule,
  AppRoutingModule
]
 

Le plus important est d’avoir First BrowserModule et à la fin AppRoutingModule .

Answer 3

Solution 1

Les importations de l'ordre a de l'importance, de sorte import lazy loaded module en haut et en router module à la dernière place. Parce que nous faisons le chargement paresseux, paresseux-module chargé doit exister avant que nous ne le routage.

imports: [
    BrowserModule,       
    HeroModule, // Lazy-loaded module

    AppRoutingModule
  ],

Solution 2

Habituellement Angular CLI d'importation de l' module de app-module quand il a été généré. donc, assurez - lazy-loaded module n'a pas été importé en app-module

Answer 4

Je rencontre le même problème. Cela pourrait être un bug avec le angular-cli. Je ne suis toujours pas sûr que le bogue soit dans la CLI ou dans notre code! Comme mentionné par Gerrit, il est encore possible de compiler avec aot: ng serve --aot

J'ai également résolu le problème en rétrogradant mon angular-cli de 1.7.2 à 1.6.8 , qui est la dernière version de CLI qui semble fonctionner dans notre cas.

Answer 5

Comme mentionné dans https://github.com/angular/angular-cli/issues/9488#issuecomment-368871510, il semble fonctionner avec ng serve --aot