Angular5迁移至6后改代码重载出现TypeError: Cannot read property 'call' of undefined

我之前帮团队做Angular版本迁移时遇到过完全一样的问题，当时也是改完代码触发页面重载就炸出这个错误：

core.js:1598 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined 
TypeError: Cannot read property 'call' of undefined 
at __webpack_require__ (bootstrap:81) 
at Object../src/app/secure/dashboard/member-index/member-index.module.ngfactory.js (member-index.component.ts:33) 
at __webpack_require__ (bootstrap:81) 
at $_lazy_route_resource lazy namespace object:56 
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) 
at Object.onInvoke (core.js:4062) 
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387) 
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138) 
at zone.js:872 
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) 
at __webpack_require__ (bootstrap:81) 
at Object../src/app/secure/dashboard/member-index/member-index.module.ngfactory.js (member-index.component.ts:33) 
at __webpack_require__ (bootstrap:81) 
at $_lazy_route_resource lazy namespace object:56 
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) 
at Object.onInvoke (core.js:4062) 
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387) 
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138) 
at zone.js:872 
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) 
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:4053) 
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)

问题根源 #

这个错误的核心原因是**ng serve --aol（Ahead-of-Time预编译）模式和Angular 6的热重载机制不兼容**。

--aol参数会强制开发环境使用AOT编译，而Angular 6的热重载逻辑在处理AOT生成的ngfactory文件时，会和懒加载模块的动态加载逻辑产生冲突——当你修改代码后，热重载尝试重新编译并加载更新后的模块，但webpack的模块加载器找不到正确的调用入口，就会抛出Cannot read property 'call' of undefined的异常。

解决办法 #

1. 改用默认的ng serve启动开发服务器
   你已经发现这么做后异常消失，这是最直接的解决方案。默认的ng serve使用JIT（即时编译）模式，这种模式下热重载的兼容性更好，完全适配开发过程中频繁修改代码的场景。

2. 如果必须在开发环境用AOT

   • 把Angular CLI升级到6.x系列的最新小版本：Angular团队在6.x的后续更新中修复了不少AOT和热重载相关的bug，升级后大概率能解决问题。
   • 检查懒加载模块的配置：确保路由中loadChildren的语法符合Angular 6的要求（推荐使用import()动态导入语法，代替旧版的字符串路径写法），比如：

     // Angular 6 推荐写法
     { path: 'member', loadChildren: () => import('./member-index/member-index.module').then(m => m.MemberIndexModule) }
     

内容的提问来源于stack exchange，提问作者Dmitry Grinko