Angular编译base-page.component时出现AngularWebpackPlugin缺失错误

算力阿峰

2026-8-10

Angular热编译报错：The Angular Webpack loader requires the AngularWebpackPlugin

问题场景

在Angular 14.1.0项目中，存在一个被其他组件继承的base-page.component.ts，修改该文件（比如添加空格）后重新编译时出现以下错误：

./src/app/shared/components/wizard/page-base/page-base.component.ts?ngResource - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: The Angular Webpack loader requires the AngularWebpackPlugin.
× Failed to compile.

修改其他文件重新编译时错误消失，项目使用的核心包版本：

{
  "@angular/core": "14.1.0",
  "@angular/cli": "14.1.0",
  "@angular/compiler-cli": "14.1.0",
  "webpack": "5.73.0",
  "webpack-cli": "4.9.2"
}

解决方案

检查自定义Webpack配置（如果有）：如果项目使用了自定义webpack.config.js，需确保正确引入并配置AngularWebpackPlugin。Angular CLI默认会自动配置该插件，但自定义配置时易遗漏，示例配置如下：
```
const { AngularWebpackPlugin } = require('@ngtools/webpack');

module.exports = {
  plugins: [
    new AngularWebpackPlugin({
      tsconfig: './tsconfig.json',
      compilerOptions: {}
    })
  ]
};
```
清除缓存并重启开发服务器：执行以下命令清理Angular和Webpack缓存，再重启服务：
```
ng cache clean
rm -rf node_modules/.cache
ng serve
```
修复组件继承的热编译异常：由于该组件被多个子组件继承，热编译可能存在依赖解析问题。可尝试在base-page.component.ts的@Component装饰器中添加preserveWhitespaces: true等元数据，触发编译器重新识别变更；或临时修改任意子组件代码触发全量编译后再改回。
升级兼容包版本：Angular 14.1.0与Webpack 5.73.0的组合可能存在兼容性问题，可尝试将Angular CLI及相关包升级到14.2.x小版本，同时确保Webpack版本处于Angular 14推荐的5.64.x-5.76.x范围内。
检查angular.json配置：确认angular.json中architect.build.options未禁用Angular默认Webpack插件配置，避免手动覆盖builders为自定义Webpack builder却未正确配置插件。