angular - angular6 功能模块延迟加载抛出错误 TypeError: undefined is not a function

Question

我有这段代码app-routing.module.ts，根据角度的新文档，我通过了该方法仍然无法正常工作，抛出一些我无法理解的错误。

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

它会抛出这样的错误。

我也尝试过像这样的 loadchildren 的旧方法'app/admin/admin.module#AdminModule'。但它仍然无法正常工作。

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)

score 45 · Accepted Answer

我遇到了同样的问题，原因是我在我的应用程序模块中导入了延迟加载的模块。

score 8 · Accepted Answer

当 ng serve 运行时，重新编译后会触发此错误，之后它总是显示。 重新启动 ng serve - 解决了这个问题。

重要的！

使用 loadChildren 作为函数 -不是延迟加载：

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

因为你需要在路由模块中导入惰性模块。

对于延迟加载，您必须将路径发送到延迟模块 - 作为String！

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

score 8 · Accepted Answer

我在使用 Angular-7 和 Angular CLI: 7.1.3 时也遇到了同样的问题，并试图找到一些解决方案。通过从 app.module 文件中删除延迟加载模块的导入语句为我解决了这个问题。

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

我的项目配置供参考

score 2 · Accepted Answer

两种语法

{path: 'admin', loadChildren:() => AdminModule } //(Dynamic import using lambda expression)

和

{path: 'admin', loadChildren:'app/admin/admin.module#AdminModule'} // (Dynamic import using string literal)

理想情况下，Angular 8+ 应该使用AOT编译器和JIT编译器来延迟加载功能模块。但是，延迟加载模块的字符串文字方式在 angular-cli 版本 6 和 7（JIT 和 AOT 编译器）中效果最好。

在使用带有 JIT 编译器 (ng serve) 的字符串文字时，您可能仍然会被抛出的“TypeError”所困扰，而它与 AOT(ng serve --aot) 一起工作得很好。错误“TypeError: undefined is not a function”非常具有误导性。有关更多详细信息，请参阅针对同一问题提出的 Github 问题的参考。

https://github.com/angular/angular-cli/issues/10582

解决方案：

这个错误实际上是由于模块注入的循环依赖引起的，当您在父模块中导入延迟加载预期模块时会出现这种情况，正如您可能遇到的许多文章中提到的那样。当您想在别处使用延迟加载模块的导出组件/服务时，您可能会无意或有意这样做。

解决此问题的最佳方法是明确区分共享组件并构建共享组件模块并重用它们，即将延迟加载模块的导出组件/服务移动到共享/公共模块。

希望我的回答对你有所帮助。

score 1 · Accepted Answer

我遇到了同样的问题解决了它： -

运行 => ng 服务 --aot
从根模块的导入中删除了模块，因为我已经在loadChildren部分的路由中使用了模块。

通过使用这两种方式，我能够运行应用程序。因此，您可以尝试其中任何一种。

score 1 · Accepted Answer

我们不需要将 AdminModule 导入 app.module

从 app.module 和 app-routing.module 文件中删除它，它会正常工作。

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

score -6 · Accepted Answer

-6

{path: 'admin', loadChildren:() => AdminModule }

尝试这个。这是问题的解决方案

于 2018-07-09T09:56:23.647 回答

angular - angular6 功能模块延迟加载抛出错误 TypeError: undefined is not a function

7 回答 7

Related

Reference