Angular 9 - NGCC在处理时出现未处理的异常

Question

将依赖项升级到Angular 9并进行必要的代码更改后构建应用程序会导致错误：

编译@angular/animations：es2015作为esm2015编译 @angular/animations：es2015作为esm2015编译 @angular/core：es2015作为esm2015编译 @angular/core：es2015作为esm2015编译 @angular/core：es2015作为esm2015编译 错误：Worker＃5上的错误：TypeError：无法读取null的'fileName'属性

然后它继续抛出以下错误：

编译@angular/core：es2015作为esm2015编译 @angular/compiler/testing：es2015作为esm2015编译 @angular/core：es2015作为esm2015编译 错误：尝试使用ngcc备份文件将node_modules/@angular/core/core.d.ts.__ivy_ngcc_bak写入，但已经存在，因此不会写入或备份node_modules/@angular/core/core.d.ts。

这个错误可能是因为两个或多个入口点重叠，ngcc被要求处理某些文件多次。您应该检查此包中的其他入口点，并设置一个配置以忽略您未使用的任何条目点。

编译@angular/core：es2015作为esm2015编译 发生未处理的异常：NGCC失败。

- kay-1234

Answer 1

我和我的同事开发者在本地机器上遇到了这个问题（NGCC失败）。

需要强调的是，开发和生产机器正常运行。

为了解决这个问题，我们按照以下步骤进行：

1. 在文件 tsconfig.json 中，在 angularCompilerOptions 中设置（“ enableIvy ：false”）
2. 将Node.js升级到最新版本（执行 node -v 返回v14.3.0）
3. 删除 node_modules文件夹：（在Windows上执行 rm .\node_modules\ ，确保已成功删除）
4. 安装包（执行 npm i ）
5. 现在项目已准备好构建。它可以无错误地构建和运行。

- Florin Filip

---

重新安装 node_modules 就解决了我的问题。 - Ollie

对我来说，“设置” "enableIvy": false “解决了我的问题”。 - Musikero31

如果将enableIvy设置为false会导致项目构建后的包体积更大，那么如何能够通过这种方式解决问题呢？ - Muhammad bin Yusrat

"enableIvy":false 这个设置解决了问题。之前我没有遇到这个错误，直到使用了自定义的webpack构建器。 - Vladyslav Didenko

我成功地修复了此问题，而无需将ivy设置为false。 - Nechar Joshi

Answer 2

在我的情况中，在运行 npm audit fix 后，package.json 文件中的@angular-devkit/build-angular 版本被更新为 "^0.1001.2"。（这个版本似乎属于 Angular 10 而不是本地项目的 Angular 版本（v9.1.7））

将此更改还原后，一切又开始正常工作了：

"@angular-devkit/build-angular": "~0.901.6"

- Bas Que

---

我遇到了完全相同的问题。 - Michi-2142

很棒的解决方案。不需要使用“enableIvy”: false。 - Davide

我之前也遇到过完全相同的问题，这个方法解决了它。谢谢。 - Lukas R.

我设置了"@angular-devkit/build-angular": "~0.901.6"并重新安装了npm。现在正常工作了。谢谢。 - Albaz

降级 @angular-devkit/build-angular 对我有效。"@angular-devkit/build-angular": "^0.901.6" - Uditha Prasad

Answer 3

使用终端/命令行,

第一步：

ng update @angular/cli @angular/core

第二步：

ng update

第三步：

ng serve

它修复了我的问题。

注意

您在Bootstrap文件夹中的自定义CSS文件可能会被删除。在更新之前备份它们，并在更新后放回原处！

---

全球解决方案

使用上述解决方案，您需要在每个项目中执行“第一步”。如果您想要为所有特色项目全局升级 Angular CLI/Core 版本，请使用以下命令升级您的 Angular 版本：

npm i -g @angular/cli

然后运行上述的第二步和第三步。

- Reza Taba

---

对我有用。节省了我的时间，谢谢。 - Phani Kumar

为什么正确答案是更改ng版本？这个决定不应轻易做出。 - Omar

很奇怪的是，将Angular升级到最新的稳定版本后，扩展程序不再出现错误。谢谢。在我的情况下，将主要的Angular版本从11升级到12并没有问题。 - Paul-Sebastian Manole

Answer 4

这个问题可能是因为您在任何端口上运行应用程序，而Angular ngcc被分配了一个特定的进程ID，该ID在文件\node_modules\@angular\compiler-cli\ngcc中指定并锁定在一个名为__ngcc_lock_file__的文件中。

如果您进行了硬系统关闭或操作系统崩溃，则此锁定文件将位于node_modules文件夹文件夹中。一旦您重新启动计算机并尝试再次启动应用程序，Angular CLI将检查此锁定文件并尝试查找文件中指定的进程ID。由于您进行了完整的机器重启，大多数情况下该进程ID将丢失，并且会引发此错误。 解决方案1。删除node_modules文件夹并执行npm install 解决方案2。智能解决方案-按以下方式删除锁定文件。

转到\node_modules\@angular\compiler-cli\ngcc，找到名为__ngcc_lock_file__的文件，并将其删除。 完成。

- Jijo Cleetus

Answer 5

尝试删除 node_modules 文件夹，然后再次运行安装：

rm -rf node_modules

npm install

对我来说，它解决了问题。

- Jacek Koziol

---

你不必删除整个 node_modules 文件夹，只需删除 node_modules/@angular 文件夹即可。但是，无论如何，别忘了运行 npm i。 - Eugene P.

Answer 6

在package.json中的"scripts"中添加"postinstall": "ngcc"可以帮助我解决这个问题。

- Ekaterina Tokareva

---

对我来说没问题，我认为这是最佳解决方案。 - Verri

Answer 7

在我的情况下，添加enableIvy：false没有解决问题，问题出现在Visual Studio Code的Angular语言服务扩展中（看起来它实际上没有考虑该参数）。

解决方案是降级扩展版本。（v12.0.0 --> v11.2.14。请参见此处了解详情）。

- Patrick M.

---

我目前卡在 Node JS 12 上，这是唯一对我有效的解决方案。此外，它具有不禁用 Ivy 的优点。谢谢。 - Alexei - check Codidact

Answer 8

在tsconfig.json文件中设置"enableIvy": false可以修复这个特定的错误。Ivy应该已经可以使用了。

我在clement911对Error after updated to version 9 #36060的回答中找到了这个方法，在经过大量测试后，它对我有用。

- Meir

Answer 9

我必须进入我的tsconfig.spec.json文件并添加：

"angularCompilerOptions": {
    "enableIvy": false
}

这已经在我的tsconfig.json文件中了。

- Adrian Rosales

Answer 10

使用node -v命令检查您的Node.js版本，并检查Angular 9是否与其兼容。

将Node.js更新为最新的LTS版本（12.8.1）对我有用。我使用nvm（Node Version Manager）完成了这个过程。我在这里找到了良好的说明。

- Menno Haans