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

它会抛出这样的错误。

我也尝试了像'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)

Answer 1

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

Answer 2

在运行ng serve时重新编译后会引发此错误，此后始终显示。 重启服务-解决了此问题。

重要！

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

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

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

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

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

Answer 3

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

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

我的项目配置供参考

Answer 4

两种语法

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

和

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

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

在JIT编译器（ng serve）中使用字符串文字时，您可能仍然会遇到抛出'TypeError'的问题，而在AOT（ng serve --aot）中可以很好地工作。错误“ TypeError：未定义不是函数” 极具误导性。有关更多问题，请参见对有关同一问题的Github问题的引用。

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

解决方案：

此错误实际上是由于模块注入的循环依赖性引起的，这可能是在您可能会遇到的许多文章中提到的将延迟加载的目标模块导入父模块时出现的。当您想在其他地方使用延迟加载的模块的导出的组件/服务时，可以无意或有意地执行此操作。

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

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

Answer 5

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

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

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

Answer 6

我也遇到了同样的问题，就像这样解决了它：-

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

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

Answer 7

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

尝试一下。这是解决问题的方法

angular6功能模块延迟加载抛出错误TypeError：undefined不是函数

7 个答案: