Angular: Angular5.x lazyLoad 问题，undefined 不是函数

创建于 2018-04-17  ·  20评论  ·  资料来源: angular/angular

当我将 Angular 版本从 4.x 更新到 5.x 时，告诉我错误：

 core.js:1449 错误错误：未捕获（承诺）：类型错误：未定义不是函数
类型错误：未定义不是函数
 在 Array.map ()
 在 webpackAsyncContext （评估在 ./src/$$_lazy_route_resource 延迟递归（main.bundle.js:formatted:17），:657:34)
 在 SystemJsNgModuleLoader.loadAndCompile (core.js:6570)
 在 SystemJsNgModuleLoader.load (core.js:6554)
 在 RouterConfigLoader.loadModuleFactory (router.js:4595)
 在 RouterConfigLoader.load (router.js:4575)
 在 MergeMapSubscriber.eval [作为项目] (router.js:2061)
 在 MergeMapSubscriber._tryNext (mergeMap.js:128)
 在 MergeMapSubscriber._next (mergeMap.js:118)
 在 MergeMapSubscriber.Subscriber.next (Subscriber.js:95)
 在 Array.map ()
 在 webpackAsyncContext （评估在 ./src/$$_lazy_route_resource 延迟递归（main.bundle.js:formatted:17），:657:34)
 在 SystemJsNgModuleLoader.loadAndCompile (core.js:6570)
 在 SystemJsNgModuleLoader.load (core.js:6554)
 在 RouterConfigLoader.loadModuleFactory (router.js:4595)
 在 RouterConfigLoader.load (router.js:4575)
 在 MergeMapSubscriber.eval [作为项目] (router.js:2061)
 在 MergeMapSubscriber._tryNext (mergeMap.js:128)
 在 MergeMapSubscriber._next (mergeMap.js:118)
 在 MergeMapSubscriber.Subscriber.next (Subscriber.js:95)
 在 resolvePromise (zone.js:814)
 在 resolvePromise (zone.js:771)
 在 eval (zone.js:873)
 在 ZoneDelegate.invokeTask (zone.js:421)
 在 Object.onInvokeTask (core.js:4751)
 在 ZoneDelegate.invokeTask (zone.js:420)
 在 Zone.runTask (zone.js:188)
 在drainMicroTaskQueue (zone.js:595)
 在

我的代码：

