Angular项目v11升级v14后启动报找不到@angular/core模块错误

问题现象 #

• 项目原有Angular v11版本可正常运行，升级到v14后服务无法正常启动
• 每次启动服务时抛出如下编译错误：

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot resolve type entity i0.ApplicationModule to symbol
    at /home/olaneat/Desktop/files/project/angular/jobConnect/node_modules/@ngtools/webpack/src/ivy/loader.js:81:18
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot resolve type entity i0.ApplicationModule to symbol
    at /home/olaneat/Desktop/files/project/angular/jobConnect/node_modules/@ngtools/webpack/src/ivy/loader.js:81:18
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

Error: node_modules/@angular/animations/browser/index.d.ts:12:21 - error TS2307: Cannot find module '@angular/core' or its corresponding type declarations.

12 import * as i0 from '@angular/core';

已尝试操作 #

已经尝试过清理缓存、删除node_modules文件夹，依次执行以下命令后问题仍然存在：

npm i 
ng update
npm i @angular/core

修复方案 #

这个报错是跨大版本升级时Angular官方依赖版本错位、Ivy编译元数据解析失败导致的，按以下步骤操作即可解决：

• 先彻底清理本地残留的依赖和缓存，避免旧版本文件干扰编译：

rm -rf node_modules package-lock.json
npm cache clean --force

• 不要零散单独升级单个@angular包，Angular所有官方核心包必须保持完全一致的版本号，版本错位就会触发这类解析错误。执行以下命令把所有核心Angular包对齐到v14正式版本：

ng update @angular/core@14 @angular/cli@14 @angular/animations@14 @angular/common@14 @angular/compiler@14 @angular/forms@14 @angular/platform-browser@14 @angular/platform-browser-dynamic@14 @angular/router@14 --force

• 升级完成后检查根目录下的tsconfig.json文件，确认Angular编译配置开启了Ivy（v14默认开启，跨版本升级经常会丢失该配置）：

{
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

• 重新安装依赖后启动服务即可：

npm install
ng serve

注意：跨3个大版本（v11到v14）升级时，不要直接执行不带版本参数的ng update，这种方式很容易拉取到版本不匹配的依赖，只要所有@angular前缀的官方包版本完全对齐，这类类型实体解析失败的编译错误就会消失。

内容的提问来源于stack exchange，提问作者Tosin Ayoola