Emit attempted before Angular Webpack plugin initialization after webpack5 build

Question

I'm using Angular 14 and Webpack version: ^5.58.1.

Below is the config:

webpack.congif.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")
    )
  ]
}

While generating the build I'm getting below error:

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

All the entries are throwing errors in the message above. As mentioned in the Webpack config we have multiple entries.

This is detected when I upgraded our project to Angular 14 (Angular upgrade Steps: v10 --> v11--> v12--> v13/v14).

How to configure AngularWebpackPlugin correctly? Is there any alternative way?

Answer 1

For me this solution worked:

go to package.json and change your typescript version, If you want to upgrade your angular project to

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"
}

Credit to F.R

Answer 2

yes downgrading typescript version to 4.8.2 resolve the issue.