在 webpack5 构建后，在 Angular Webpack 插件初始化之前尝试发出

Question

我正在使用 Angular 14 和 Webpack 版本：^5.58.1。

下面是配置：

webpack.config.js

const webpackPlugin = require('@ngtools/webpack').AngularWebpackPlugin;
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,
        }
      }
        test : /\.(tsx|ts)$/,
        use: [
               {
                 loader: '@ngtools/webpack',
                 options: {
                     configFile: path.resolve('./js/tsconfig.json')
                    },
               },
        ]
      },
    },

plugins: [
    new webpackPlugin({
      tsconfig: './js/tsconfig.json',
    }),
    new webpack.ContextReplacementPlugin(
      /\@angular(\\|\/)core(\\|\/)esm5/,
      path.resolve(__dirname, "./js/divdrawer")
    )
  ]
}

在生成构建时，我收到以下错误：

ERROR in ./js/divdrawer/filterMappingRemover.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
    at D:\MyProject\node_modules\@ngtools\webpack\src\ivy\loader.js:81:18
 @ ./js/entry.js 10:30-97

ERROR in ./js/divdrawer/main.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
    at D:\MyProject\node_modules\@ngtools\webpack\src\ivy\loader.js:81:18
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

ERROR in ./js/divdrawer/polyfills.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
    at D:\MyProject\node_modules\@ngtools\webpack\src\ivy\loader.js:81:18

ERROR in ./js/divdrawer/renderer.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
    at D:\MyProject\node_modules\@ngtools\webpack\src\ivy\loader.js:81:18
 @ ./js/entry.js 9:18-61

所有条目都在上面的消息中抛出错误。正如 Webpack 配置中提到的，我们有多个条目。

当我将项目升级到 Angular 14 时检测到这一点（Angular 升级步骤：v10 --> v11--> v12--> v13/v14）。

如何正确配置AngularWebpackPlugin？还有其他方法吗？

Answer 1

对我来说这个解决方案有效：

转到 package.json 并更改您的打字稿版本，如果您想将您的角度项目升级到

Angular 15（npm install typescript@"~4.8.0" --save-dev）

"devDependencies": {
  ...
  "typescript": "~4.8.0"
}

Angular 14（npm install typescript@"~4.7.0" --save-dev）

"devDependencies": {
  ...
  "typescript": "~4.7.0"
}

归功于FR

Answer 2

是的，将打字稿版本降级到 4.8.2 可以解决该问题。