When we are trying to update our Angular 9 application(Single SPA micro frontend) to Angular 12 we are facing bellow issue.
Error on console when trying to run this app:
An unhandled exception occurred: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
output options tell webpack how to write the compiled files to disk.
See "C:\Users***\AppData\Local\Temp\ng-UWsPRm\angular-errors.log" for further details..Package.json:
"name": "my-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "npm run serve",
"devstart": "ng serve --aot=false",
"build": "npm run build",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular-builders/custom-webpack": "^10.0.0",
"@angular-devkit/architect": "^0.1202.13",
"@angular-devkit/build-angular": "^12.2.13",
"@angular-devkit/core": "^12.2.13",
"@angular-devkit/schematics": "^12.2.13",
"@angular/animations": "^12.2.14",
"@angular/cdk": "^12.2.13",
"@angular/common": "^12.2.14",
"@angular/compiler": "^12.2.14",
"@angular/core": "^12.2.14",
"@angular/forms": "^12.2.14",
"@angular/localize": "^12.2.14",
"@angular/material": "^12.2.13",
"@angular/platform-browser": "^12.2.14",
"@angular/platform-browser-dynamic": "^12.2.14",
"@angular/router": "^12.2.14",
"@elastic/apm-rum": "^4.5.1",
"@elastic/apm-rum-angular": "^0.5.0",
"@fortawesome/angular-fontawesome": "0.3.0",
"@fortawesome/fontawesome-svg-core": "^1.2.26",
"@fortawesome/free-solid-svg-icons": "5.6.3",
"@grapecity/spread-excelio": "^12.0.10",
"@grapecity/spread-sheets": "^12.0.10",
"@grapecity/spread-sheets-angular": "^12.0.10",
"@grapecity/spread-sheets-charts": "^12.0.10",
"@highcharts/map-collection": "^1.1.2",
"@ng-bootstrap/ng-bootstrap": "^5.1.4",
"@ng-select/ng-select": "^2.17.0",
"@ngx-translate/core": "11.0.1",
"@ngx-translate/http-loader": "4.0.0",
"@syncfusion/ej2-angular-dropdowns": "^17.4.43",
"@types/jquery": "^3.3.29",
"@types/selenium-webdriver": "^4.0.9",
"@types/sockjs-client": "^1.1.1",
"@types/stompjs": "^2.3.4",
"add": "^2.0.6",
"ag-grid": "^18.1.2",
"ag-grid-angular": "^20.2.0",
"ag-grid-community": "^20.2.0",
"ag-grid-enterprise": "^20.2.0",
"angular-highcharts": "^7.2.0",
"bootstrap": "4.2.1",
"core-js": "^2.5.7",
"crypto-js": "^3.1.9-1",
"e": "0.0.4",
"fund": "^1.0.0",
"highcharts": "^7.1.0",
"highcharts-angular": "^2.4.0",
"highcharts-exporting": "^0.1.7",
"html2canvas": "^1.0.0-rc.1",
"jquery": "^3.4.1",
"jquery-ui-dist": "^1.12.1",
"jspdf": "^1.5.3",
"keycloak-angular": "^6.0.0",
"moment": "2.24.0",
"net": "^1.0.2",
"ng": "0.0.0",
"ng-jhipster": "^0.11.5",
"ng-multiselect-dropdown": "^0.2.3",
"ngx-cookie": "2.0.1",
"ngx-dual-listbox": "^0.2.0",
"ngx-infinite-scroll": "7.0.1",
"ngx-monaco-editor": "^8.1.1",
"ngx-spinner": "^7.0.0",
"ngx-webstorage": "^5.0.0",
"percentile": "^1.2.2",
"primeflex": "^1.1.0",
"primeicons": "^2.0.0",
"primeng": "^9.1.3",
"rxjs": "^6.5.3",
"scss-dependency": "^1.2.0",
"single-spa": "^5.9.3",
"single-spa-angular": "^5.0.1",
"slavede-ng-dual-list-box": "^1.1.5",
"stompjs": "^2.3.3",
"swagger-ui": "2.2.10",
"terser": "^3.16.1",
"tslib": "^2.0.0",
"typescript": "^4.3.5",
"underscore": "^1.9.1",
"webpack": "^5.65.0",
"webpack-5-chain": "^8.0.0",
"webpack-dev-server": "^4.6.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^10.0.0",
"@angular/cli": "^12.2.13",
"@angular/compiler-cli": "^12.2.14",
"@ngtools/webpack": "^8.3.20",
"@types/chai": "4.1.7",
"@types/chai-string": "1.4.1",
"@types/jest": "^23.3.13",
"@types/mocha": "5.2.5",
"@types/node": "^10.12.18",
"angular-router-loader": "0.8.5",
"angular2-template-loader": "0.6.2",
"autoprefixer": "9.4.6",
"browser-sync": "2.26.3",
"browser-sync-webpack-plugin": "2.2.2",
"cache-loader": "2.0.1",
"chai": "4.2.0",
"chai-as-promised": "7.1.1",
"chai-string": "1.5.0",
"codelyzer": "^6.0.0",
"copy-webpack-plugin": "4.6.0",
"css-loader": "2.1.0",
"file-loader": "3.0.1",
"fork-ts-checker-webpack-plugin": "0.5.2",
"friendly-errors-webpack-plugin": "1.7.0",
"generator-jhipster": "5.8.1",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"husky": "1.3.1",
"jest": "^27.4.3",
"jest-junit": "12.3.0",
"jest-preset-angular": "^11.0.1",
"jest-sonar-reporter": "2.0.0",
"lint-staged": "8.1.0",
"mini-css-extract-plugin": "0.5.0",
"mocha": "5.2.0",
"moment-locales-webpack-plugin": "1.0.7",
"optimize-css-assets-webpack-plugin": "5.0.1",
"postcss-loader": "3.0.0",
"prettier": "1.16.1",
"protractor": "~7.0.0",
"reflect-metadata": "0.1.13",
"rimraf": "2.6.3",
"simple-progress-webpack-plugin": "1.1.2",
"style-loader": "0.23.1",
"terser-webpack-plugin": "^1.2.1",
"thread-loader": "2.1.1",
"to-string-loader": "^1.1.5",
"ts-loader": "5.3.3",
"ts-node": "8.0.1",
"tslint": "~6.1.0",
"tslint-config-prettier": "1.17.0",
"tslint-loader": "3.6.0",
"webpack-cli": "3.2.1",
"webpack-merge": "4.2.1",
"webpack-notifier": "1.7.0",
"webpack-visualizer-plugin": "0.1.11",
"workbox-webpack-plugin": "3.6.3",
"write-file-webpack-plugin": "4.5.0"
}
}
kindly update the custom-webpack with ^12.1.3
"@angular-builders/custom-webpack": "^12.1.3",