webentwicklung-frage-antwort-db.com.de

Angular: Fehler: Nicht erfasst (im Versprechen) bei webpackAsyncContext (eval. Um ./src/$$_lazy_route_resource

Ich aktualisiere von Angular 4.0.0 auf Angular 5.2.6

ich stehe vor einigen problemen, um das faule modul laden zum funktionieren zu bringen.

mit angle 4.0.0 funktioniert es gut, aber jetzt mit 5.2.6 bekomme ich einen solchen Fehler, wenn ich auf meine Weiterleitungsschaltfläche klicke:

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)

meine Routing-Datei sieht folgendermaßen aus:  

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

Vorschläge ??

javascriptangularlazy-loadingangular-routingangular-router
26
firasKoubaa

Lösung 1

Die Reihenfolge der Importe ist wichtig, also import lazy loaded module oben und router module der letzte Ort. Da wir faul laden, muss dieses faul geladene Modul vorhanden sein, bevor wir Routing durchführen.

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

    AppRoutingModule
  ],

Lösung 2

Normalerweise importiert Angular CLI die module in app-module, wenn sie generiert wurde. Stellen Sie daher sicher, dass das lazy-loaded-Modul nicht in app-module importiert wurde. hier

8
Ram Chandra Neupane

Importieren Sie Ihr Lazy-Load-Modul nicht in Ihrer app.module.ts. Dies verursacht eine zirkuläre Abhängigkeit und wirft den Fehler aus, den Sie erhalten.

35
jetset

Ich habe die Reihenfolge der Importe in meinem app.module.ts geändert, wie erwähnt hier

Sie müssen es zum Beispiel so haben:

imports: [
  BrowserModule,
  FormsModule,
  HeroesModule,
  AppRoutingModule
]

Das Wichtigste ist, zuerst BrowserModule und am Ende AppRoutingModule zu haben.

13
Mieszczańczyk S.

Ich habe das gleiche Problem. Dies könnte ein Fehler mit dem Winkelkli sein. Ich bin immer noch nicht sicher, ob der Fehler im CLI oder in unserem Code liegt! Wie von Gerrit erwähnt, ist es noch möglich mit aot zu kompilieren: ng serve --aot

Ich habe das Problem auch gelöst, indem ich mein angle-cli von 1.7.2 auf 1.6.8 heruntergestuft habe. Dies ist die letzte CLI-Version, die in unserem Fall zu funktionieren scheint.

11
Alex Tea

Wie in https://github.com/angular/angular-cli/issues/9488#issuecomment-368871510 erwähnt, scheint es mit ng serve --aot zu funktionieren.

10
Gerrit

ng service --aot Während es Ihren Code kompiliert, ist dies keine Lösung, es ist nur eine Verschleierung. Wenn Sie festgestellt haben, dass es sich nicht um die CLI-Version handelt, probieren Sie die folgende Lösung.

Was Sie tun müssen, ist sicherzustellen, dass Sie in Ihrem app.module.ts nicht Ihr Lazy-Loading-Modul laden.

Zum Beispiel:

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

Stellen Sie sicher, dass YourFeatureMOdule über die routesie geladen wird: 

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

Hoffe das hilft

4
Nosniw

Stand vor dem gleichen Problem. Der Neustart des Winkelservers ng-serve hat für mich funktioniert.

3
User0706

ich habe dieses Problem durch ein Upgrade von mt angle-cli in den devDependenices (package.json) von 1.2.0 auf 1.6.7 behoben.

3
firasKoubaa

Ich hatte genau das gleiche Problem, aber der Neustart des Knotenservers (ng s) hat den Trick für mich getan.

Als Faustregel gilt: Wenn Winkel sich ungewöhnlich verhält, versuchen Sie zunächst, Ihren Knotenserver neu zu starten

2
unkreativ

verwenden Sie stattdessen ng serv --aot. In der Regel ist das Angular-CLI das faul geladene Angular-Modul zu AppModule hinzugefügt, als es generiert wurde.

0
user10793582