Emit attempted before Angular Webpack plugin initialization after webpack5 build - webpack-5

Question

I'm using Angular 14 ang 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 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?

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.

Answer 3

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