Angular集成ThreeJS启动报错：Cannot find module '@angular/compiler-cli/linker'

错误原因 #

该报错核心是自定义webpack配置中的ts-loader规则覆盖了Angular默认的TypeScript编译逻辑：Angular Ivy编译器需要依赖@angular/compiler-cli/linker完成组件专属编译流程，直接使用ts-loader处理全量.ts文件会跳过Angular官方编译链路，导致依赖调用失败。

修复步骤 #

• 先确认版本匹配的依赖安装，执行命令：

  npm install @angular/compiler-cli --save-dev
  

  确保该依赖版本和项目中@angular/core版本完全一致，避免版本兼容问题。
• 修改webpack.config.js的ts处理规则，排除Angular官方需要接管的文件目录，不要全局覆盖ts编译逻辑：

  module: {
    rules: [
      { 
        test: /\.tsx?$/, 
        loader: "ts-loader",
        exclude: [/node_modules/, /src\/app.*\.ts$/] // 排除Angular业务组件目录，交给官方编译器处理
      },
      { test: /\.(glsl|vs|fs)$/, loader: "ts-shader-loader" }
    ]
  };
  

• 调整angular.json中自定义webpack的合并策略，避免自定义规则覆盖默认配置：

  "customWebpackConfig": {
    "path": "./webpack.config.js",
    "mergeRules": {
      "module.rules": "append" // 自定义规则追加到默认规则之后，不做替换
    }
  }
  

• 清除缓存重启服务，执行rm -rf node_modules/.cache后重新运行ng serve即可。

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