angular6 feature module lazy loading throwing error TypeError: undefined is not a function
angular6 feature module lazy loading throwing error TypeError: undefined is not a function
我在 app-routing.module.ts 中有这段代码，
根据 angular 中的新文档，我完成了该方法，但它仍然无法正常工作，抛出一些我无法理解的错误。
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)
{path: 'admin', loadChildren:() => AdminModule }
试试这个。这是问题的解决方案
我遇到了同样的问题，原因是我在我的应用程序模块中导入了延迟加载模块。
当 ng serve 为 运行 时，重新编译后会触发此错误，此后，它始终显示。
重新启动 ng serve - 解决了这个问题。
重要！
将 loadChildren 用作函数 - 不是 延迟加载：
{path: 'admin', loadChildren:() => AdminModule } //not lazy loading
因为需要在路由模块中导入lazy模块
对于延迟加载，您必须将路径发送到延迟模块 - 作为 String!
{path: 'admin', loadChildren:'app/admin/admin.module#AdminModule'} // This is lazy loading
我遇到了同样的问题，解决方法如下：-
- 运行 => 服务 --aot
- 从根模块的导入中删除了模块，因为我已经在 loadChildren 部分的路由中使用了模块。
通过使用这两种方式，我能够 运行 应用程序。所以，你可以尝试其中任何一种。
我在使用 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";
我的项目配置供参考
我们不需要将 AdminModule 导入到 app.module
从 app.module 和 app-routing.module 文件中删除它，它将正常工作。
import { AdminModule } from "./admin/admin.module";
两种语法
{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
解法：
这个错误实际上是由于模块注入的循环依赖引起的，当你在你的父模块中导入延迟加载目标模块时会出现这种情况，你可能会在很多文章中提到遇到过。当您想在别处使用延迟加载模块的导出组件/服务时，您可能无意或有意地这样做了。
解决这个问题的最好方法是明确区分共享组件并构建共享组件模块并重新使用它们，即将延迟加载模块的导出组件/服务移动到共享/公共模块。
希望我的回答对您有所帮助。
我在 app-routing.module.ts 中有这段代码，
根据 angular 中的新文档，我完成了该方法，但它仍然无法正常工作，抛出一些我无法理解的错误。
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)
{path: 'admin', loadChildren:() => AdminModule }
试试这个。这是问题的解决方案
我遇到了同样的问题，原因是我在我的应用程序模块中导入了延迟加载模块。
当 ng serve 为 运行 时，重新编译后会触发此错误，此后，它始终显示。 重新启动 ng serve - 解决了这个问题。
重要！
将 loadChildren 用作函数 - 不是 延迟加载：
{path: 'admin', loadChildren:() => AdminModule } //not lazy loading
因为需要在路由模块中导入lazy模块
对于延迟加载，您必须将路径发送到延迟模块 - 作为 String!
{path: 'admin', loadChildren:'app/admin/admin.module#AdminModule'} // This is lazy loading
我遇到了同样的问题，解决方法如下：-
- 运行 => 服务 --aot
- 从根模块的导入中删除了模块，因为我已经在 loadChildren 部分的路由中使用了模块。
通过使用这两种方式，我能够 运行 应用程序。所以，你可以尝试其中任何一种。
我在使用 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";
我的项目配置供参考
我们不需要将 AdminModule 导入到 app.module
从 app.module 和 app-routing.module 文件中删除它，它将正常工作。
import { AdminModule } from "./admin/admin.module";
两种语法
{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
解法：
这个错误实际上是由于模块注入的循环依赖引起的，当你在你的父模块中导入延迟加载目标模块时会出现这种情况，你可能会在很多文章中提到遇到过。当您想在别处使用延迟加载模块的导出组件/服务时，您可能无意或有意地这样做了。
解决这个问题的最好方法是明确区分共享组件并构建共享组件模块并重新使用它们，即将延迟加载模块的导出组件/服务移动到共享/公共模块。
希望我的回答对您有所帮助。