背景
最近在使用 Angular 开发项目时，遇到了一个十分头痛的问题：ngcc failed to run。这个错误信息出现时，编译项目就会失败，导致无法进行开发和部署。经过一番查找和尝试，我们发现这是一个比较常见的问题，但是解决方案并不容易寻找。因此，本文将详细介绍这个错误的原因和可能的解决方法，以帮助更多的前端开发者应对这个问题。
原因
先来了解一下 ngcc 是什么。ngcc 全称为 Angular Ivy Compatibility Compiler，是 Angular 的一项功能，用于在构建应用程序时，将旧版代码转换为适用于 Angular Ivy 的代码。Ivy 是 Angular 的新一代渲染引擎，它能够显著提高性能并减小应用程序的体积。因此，Angular 的开发者们鼓励大家尽早将自己的应用迁移到 Ivy 上。
在构建应用程序时，ngcc 的作用是解析并转换应用中的所有 npm 包，以确保它们能够与 Ivy 兼容，并生成对应的 esm5 或 es2015 代码。然而，由于 ngcc 只是 Angular 的一项辅助功能，它本身也可能会出现各种错误，导致应用构建失败。一些与 ngcc 相关的常见问题包括：
npm 包库中缺少 typings 文件
npm 包库中存在语法错误
TypeScript 版本不兼容
内存不足
网络问题
等等。
在这些问题中，最常见的是缺少 typings 文件和 TypeScript 版本不兼容。缺少 typings 文件通常可以通过手动安装 TypeScript 类型依赖来解决。而 TypeScript 版本不兼容可能会导致 ngcc 调用失败，并输出 error: Cannot find module '@babel/core' 的信息。
解决方法
在解决 ngcc 出现问题时，我们可以考虑以下几个解决方法：
1.手动安装 TypeScript 类型依赖
在 package.json 文件中的 dependencies 栏目下添加 "@types/angular"、"@types/node"、"@types/core-js"、"@types/jasmine"。如果还是不行，可以尝试删除 “node_modules”、“package-lock.json”、“dist”目录重新安装依赖。
2.升级 TypeScript 版本
如果 ngcc failed to run 的错误信息中包含关于 TypeScript 版本的信息，并且报错信息提示当前应用程序所用的 TypeScript 版本不兼容，则需要升级 TypeScript 版本。可以打开 package.json 文件，将 devDependencies 中的 "@angular/compiler-cli" 升级到最新版本。
3.尝试禁用 Ivy
如果您的项目尚未使用 Ivy，可以尝试禁用它以解决 ngcc failed to run 的问题。具体做法是在项目的 tsconfig.json 文件中添加如下代码：
------------------------- -
------------ -----
-4.检查网络环境
在实际开发中，一些错误可能是由网络问题引起的。如果您的开发环境中存在网络问题，那么 ngcc 可能会因为无法访问远程 npm 库而出错。您可以尝试使用国内的 npm 镜像，或者检查您的网络防火墙设置。
示例代码
以下是一个典型的 ngcc failed to run 的错误信息样例：
----- - ---- ------ -- ----
---- ----- -----------------------------------------------------------------
------ ----------------------------------------- -------- - ---- -- -------------- --- ---- -- ---------- --- ---- ------- ---- ------------ ---------
-- ------------------ ------------------------------------------------------------------
-- -----------------------------------------------------------------------------------------------------------------在这个错误信息中，我们可以看到 @babel/core 需要 webpack 的某个版本，但是当前应用程序没有安装这个版本。如果您遇到了这个错误，可以尝试升级 webpack 的版本，或者降级 @babel/core 的版本。具体做法类似于升级 TypeScript 的操作，可以在 package.json 文件中修改对应的依赖项。
总结
在本文中，我们介绍了 Angular 应用程序中常见的一个错误 ngcc failed to run。这个错误通常与 ngcc 集成过程中的 npm 包依赖、TypeScript 版本、内存等问题有关。我们提供了一些可能的解决办法，并附带了示例代码。希望这篇文章能够帮助到遇到类似问题的前端开发者，使他们能够更快、更好地解决这个问题，继续写出高质量的 Angular 应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64feb0a895b1f8cacdd60537