Angular14+Webpack5构建报错：Emit attempted before Angular Webpack plugin初始化

错误原因 #

升级到Angular 14后，@ngtools/webpack插件的初始化逻辑发生变化，原有配置存在语法错误、loader与插件冲突、旧版路径匹配三个核心问题，导致插件未完成初始化就触发TS文件编译，抛出Emit attempted before Angular Webpack plugin initialization错误。

修复步骤 #

1. 修正Webpack配置语法错误 #

原配置中module模块未正确闭合，且缺失path模块引入，先补全基础依赖与语法结构。

2. 移除冲突的TS Loader配置 #

Angular 14的AngularWebpackPlugin会自动接管TS文件的编译处理，单独配置@ngtools/webpack loader会导致初始化顺序冲突，需删除rules中的TS loader规则。

3. 更新插件配置与路径匹配 #

• 替换ContextReplacementPlugin的匹配路径为Angular 14使用的esm2020（旧版esm5已废弃）
• 在AngularWebpackPlugin中明确指定Angular项目的根模块与入口文件，确保插件正确初始化

修正后的完整配置 #

const path = require('path');
const { AngularWebpackPlugin } = require('@ngtools/webpack');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  devtool: "source-map",
  entry: {
    main: "./js/main.js",
    mainDrawer: "./js/divdrawer/main.ts",
    polyfills: "./js/divdrawer/polyfills.ts",
    entry: "./js/entry.js",
    thirdpartylibs: "./js/thirdpartylibs.js"
  },
  output: {
    path: path.join(__dirname, "build/"),
    filename: "[name]bundle.js"
  },
  module: {
    rules: [
      {
        parser: {
          system: true,
        }
      }
    ]
  },
  plugins: [
    new AngularWebpackPlugin({
      tsconfig: './js/tsconfig.json',
      // 指定Angular根模块（替换为你的实际根模块路径）
      entryModule: path.resolve('./js/divdrawer/app.module.ts#AppModule'),
      // 明确Angular项目的入口文件
      mainPath: './js/divdrawer/main.ts'
    }),
    new webpack.ContextReplacementPlugin(
      /\@angular(\\|\/)core(\\|\/)esm2020/,
      path.resolve(__dirname, "./js/divdrawer")
    )
  ]
};

替代方案：使用Angular CLI自定义Webpack配置 #

如果手动维护Webpack配置成本过高，推荐使用Angular CLI的扩展方案：

1. 安装依赖：npm install @angular-builders/custom-webpack --save-dev
2. 修改angular.json中的构建配置，将builder替换为@angular-builders/custom-webpack:browser，并指定自定义配置路径：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 保留原有Angular CLI配置项
    }
  }
}

3. 自定义配置文件中只需添加额外规则，Angular CLI会自动合并默认的Angular相关Webpack配置，避免手动配置出错。

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