CODEWITHSUNDEEP
javascriptwebpack-5angular14angular14upgradeangular-webpack
Rohit More
Rohit More

Reputation: 221

Emit attempted before Angular Webpack plugin initialization after webpack5 build

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?

Upvotes: 22

Views: 53436

Answers (10)

Eli
Eli

Reputation: 1846

Restarting my pc helped. Although at other times other answers here helped me.

Upvotes: 0

joe joshua
joe joshua

Reputation: 11

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

Upvotes: 1

Magni Hansen
Magni Hansen

Reputation: 102

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.

Upvotes: 1

techguy2000
techguy2000

Reputation: 5161

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

enter image description here

Removing the duplicate file gets rid of the error message.

Upvotes: 0

Andrés Sebastián Díaz Vargas
Andrés Sebastián Díaz Vargas

Reputation: 31

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

Upvotes: 0

Jason Mullings
Jason Mullings

Reputation: 994

Try running:

ng update @angular/core@14

Upvotes: 0

BizzyBob
BizzyBob

Reputation: 14740

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.

Upvotes: 2

Aruna101
Aruna101

Reputation: 107

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

Upvotes: 1

Shay Zalman
Shay Zalman

Reputation: 491

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

Upvotes: 17

Mohamed GAFSIA
Mohamed GAFSIA

Reputation: 59

yes downgrading typescript version to 4.8.2 resolve the issue.

Upvotes: 3

Related Questions