web-dev-qa-db-fra.com

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

Je passe de Angular 4.0.0 à Angular 5.2.6

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

avec angular 4.0.0 , 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 ??

javascriptangularlazy-loadingangular-routingangular-router
26
firasKoubaa

Solution 1

L'ordre des importations importe donc import lazy loaded module en haut et router module à la dernière place. Comme nous effectuons un chargement paresseux, ce module chargé paresseux doit exister avant le routage.

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

    AppRoutingModule
  ],

Solution 2

Généralement, Angular CLI importera la module dans app-module lorsqu’elle aura été générée. alors assurez-vous que lazy-loaded module n'a pas été importé dans app-module comme mentionné ici

8
Ram Chandra Neupane

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.

35
jetset

J'ai changé l'ordre des importations dans mon 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 d'abord BrowserModule et à la fin AppRoutingModule.

13
Mieszczańczyk S.

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 toujours 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 CLI qui semble fonctionner dans notre cas.

11
Alex Tea

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

10
Gerrit

ng service --aot pendant qu'il compile votre code, n'est pas une solution, c'est juste une dissimulation . Si vous avez déterminé qu'il ne s'agissait pas de la version CLI, essayez la solution ci-dessous.

Ce que vous devez faire, c'est vous assurer que dans votre app.module.ts vous ne chargez pas votre module chargé paresseux.

Par exemple:

app.module.ts
 imports: [
   ...
   AppRouterModule,
   FormsModule,
   YourFeatureModule, <--- remove this
   ...
 ]

Assurez-vous que YourFeatureMOdule est en cours de chargement via la routesie: 

app-routing.module.ts
 loadChildren: '../app/feature.module#YourFeatureModule'

J'espère que cela t'aides

4
Nosniw

A été confronté au même problème. Le redémarrage du serveur angulaire ng-serve a fonctionné pour moi.

3
User0706

j'ai résolu ce problème en mettant à jour mt angular-cli localement dans devDependenices (package.json) de 1.2.0 à 1.6.7

3
firasKoubaa

J'ai eu exactement le même problème, mais le simple redémarrage du serveur de nœuds (ng s) a fait l'affaire pour moi.

En règle générale: si angular commence à se comporter de manière étrange, essayez d’abord de redémarrer votre serveur de nœuds.

2
unkreativ

utilisez ng serve --aot à la place. C'est généralement la CLI angulaire qui a ajouté le module angulaire chargé paresseux à AppModule lors de sa génération.

0
user10793582