Angular 9 - NGCC 失败并出现未处理的异常答案

【问题标题】：Angular 9 - NGCC fails with an unhandled exceptionAngular 9 - NGCC 失败并出现未处理的异常
【发布时间】：2020-07-28 01:16:30
【问题描述】：

在将依赖项升级到 Angular 9（并执行必要的代码更改）后构建应用程序会引发错误：

编译 @angular/animations : es2015 as esm2015 编译 @angular/animations：es2015 作为 esm2015 编译 @angular/core： es2015 作为 esm2015 编译 @angular/core : es2015 作为 esm2015
编译 @angular/core：es2015 为 esm2015
错误：worker #5 出错：TypeError：无法读取属性“fileName”为空

然后继续抛出以下错误：

编译@angular/core : es2015 as esm2015 正在编译 @angular/compiler/testing : es2015 作为 esm2015 编译 @angular/core : es2015 as esm2015
错误: 试图用 ngcc 返回 node_modules/@angular/core/core.d.ts.__ivy_ngcc_bak up 文件，但它已经存在，所以不写，也不备份， node_modules/@angular/core/core.d.ts.

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

编译 @angular/core : es2015 as esm2015 一个未处理的异常发生：NGCC 失败。

【问题讨论】：

标签： angular typescript ivy angular-compiler

【解决方案1】：

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

重要的是要注意开发和生产机器运行良好。

为了解决这个问题，我们采取了以下步骤：

在 tsconfig.json 中，在 angularCompilerOptions 中设置了 ("enableIvy": false)
将nodeJS更新到最新版本：（执行node -v返回v14.3.0）
已删除node_modules文件夹：（执行"rm .\node_modules\" [在windows上]，确保已删除成功）
已安装软件包：（执行 npm i ）
这里项目已准备好构建。它现在可以毫无错误地构建和运行。

我希望这可以帮助你和其他人在这种情况下。

【讨论】：

重新安装 node_modules 为我做到了
设置"enableIvy":false 对我有用
在向 ng9 应用程序添加新的 npm 模块后，我遇到了问题。删除 node_modules 有效！
将enableIvy 设置为 false 会在项目构建后导致更大的捆绑包如何成为解决方案？
"enableIvy":false 成功了以前我没有这个错误，直到使用自定义 webpack 构建器。

【解决方案2】：

在我的特殊情况下，@angular-devkit/build-angular 在运行 后在我的 package.json 中更新为npm 审计修复。（这个版本好像属于angular 10，而不是本地项目的angular版本（v9.1.7））

还原此更改后，一切都重新开始工作：

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

【讨论】：

我遇到了完全相同的问题。
伟大的灵魂。无需使用“enableIvy”：false
我也遇到了同样的问题。这解决了它。谢谢
我设置了 "@angular-devkit/build-angular": "~0.901.6" 并再次安装 npm。现在工作正常。谢谢
降级 @angular-devkit/build-angular 对我有用。 "@angular-devkit/build-angular": "^0.901.6"

【解决方案3】：

使用终端/cmd，

第一步：

ng update @angular/cli @angular/core

第二步：

ng update

第三步：

ng serve

固定我的。

注意您在 bootstrap 文件夹中的自定义 css 文件可能会被删除。之前备份，更新后放回去！

【讨论】：

为我工作。节省了我的时间，谢谢
为什么正确的答案是更改 ng 版本？这个决定不应该轻易做出。
好吧，奇怪的是，将 Angular 升级到最新的稳定版本修复了给出该错误的扩展。谢谢。就我而言，将主要 Angular 版本从 11 升级到 12 不是问题。

【解决方案4】：

尝试删除node_modules 文件夹并再次运行安装：

rm -rf node_modules

npm install

对我来说它已经解决了问题。

【讨论】：

您不必删除整个node_modules，node_modules/@angular 文件夹就足够了。但是，无论如何，不要忘记npm i。

【解决方案5】：

