Webpacker 5.x 编译 Angular 13 应用找不到@angular相关模块如何解决？

该问题是Webpacker 5内置的Webpack 4版本与Angular 13的ESM包格式、模块解析规则不匹配导致，即使依赖已正确安装也会出现找不到模块的报错，可按以下步骤逐一修复：

1. 调整Webpack解析配置 #

修改项目下config/webpack/environment.js文件，添加Angular包别名和ESM模块支持规则：

const { environment } = require('@rails/webpacker')
const path = require('path')

// 配置@angular包的固定解析路径，避免递归查找异常
environment.config.resolve.alias = {
  ...environment.config.resolve.alias,
  '@angular': path.resolve(__dirname, '../../node_modules/@angular')
}

// 兼容Angular 13的ESM格式包
environment.config.resolve.extensions = [
  ...environment.config.resolve.extensions,
  '.mjs', '.ts', '.js'
]
environment.config.module.rules.push({
  test: /\.mjs$/,
  include: /node_modules/,
  type: 'javascript/auto'
})

module.exports = environment

2. 统一Angular依赖版本 #

你当前package.json中@angular/compiler、@angular/core为固定13.0.0版本，其余Angular相关依赖为^13.0.0浮动版本，建议全部修改为固定13.0.0避免版本不一致：

{
  "dependencies": {
    "@angular/common": "13.0.0",
    "@angular/compiler": "13.0.0",
    "@angular/core": "13.0.0",
    "@angular/platform-browser": "13.0.0",
    "@angular/platform-browser-dynamic": "13.0.0",
    "@angular/router": "13.0.0",
    // 其余依赖保持不变
  }
}

3. 清理缓存重装依赖 #

本地缓存经常会导致模块识别异常，执行以下命令清理缓存并重新安装依赖：

# 删除旧依赖和缓存文件
rm -rf node_modules tmp/cache/webpacker yarn.lock package-lock.json
# 重新安装依赖
yarn install
# 若使用npm则执行 npm install

4. 校验TypeScript配置 #

确认根目录下tsconfig.json包含以下正确的模块解析配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@angular/*": ["node_modules/@angular/*"]
    },
    "moduleResolution": "node",
    "target": "es2015",
    "module": "esnext"
  }
}

备选方案 #

如果以上步骤都无法解决，说明你当前的Webpack 4版本和Angular 13兼容性冲突无法调和，可将所有Angular相关依赖降级到^12.2.0版本，Angular 12对Webpack 4的支持更完善，降级后重新安装依赖即可。

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