部署Angular应用时Webpack报Cannot read property 'environment' of undefined错误

嘿，这个问题我之前帮不少开发者排查过，大概率是Angular Compiler Plugin（@ngtools/webpack）和你当前使用的Webpack版本不兼容，或者是配置文件里的插件使用场景不对导致的。下面给你一步步拆解解决办法：

1. 优先排查版本兼容性问题 #

@ngtools/webpack对Webpack的版本要求很严格，不同大版本的Webpack对应不同版本的插件：

• Webpack 5 需要 @ngtools/webpack >= 11.0.0
• Webpack 4 对应 @ngtools/webpack 8.x ~ 10.x
• Webpack 3 及以下对应更老的@ngtools/webpack版本

你可以先执行以下命令确认当前依赖版本：

# 查看Webpack版本
npm list webpack
# 查看@ngtools/webpack版本
npm list @ngtools/webpack

如果版本不匹配，就升级或降级其中一方。比如你用的是Webpack 5，就把@ngtools/webpack升级到最新稳定版：

npm install @ngtools/webpack@latest --save-dev

2. 检查vendor配置文件的插件使用 #

你是在打包vendor依赖时触发的错误，而AngularCompilerPlugin主要是用来处理Angular应用代码的编译（比如TS转译、模板编译），通常不需要在vendor的Webpack配置里引入这个插件。

打开你的webpack.config.vendor.js，看看plugins数组里是不是误加了AngularCompilerPlugin，如果有的话直接删掉这部分配置，vendor打包只需要处理第三方依赖的打包即可。

3. 清理依赖缓存重新安装 #

有时候依赖缓存会导致版本冲突或异常，试试以下步骤：

• 删除node_modules文件夹：

  # Mac/Linux
  rm -rf node_modules
  # Windows
  rmdir /s /q node_modules
  

• 删除package-lock.json（或yarn.lock）：

  rm package-lock.json
  

• 重新安装依赖：

  npm install
  

4. 使用本地Webpack执行命令 #

确保你使用的是项目本地安装的Webpack，而不是全局版本（全局版本可能和本地依赖不匹配）。把执行命令改成：

npx webpack --config webpack.config.vendor.js --env.prod

如果以上步骤都试过还是有问题，可以补充一下你的Webpack版本、@ngtools/webpack版本，以及webpack.config.vendor.js的关键配置，我再帮你进一步排查~

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