这个问题是因为您可能在任何端口上运行您的应用程序，并且 Angular ngcc 被分配了一个特定的进程 ID，该进程 ID 被指定并锁定在一个名为 __ngcc_lock_file__ 内 \node_modules\@angular\compiler-cli\ngcc。如果您正在执行硬系统关闭或操作系统崩溃，则此锁定文件将存在于 node_modules 中。一旦您打开机器并尝试再次启动应用程序，angular cli 将检查此锁定文件并尝试查找文件中指定的进程 ID。大多数情况下，由于您重新启动了完整的机器，因此该进程 ID 会丢失，并且会抛出此错误。

解决方案 1。删除 node_modules 并执行 npm install

解决方案 2。智能解决方案 - 删除锁定文件如下。

Go to `\node_modules\@angular\compiler-cli\ngcc`

找到名为__ngcc_lock_file__的文件将其删除。完成。

黑客愉快

【讨论】：

【解决方案6】：

在 package.json 中添加 "postinstall": "ngcc" 到 "scripts" 帮助我解决了这个问题

【讨论】：

为我工作，IMO 的最佳解决方案。

【解决方案7】：

在我的例子中，添加 enableIvy: false 并没有解决问题，这与 vsCode 的 Angular 语言服务扩展有关（看起来它实际上并没有考虑到参数）。

解决方案是降级扩展版本。 (v12.0.0 --> v11.2.14 see here to know how)

【讨论】：

我目前坚持使用 Node JS 12，这是唯一对我有用的解决方案。此外，它还具有不禁用 Ivy 的优点。谢谢。

【解决方案8】：

在 tsconfig.json 中设置 "enableIvy": false 确实修复了该特定错误。常春藤不是应该已经可以用了吗？

我在enter link description here@clement911 的答案中找到了这个答案，经过大量测试后它对我有用

【讨论】：

【解决方案9】：

使用node -v 检查您的 node.js 版本。并检查 Angular 9 是否与它兼容。将 node.js 更新到最新的 LTS 版本（12.8.1）对我有用。我用 nvm（节点版本管理器）做到了这一点。找到了一个很好的指令here。

【讨论】：

【解决方案10】：

我从 package.json 中删除了 tslib.js
已删除 package-lock.json
已删除 node_modules 文件夹
npm i
ng serve

为我工作

【讨论】：

感谢@abhi。为我工作，但再次创建了 package-lock.json 文件。
运行 npm i 时会发生这种情况

【解决方案11】：

好吧，就我而言，我试图用新版本的 node.js 运行旧版本的 Angular 项目。我这样做了：

删除所有现有的结节模块。

rm -rf node_modules

将节点 js 更新为最新的

npm update
npm install

将 Angular 项目版本更新为最新版本

ng update @angular/core

将项目 cli 更新到最新版本

ng update @angular/cli

现在开始项目

ng-serve

【讨论】：

我会非常犹豫删除node_modules，至少将其重命名为 bkup，直到您发现您解决了所有问题。 mv node_modules ~/node_modules.bkup

【解决方案12】：

万一版本不匹配.. 检查第一个版本 node js 和 angular js

然后写：npm install => ：ng服务

如果有端口问题：ng server --port 4201

【讨论】：

【解决方案13】：

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

"angularCompilerOptions": {
    "enableIvy": false
}

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

【讨论】：

【解决方案14】：

我得到了这个和其他错误，因为我试图更新 Angular 9 应用程序的一些边缘库。随后在编译过程中出现的错误是毫无意义的，因为它们无助于纠正错误。

删除“node_modules”和“npm i”的解决方案不起作用，因为即使我有原始的package.json，“npm i”仍然安装不同版本的库 - 而不是原始库。最初 node_modules 中的库究竟是什么尚不清楚。

唯一有帮助的解决方案是从备份中恢复 node_modules。

否则，如果您需要更新应用程序中的库，请假并准备一些抗抑郁药，但在升级库后解决无意义的错误可能仍然无济于事。

【讨论】：

【解决方案15】：

不存在禁用 IVY 是最佳解决方案的情况。

Windows 用户：

