DEV Community

Rohit More
Rohit More

Posted on

Emit attempted before Angular Webpack plugin initialization.

I'm using Angular 14 ang webpack version: ^5.58.1.
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 the errors with above message. As mentioned in 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?

Top comments (0)