Angular 9和Ivy运行时错误：无法读取未定义的属性'id'；Zone

Question

我们有一个带有测试的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$1 (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$1 (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)

- Shane

---

你得到任何答案了吗？ - HD..

看起来类似于这个问题：https://github.com/angular/angular/issues/31314 - nclarx

Answer 1

我尝试运行构建ng build --prod以为我的Angular应用程序进行生产环境打包。它明确地显示了我存在的问题。你可以尝试运行它来确定需要解决的问题。

- Anton Skybun

---

非常好！！！运行构建时显示错误是angular-cc-library信用卡包...谢谢！！！ - born2net

谢谢。我尝试运行 ng build --prod，发现问题出在 ngx-currency-mask 包上，它与 Ivy 不兼容。我只是移除了这个包。 - Joel Rodrigues

这个完美地解决了问题。有一个旧模块我已经不再使用，但仍然在我的某个模块中提到它。ng serve甚至没有提到错误！但是这个却发现了。 - Andrew Howard

我在运行 ng serve 后看到了错误。我运行了 ng serve --prod 并没有看到它。再次运行 ng serve 就可以正常工作了。生产模式是否会清除/重建某些缓存？ - adamdport

没门... ng build --prod 编译得很好。 - Davide

Answer 2

我最终成功找出了错误。我不得不在app.component.ts、app.module.ts和shared.module.ts中注释掉所有导入的模块，并一次添加一个模块。最后，我将其缩小到包含angular2-recaptcha。这个模块包含了一个名为ReCaptchaModule的模块。我正在研究如何升级或替换它。

希望这对其他人的故障排除有所帮助。

- Shane

---

我们最终完成了升级到Angular 9的工作，但是在我们能够更新/升级依赖项之前，我们关闭了Ivy。 - Shane

是的，在一些应用程序中，这是个很大的工作！ - nclarx

Answer 3

尝试在"angularCompilerOptions"下的ts.config中添加"enableIvy": true，然后运行ng serve，它会给出更精确的错误描述。

- Katzura

---

在我的情况下，启用Ivy是解决方案。使用Ivy编译后，出现了FlexLayout库错误，我更新了Flex Layout版本，然后错误就解决了。 - Gaalvarez

Answer 4

作为替代方案

我最终成功追踪到了错误。我不得不在app.component.ts、app.module.ts和shared.module.ts中注释掉所有导入的模块，并逐个添加每个模块。最终，我将其缩小到了包括angular2-recaptcha。那里包括了一个名为ReCaptchaModule的模块。我正在研究如何升级或替换它。

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

你可以执行'ng build'，在我的情况下，它显示我的版本的"angular2-multiselect-dropdown"与Ivy不兼容。为我升级该软件包解决了问题。因此，这是一种相当简单的方法来发现某些不兼容性。

- Erik Almeida

---

对我来说，启用Ivy后，ng build和ng build --prod都成功了，但是当我执行ng serve时失败了。无法找到根本原因。 - Ganesh

Answer 5

看起来是模块编译的问题。尝试清除你的node_modules并运行：

ngcc --properties main

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

- nclarx

---

是的，我通过运行命令 npm ci 清除了我的 node_modules。 - Shane

Answer 6

对我来说，我检查了我使用的包是否与Angular9兼容。一旦我删除了不兼容的包，一切都正常了。

注意：我也碰巧使用了angular2-recaptcha，它与Angular9不兼容。

- maxisam

Answer 7

在我升级到11.3.1之后，今天在我的Mac上发生了这件事。

我删除了node_modules文件夹，当我运行npm i时，它抱怨没有Xcode或CLT版本。

为了解决这个问题，我运行了

sudo xcode-select --reset

请参考本文以获取更多相关信息。

- Mukus

Answer 8

对我来说，ng build --prod 报了2000多行的错误。其中大部分甚至来自于 Angular 内置功能，例如找不到日期管道。通过以下步骤解决：

• 运行 "npx ngcc" 编译第三方组件到 ivy。
• 在浏览器中添加一个调试点，以查找下面图片中抛出错误的位置
• 这让我找到了有问题的插件（在我的情况下是 ngx-slick），但是这在日志中根本没有记录
• 只需将此有问题的插件更新到最新版本，就可以解决问题了！

- Zonaib

Answer 9

对于任何遇到相同问题的人。

我的解决方案是在angular.json的build.options中添加以下内容：

 "preserveSymlinks": true

- sdev95

---

可能是 angular.json 文件的问题。无论如何，它对我来说都不起作用。 - Davide