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?

Nonparticipation

Where you able to resolve this? I'm facing the same issue. – Cherish

@Cherish 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" – Betaine

But why this error is creeping... – Protium

No. Downgrading typescript version to 4.8.2 not resolving this issue. – Nonparticipation

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

Samarium

Answer 2

yes downgrading typescript version to 4.8.2 resolve the issue.

Pagas

Answer 3

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.

Manse

Answer 4

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

Crescendo

didn't work. I am still getting the same error. – Seleucia

Answer 5

Specify a specific version could solve this issue. E.g. "typescript": "^5.1.6" => "typescript": "5.1.6"

Perhaps something wrong with typescript version 5.2.2, which my application tries to create a dependency to.

Grainfield

Answer 6

I had the same issues and realized they were due node-sass fail on installation due to lacking build essentials in my ubuntu installation. i solved it by running this command in ubuntu

sudo apt update && apt install build-essential 

If you are using Windows and npm, install it through cmd (Administrator):

npm install --global --production windows-build-tools

Pelf

Answer 7

Try running:

ng update @angular/core@14

Retroact

Answer 8

I had the same issue, I verified read and write access on node_modules folder and it worked.

Lute

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review – Deserted

Answer 9

I have encountered this error when I was experimenting moving a file around and ending up with something like this in the tsconfig.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "types": ["node"],
    "target": "es2020"
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts",
    "src/some-folder/some-subfolder/another-subfolder/the-file.ts",
    "src/some-folder/some-subfolder/the-file.ts"
  ],
  "include": ["src/**/*.d.ts"],
  "exclude": ["**/*.test.ts", "**/*.spec.ts"]
}

Removing the duplicate file gets rid of the error message.

Isomer