npm i rimraf -g
rimraf node_modules
npm i

【讨论】：

【解决方案16】：

这个聚会有点晚了，但是对于旧的 Angular 版本，我设法通过 VS 扩展解决了这个问题。

Angular CLI：6.1.5 节点：8.11.4

Visual studio, angular extension

Agnular view engine

扩展 -> Angular 语言服务(v12.0.2) -> 扩展设置

在 Workspace 下，勾选“User Legacy View Engine language service”。

【讨论】：

【解决方案17】：

尝试删除 angular-font-awesome 并再次运行安装：

npm 卸载 angular-font-awesome ng 添加@fortawesome/angular-fontawesome@0.6.0

在我删除 fontawesome 后问题就解决了，现在 Material Icons 是我的图标选择。但我应该感谢 Font Awesome 多年来提供的免费真棒图标 :)

【讨论】：

【解决方案18】：

我也遇到过类似的问题，

在我的情况下，将 NodeJS 更新到新版本有帮助。

【讨论】：

【解决方案19】：

我通常建议人们在每次成功部署（本地）后手动备份项目，因为当您遇到此类问题（与NGCC errors相关的所有内容）时，您可以硬删除node_modules文件夹并恢复它来自你last backup。然后重新构建。

有时，当您无法将nodeJS 更新到最新版本时，此解决方案将是完美的。

【讨论】：

【解决方案20】：

在我的情况下，我从 npm 安装了 angular-font-awesome 包，然后引导，它可能会发生冲突，我只是删除了以前安装的 angular-font-awesome 然后完成ng build

【讨论】：

【解决方案21】：

我在运行 ionic build 时遇到了这个问题，而我的同事们的项目构建得很好。所以我们运行ng -v 来比较我们的包。原来我有更高版本的@angular-devkit/build-angular、@angular-devkit/build-optimizer 和@angular-devkit/build-webpack ，每个版本都是 0.1001.2 - 我们的项目使用 0.901.8 运行。

所以我运行npm uninstall @angular-devkit/build-angular 0.1001.2 卸载它，运行npm install @angular-devkit/build-angular 0.901.8 降级。再次运行ng -v 时，另外两个也降级了。

最后，ionic build 成功了！此后我们过着幸福的生活，直到遇到不同的问题。Working packages for our project

【讨论】：

【解决方案22】：

"prettier": "2.2.1"，删除它，因为它与语义有干扰。

【讨论】：

【解决方案23】：

对我来说，原来我们使用 package-lock.json 声明的包版本控制有一段时间了，当我由于合并冲突而尝试删除它并重新创建它时，发生了错误。当回到旧的 package-lock.json 时，问题就消失了。于是我开始搜索：

比较两者之间的变化
检查生产中是否也出现问题 - 那么它几乎不可能是开发依赖项
整理出不太可能和可能的依赖关系

我最终得到了 Angular 依赖项，更准确地说是在 @angular/material-moment-adapter 收到了更新（因为我们在 package.json 中允许它）从版本 11.2.0 到 11.2.12。

【讨论】：

【解决方案24】：

就我而言，问题在于我的服务器没有足够的 RAM (1 GB)，这似乎不足以处理构建。增加到2GB后，问题就解决了。

希望这可以帮助任何人。

【讨论】：

【解决方案25】：

适用于使用 vscode 1.62 或更高版本的用户。这些答案都没有帮助我。我昨天（2021 年 10 月 11 日）更新了 vscode，由于某种原因，我的 Angular 9 项目开始显示“NGCC 失败”。我将 vscode 降级到 1.61.2，一切恢复正常。

【讨论】：

【解决方案26】：

用下面的json内容替换tsconfig.json

{
  "compileOnSave": false,
  
  "compilerOptions": {
     "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

【讨论】：

想解释一下吗？
肯定 "target": "es2015" 是启用正确编译
嗨！这个答案被同行否决的原因是它根本没有足够的帮助。哪些部分有助于解决 OP 询问的未处理异常？解释你的答案背后的原因是给出一个好的答案的关键部分。