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?

@Srihari I resolved it by downgrading my version of typescript. I noticed a typescript version too high error further down in the console, so I ran this command: `npm i typescript@">=4.8.2 < 4.9.0"` — xinthose, Dec 06 '22 at 21:27
No. Downgrading typescript version to 4.8.2 not resolving this issue. — Rohit More, Dec 15 '22 at 12:20

score 9 · Answer 1 · answered Dec 26 '22 at 11:52

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

score 2 · Answer 2 · answered Dec 13 '22 at 17:30

2

yes downgrading typescript version to 4.8.2 resolve the issue.

answered Dec 13 '22 at 17:30

Mohamed GAFSIA

41
4

score 1 · Answer 3 · answered Feb 18 '23 at 09:19

1

For me, upgrading node version 16.xx to 18.xx (LTS) fixed the issue.

answered Feb 18 '23 at 09:19

Aruna101

52
7

score 0 · Answer 4 · answered Mar 31 '23 at 13:14

I encountered this error message while upgrading from Angular 14 -> 15. However, another error was also logged:

Error: Failed to initialize Angular compilation - The Angular Compiler requires TypeScript >=4.6.2 and <4.8.0 but 4.8.2 was found instead.

My package.json indicated version 15 for most @angular packages, but somehow @angular/compiler-cli was still set to 14.

Changing it to 15 resolved the issue for me.

score 0 · Answer 5 · answered May 28 '23 at 09:30

0

Try running:

ng update @angular/core@14

answered May 28 '23 at 09:30

Jason Mullings

850
14
10

Emit attempted before Angular Webpack plugin initialization after webpack5 build

5 Answers5