Angular 9 和 Ivy 的运行时错误:无法读取未定义的 属性 'id';区

Runtime error with Angular 9 and Ivy: Cannot read property 'id' of undefined ; Zone

我们有一个带有测试的 Angular 8 项目。我们正在尝试升级到 Angular 9 并完成了 https://update.angular.io/#8.0:9.0l3 中的所有步骤。这一切都很顺利,没有任何问题。该应用程序编译没有错误,所有测试 运行 都很好。我们在 运行 时收到此错误。当我们关闭 Ivy 时,它 运行 很好所以看起来肯定与 Ivy 相关。

zone-evergreen.js:659 Unhandled Promise rejection: Cannot read property 'id' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'id' of undefined
at registerNgModuleType (core.js:35467)
at core.js:35485
at Array.forEach (<anonymous>)
at registerNgModuleType (core.js:35481)
at core.js:35485
at Array.forEach (<anonymous>)
at registerNgModuleType (core.js:35481)
at new NgModuleFactory (core.js:35649)
at compileNgModuleFactory__POST_R3__ (core.js:41403)
at PlatformRef.bootstrapModule (core.js:41768) TypeError: Cannot read property 'id' of undefined
at registerNgModuleType (http://localhost:8080/vendor.js:41436:27)
at http://localhost:8080/vendor.js:41454:14
at Array.forEach (<anonymous>)
at registerNgModuleType (http://localhost:8080/vendor.js:41450:17)
at http://localhost:8080/vendor.js:41454:14
at Array.forEach (<anonymous>)
at registerNgModuleType (http://localhost:8080/vendor.js:41450:17)
at new NgModuleFactory (http://localhost:8080/vendor.js:41602:13)
at compileNgModuleFactory__POST_R3__ (http://localhost:8080/vendor.js:46530:27)
at PlatformRef.bootstrapModule (http://localhost:8080/vendor.js:46859:16)

我终于找到了错误。我不得不注释掉 app.component.tsapp.module.tsshared.module.ts 中的所有导入模块,并一次将每个模块添加回来。我最终将范围缩小到包含 angular2-recaptcha。那包括一个名为 ReCaptchaModule 的模块。我目前正在研究如何升级或更换它。

希望这对其他人来说是一个很好的故障排除提示。

看起来像是模块编译的问题。尝试清除 node_modules 和 运行:

ngcc --properties main

根据此评论:https://github.com/angular/angular/issues/31314#issuecomment-562373301

我尝试 运行 为我的 Angular 应用构建 ng build --prod。它清楚地告诉我什么问题,我 have.You 可以尝试知道你需要修复什么。

替代

I was finally able to track down the error. I had to comment out all the imported modules in app.component.ts, app.module.ts and shared.module.ts and add each module back one at a time. I finally narrowed it down to the include of angular2-recaptcha. That was including a module called ReCaptchaModule. I'm currently researching how to upgrade or replace that.

Hopefully this is a good troubleshooting tip to others out there.

你可以 'ng build',在我的例子中,它表明我的 "angular2-multiselect-dropdown" 版本与 Ivy 不兼容。升级那个包对我有用。因此,这是发现某些不兼容性的一种非常简单的方法。

对于我来说,我检查了我使用的包是否与Angular9兼容。删除不兼容的软件包后,一切正常。

注意:我正好也用了angular2-recaptcha,它与Angular9不兼容。

致所有阅读本文并遇到相同问题的人。

我的解决方案是将此添加到 angular.json build.options:


 "preserveSymlinks": true

对我来说,ng build --prod 抛出了大约 2000 多行错误。其中大部分甚至来自 angular 内置功能,例如找不到日期管道。通过执行以下操作解决:

  • 运行 "npx ngcc" 将第三方组件编译成 ivy。
  • 在下图中抛出错误的浏览器中添加了一个调试点
  • 这让我找到了有问题的插件(在我的例子中是 ngx-slick),但这在日志中无处可寻
  • 刚刚将这个有问题的插件更新到最新版本,瞧!

尝试在 "angularCompilerOptions" 和 运行 ng serve 下的 ts.config 中添加 "enableIvy": true,这会给您更准确的错误描述。

今天更新到 11.3.1 后,我的 Mac 发生了这种情况。

我删除了 node_modules 文件夹,当我 运行 npm i 它抱怨 No Xcode or CLT version.

解决我运行

sudo xcode-select --reset

有关这方面的更多信息,请参阅 this article