Node 14升级至Node 18.20.4后Angular项目运行编译异常求助

一、修复PlatformNavigation JIT编译缺失错误 #

1. 对齐Angular与Node版本兼容性 #

Node 18.20.4要求Angular版本至少为14.2.x及以上，若当前Angular版本过低，先升级核心包：

ng update @angular/core @angular/cli --force

升级后检查package.json，确保所有@angular/*包版本一致。

2. 确保@angular/compiler安装并正确配置 #

• 先安装依赖：

  npm install @angular/compiler --save
  

• 若使用自定义Webpack配置，添加Angular JIT编译插件：

  module.exports = {
    // ...其他配置
    plugins: [
      new require('@angular-devkit/build-angular/src/webpack/plugins/ng-jit-webpack-plugin').NgJitWebpackPlugin(),
    ]
  };
  

• 或修改main.ts的引导逻辑，切换为JIT模式：

  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  // 手动导入编译器
  import '@angular/compiler';
  platformBrowserDynamic().bootstrapModule(AppModule);
  

3. 用Angular Linker处理第三方库 #

若项目依赖未完全AOT编译的第三方Angular库，在angular.json中启用Linker：

"architect": {
  "build": {
    "options": {
      "linker": {
        "enabled": true
      },
      "allowedCommonJsDependencies": ["你的第三方库名称"]
    }
  }
}

二、解决TS编译错误（TS2403、TS2339、TS2306等） #

1. 同步TypeScript与Angular版本 #

Angular各版本对应固定TS版本（如Angular 15对应TS 4.8.x，Angular 16对应TS 5.0.x），安装匹配版本：

npm install typescript@对应版本 --save-dev

2. 修正模块导入路径 #

检查所有TS2306错误文件，确认导入路径是否正确（如相对路径拼写、第三方库导入方式是否因版本变更改变）。

3. 安装缺失的类型定义 #

针对TS2339或TS2403错误，安装对应第三方库的类型包：

npm install @types/目标库名称 --save-dev

若为Node相关类型错误，执行：

npm install @types/node --save-dev

4. 清理缓存并重装依赖 #

# 删除依赖文件与锁文件
rm -rf node_modules package-lock.json
# Windows用户执行：
# rmdir /s /q node_modules && del package-lock.json

# 重装依赖
npm install

# 清理Angular缓存
ng cache clean

三、验证自定义Webpack配置 #

若使用webpack:dev命令，检查Webpack配置是否正确处理Angular TS编译：

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: '@ngtools/webpack',
        options: {
          tsConfigPath: './tsconfig.json'
        }
      }
    ]
  }
};

同时确认tsconfig.json的compilerOptions：target设为ES2020及以上，module设为ESNext，根据项目需求调整strict模式。

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