从“@angular/core”导入 {ModuleWithProviders}；
从“@angular/router”导入 {Routes, RouterModule}；
从'./rbac/rbac.service'导入{RbacService}；
 const 路由：路由 = [
 {
 小路： ''，
 重定向到：'/page/index/main',
 路径匹配：'完整'
 },
 {
 路径：'页面'，
 组件：MitLayoutComponent，
 canActivate: [RbacService],
 孩子们： [
 {路径：'索引'， 
 loadChildren: 'app/modules/index/index.module#IndexModule', 
 canActivate: [RbacService]}, 
 ];
 export const AppRoutes: ModuleWithProviders = RouterModule.forRoot(routes, {useHash: true});

角 CLI：1.7.4
节点：8.9.4
操作系统：win32 x64
角度：5.2.10
 ... 动画、通用、编译器、编译器-cli、核心、形式
 ... http、平台浏览器、平台浏览器动态、路由器

 @角度/cli：1.7.4
 @angular-devkit/build-optimizer: 0.3.2
 @angular-devkit/核心：0.4.9
 @angular-devkit/schematics: 0.3.2
 @ngtools/json-schema: 1.2.0
 @ngtools/webpack: 1.10.2
 @原理图/角度：0.3.2
 @schematics/package-update: 0.3.2
打字稿：2.4.2
网络包：3.11.0
picture liugang1988
👍11 👎3 🎉2

最有用的评论

对于像我一样通过 Google 发现此问题的其他人：我在尝试延迟加载模块时遇到了同样的问题，但没有其他答案有帮助。 我意识到我错误地将我的延迟加载模块导入了我的应用程序模块：

NgModule({
  ....
  imports: [
    .....
    MyCustomModule,    //<--- This needs to be removed if you lazy load!
    AppRoutingModule,
  ],
  bootstrap: [AppComponent],

})

希望它可以帮助某人....

picture ThomasEg 于 2018-09-19
👍353 🎉96 ❤93 😄38 🚀29 👀1

所有20条评论

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

splincode picture splincode 于 2018-04-17

重复的 angular/angular-cli#9825

jasonaden picture jasonaden 于 2018-04-17

我用 ng serve --aot 解决了我的问题

vspatil678 picture vspatil678 于 2018-09-04
👍20 ❤1

对于像我一样通过 Google 发现此问题的其他人：我在尝试延迟加载模块时遇到了同样的问题，但没有其他答案有帮助。 我意识到我错误地将我的延迟加载模块导入了我的应用程序模块：

NgModule({
  ....
  imports: [
    .....
    MyCustomModule,    //<--- This needs to be removed if you lazy load!
    AppRoutingModule,
  ],
  bootstrap: [AppComponent],

})

希望它可以帮助某人....

ThomasEg picture ThomasEg 于 2018-09-19
👍353 🎉96 ❤93 😄38 🚀29 👀1

@ThomasEg 非常感谢，这真的救了我的培根！ 似乎文档需要对此提出“提醒”，并且对此非常清楚。 伙计……花了这么多时间。

mrcleanandfresh picture mrcleanandfresh 于 2018-10-11
👍10

@ThomasEg解决方案对我来说非常完美，谢谢！

nico-val picture nico-val 于 2018-10-19

@ThomasEg你马上又为我节省了 3-4 个小时。 谢谢。

Abdullah8006 picture Abdullah8006 于 2018-10-26

@ThomasEg完美的解决方案。 非常感谢！

devfcr picture devfcr 于 2018-11-01

谢谢..我遇到了这个问题

Twechy picture Twechy 于 2018-11-13

谢谢

Herwt-liyj picture Herwt-liyj 于 2018-11-20

通常是 Angular CLI 在生成时将延迟加载的 Angular 模块添加到AppModule的imports选项中。

LayZeeDK picture LayZeeDK 于 2018-12-11

嗨，我已经解决了延迟加载的问题，它看起来工作正常，没有任何错误
对于每个懒加载的孩子，你添加一个虚拟守卫， canLoad 返回 true

{ path: 'pet-insurance', canLoad: [PetGuard], loadChildren: './_modules/Insurance/Pet-Insurance/pet-insurance.module#PetInsuranceModule'},

从“@angular/core”导入{可注射}；
从'@angular/router' 导入 { Router, CanLoad, Route };

@Injectable({
提供在：'根'
})
导出类 PetGuard 实现 CanLoad {

constructor(private router: Router) { }

// checks if we can load the route concerning LifeInsurance
canLoad(route: Route): boolean {
    return this.petInsurance(route.path);
}

petInsurance(url: string): boolean {
    return true;
}

}

从戈登卡明
[email protected]

DynamiteTom picture DynamiteTom 于 2019-01-13

对于像我一样通过 Google 发现此问题的其他人：我在尝试延迟加载模块时遇到了同样的问题，但没有其他答案有帮助。 我意识到我错误地将我的延迟加载模块导入了我的应用程序模块：

NgModule({
  ....
  imports: [
    .....
    MyCustomModule,    //<--- This needs to be removed if you lazy load!
    AppRoutingModule,
  ],
  bootstrap: [AppComponent],

})

希望它可以帮助某人....

谢谢！ 请注意，这也适用于子模块以及根模块。 根据经验，如果延迟加载模块，请不要将其包含在任何模块中。 如果您习惯于将子模块添加到父模块，或者过去没有使用过延迟加载模块，这可能是一个很难改掉的习惯！

AdonousTech picture AdonousTech 于 2019-01-20
👍5

@ThomasEg谢谢！！！

sheikhziadahmed picture sheikhziadahmed 于 2019-01-29

就我而言，它也适用于 ng serve --aot。 以下描述是关于不使用 --aot 标志：
我交叉检查以确保延迟加载的模块未导入到应用程序模块中。 我注意到的是，页面加载时直接使用延迟加载模块中声明的路径（没有在 app-routing 模块中声明的上下文）。 只有当我尝试放置完整路径时才会出现错误，当然这不是我需要的。

sijucm picture sijucm 于 2019-02-03

@ThomasEg太棒了！ 谢谢

elwyncrestha picture elwyncrestha 于 2019-04-08

@ThomasEg它有效。 谢谢！！！

RodrigoPauletti picture RodrigoPauletti 于 2019-04-08

@ThomasEg 非常感谢，你救了我的一天。

dlmvikas picture dlmvikas 于 2019-05-06

如果“app-fixed-topbar”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。
假设在我的模块中包含 CUSTOM_ELEMENTS_SCHEMA。错误已解决，但
app-fixed-topbar 它没有显示在我的页面中

gayathribindela picture gayathribindela 于 2019-05-08

由于不活动，此问题已自动锁定。
如果您遇到类似或相关的问题，请提交新问题。

阅读有关我们的自动对话锁定政策的更多信息。

_此操作已由机器人自动执行。_

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] 于 2019-09-15
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

vladimir-ivanov picture vladimir-ivanov  ·  3评论
igorzg picture igorzg  ·  3评论
nosachamos picture nosachamos  ·  3评论
deeleman picture deeleman  ·  3评论
Hongbo-Miao picture Hongbo-Miao  ·  3评论