Angular 9 - NGCC 因未处理的异常而失败

Question

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

编译@angular/animations: es2015 as esm2015 编译@angular/animations: es2015 as esm2015 编译@angular/core: es2015 as esm2015 编译@angular/core: es2015 as esm2015 编译@angular/core: es2015 as esm2015 Error : Error on worker #5: TypeError: 无法读取 null 的属性 'fileName'

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

编译@angular/core: es2015 as esm2015 编译@angular/compiler/testing: es2015 as esm2015 编译@angular/core: es2015 as esm2015错误：试图用一个写node_modules/@angular/core/core.d.ts.__ivy_ngcc_bak ngcc 备份文件，但它已经存在，所以不写入，也不备份，node_modules/@angular/core/core.d.ts。

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

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

Answer 1

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

重要的是要注意 dev 和 prod 机器运行良好。

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

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

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

Answer 2

在我的特殊情况下， @angular-devkit/build-angular在运行npm 审核后更新为“ ^0.1001.2 ” （这个版本好像属于angular 10，而不是本地项目的angular版本（v9.1.7））

恢复此更改后，一切都重新开始工作：

“@angular-devkit/build-angular”：“ ~0.901.6 ”

Answer 3

使用终端/cmd，

第一步：

ng update @angular/cli @angular/core

第二步：

ng update

第三步：

ng serve

固定我的。

注意引导文件夹中的自定义 css 文件可能会被删除。 之前备份它们并在更新后将它们放回去！

Answer 4

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

rm -rf node_modules

npm install

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

Answer 5

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

解决方案 1 。 删除node_modules并安装 npm

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

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

找到名为__ngcc_lock_file__的文件删除它。 完毕。

快乐的黑客

Answer 6

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

解决方案是降级扩展版本。 （v12.0.0 --> v11.2.14 看这里知道如何）

Answer 7

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

我在此处输入链接描述@clement911答案中找到了这个答案，经过大量测试后它对我有用

Answer 8

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

Answer 9

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

Answer 10

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

为我工作

Answer 11

好吧，在我的情况下，我试图用新版本的节点运行旧版本的 angular 项目。 我这样做了：

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

rm -rf node_modules

将节点 js 更新到最新

npm update
npm install

将 angular 项目版本更新到最新

ng update @angular/core

将项目 cli 更新到最新

ng update @angular/cli

现在开始项目

ng-serve

Answer 12

如果版本不匹配.. 检查第一个版本节点 js 和 angular js

然后写： npm install =>: ng serve

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

Answer 13

我必须将 go 放入我的 tsconfig.spec.json 文件并添加

"angularCompilerOptions": {
    "enableIvy": false
}

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

Answer 14

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

Angular CLI：6.1.5 节点：8.11.4

视觉工作室，angular 扩展

角度视图引擎

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

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

Answer 15

我有类似的问题，

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

Answer 16

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

有时，当您负担不起将nodeJS更新到最新版本时，此解决方案将是完美的。

Answer 17

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

Answer 18

我在运行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时，其他 2 个也已降级。

最后， ionic build成功了，我们从此过上了幸福的生活。 直到我们遇到不同的问题。 我们项目的工作包

Answer 19

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

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

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

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

Answer 20

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

对于 windows 用户：

npm i rimraf -g
rimraf node_modules
npm i

Answer 21

"prettier": "2.2.1"，删除它，因为它与语义相冲突。

Answer 22

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

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

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

Answer 23

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

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

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

Answer 24

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

希望这可以帮助任何人。

Answer 25

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

Answer 26

不幸的是，上面提供的答案都没有奏效。

降级typescript （在我的例子中是 4.8 到 4.6）解决了这个问题。

Answer 27

这只为我唤醒了 del node_modules npm install enableIvy:false was not support who uses angular v12 or above

Answer 28

将 tsconfig.json 替换为下面的 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
  }
}