Angular13迁移后使用webpack4构建报模块未找到错误如何解决？

报错核心原因是你当前使用的Webpack 4.x全系列版本与Angular 13完全不兼容：

• Angular 13 正式移除了旧版View Engine支持，所有官方npm包默认输出ESM格式的.mjs产物，不再提供适配Webpack 4的CommonJS/UMD兼容包
• Webpack 4 对.mjs模块的路径解析存在已知缺陷，无法正确识别Angular包内部的跨包引用逻辑，才会出现「在@angular/common目录下找不到@angular/common」这类反常报错
• 你当前配置的webpack-cli 3.x、webpack-dev-server 3.x、webpack-merge 4.x均为适配Webpack 4的旧版本，和Angular 13的构建链路要求完全不匹配

备注：你当前使用的Node 16.13.0、npm 8.1.0版本完全满足Angular 13的运行要求，不需要调整环境版本。

1. 对齐Webpack大版本
   Angular 13 内置构建链路基于Webpack 5实现，自定义webpack配置必须对齐大版本。先把package.json里devDependencies下的webpack相关依赖替换为以下适配版本：

"webpack": "^5.58.0",
"webpack-cli": "^4.9.0",
"webpack-dev-server": "^4.3.0",
"webpack-merge": "^5.8.0"

如果项目使用@angular-builders/custom-webpack实现自定义webpack配置，必须将该包同步升级到13.x版本，和本地Angular主版本号完全一致，否则仍会出现构建链路不兼容问题。

2. 清理依赖残留后重装
   旧版本依赖的本地缓存会导致版本不匹配问题，依次执行以下命令清理重装：

# 删除现有依赖目录和锁文件（Mac/Linux）
rm -rf node_modules package-lock.json

# Windows系统执行以下命令删除
# rd /s /q node_modules
# del package-lock.json

# 重新安装全量依赖
npm install

3. 适配Webpack 5配置规则
   如果你项目中有自定义webpack配置文件，需要把旧版Webpack 4的配置项调整为Webpack 5兼容写法，几个高频改动点：
   • 移除配置中所有node:字段下的polyfill配置，Webpack 5不再自动注入Node.js核心模块的浏览器端polyfill
   • 调整devServer配置适配webpack-dev-server 4.x规则：旧版contentBase字段改为static，移除废弃的hotOnly字段
   • 检查module.rules下的解析规则，不要把.mjs后缀文件排除在JS/TS解析范围外
   • 在resolve.extensions配置中把.mjs加入后缀列表，且放在靠前位置优先识别ESM模块，参考配置：

resolve: {
  extensions: ['.mjs', '.ts', '.js', '.json']
}

4. 校验Angular依赖一致性
   执行以下命令检查所有@angular开头的依赖版本，确保所有官方包都升级到13.x版本，避免出现部分包停留在Angular 12的混装问题：

npm ls @angular/core @angular/common @angular/compiler @angular/forms @angular/platform-browser @angular/platform-browser-dynamic @angular/router

如果输出结果中有版本号不是13.x的包，手动升级到对应13版本即可。

完成以上步骤后重新执行npm run start即可正常启动项目。

内容的提问来源于stack exchange，提问作者The Dark Knight