Facing issue while upgrading Angular 11 app to Angular 12

Question

When we are trying to update our Angular 11 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.

• configuration.output has an unknown property 'chunkLoadingGlobal'. These properties are valid: object { auxiliaryComment?, chunkCallbackName?, chunkFilename?, chunkLoadTimeout?, crossOriginLoading?, devtoolFallbackModuleFilenameTemplate?, devtoolLineToLine?, devtoolModuleFilenameTemplate?, devtoolNamespace?, filename?, futureEmitAssetss?, globalObject?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, jsonpFunction?, jsonpScriptType?, library?, libraryExport?, libraryTarget?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine?, webassemblyModuleFilename? }-> Options affecting the output of the compilation. output options tell webpack how to write the compiled files to disk. See "C:\Users\newUser\AppData\Local\Temp\ng-UOeNLu\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/animations": "~12.0.5",
      "@angular/cdk": "^12.0.5",
      "@angular/common": "~12.0.5",
      "@angular/compiler": "~12.0.5",
      "@angular/core": "~12.0.5",
      "@angular/forms": "~12.0.5",
      "@angular/material": "^12.0.5",
      "@angular/platform-browser": "~12.0.5",
      "@angular/platform-browser-dynamic": "~12.0.5",
      "@angular/router": "~12.0.5",
      "@material-extended/mde": "^3.0.3",
      "bootstrap-4-grid": "^3.4.0",
      "highcharts": "^8.1.2",
      "html2canvas": "^1.0.0-rc.7",
      "htmldiff-js": "^1.0.5",
      "http-server": "^0.12.3",
      "jquery": "^3.5.1",
      "jspdf": "^2.1.1",
      "mat-table-exporter": "^9.0.0",
      "ngx-mat-select-search": "^2.1.2",
      "ng2-file-upload": "^1.4.0",
      "ngx-matomo": "^0.1.4",
      "ngx-summernote": "^0.8.0",
      "ngx-order-pipe": "^2.0.4",
      "rxjs": "~6.5.4",
      "single-spa": ">=4.0.0",
      "single-spa-angular": "5.0.1",
      "tslib": "^2.0.0",
      "summernote": "^0.8.18",
      "zone.js": "~0.11.4"
    },
    "devDependencies": {
      "@angular-builders/custom-webpack": "9.2.1-beta.0",
      "@angular-devkit/build-angular": "~0.1102.13",
      "@angular/cli": "~12.0.5",
      "@angular/compiler-cli": "~12.0.5",
      "@angular/language-service": "~12.0.5",
      "@types/node": "^12.11.1",
      "@types/jasmine": "~3.6.0",
      "@types/jasminewd2": "~2.0.3",
      "codelyzer": "^6.0.0",
      "jasmine-core": "~3.6.0",
      "jasmine-spec-reporter": "~5.0.0",
      "karma": "~5.0.0",
      "karma-chrome-launcher": "~3.1.0",
      "karma-coverage-istanbul-reporter": "~3.0.2",
      "karma-jasmine": "~4.0.0",
      "karma-jasmine-html-reporter": "^1.5.0",
      "protractor": "~7.0.0",
      "ts-node": "~8.3.0",
      "tslint": "~6.1.0",
      "typescript": "~4.2.4"
    }
  }

Angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-app": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.single-spa.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/bootstrap-4-grid/scss/grid.scss",
              "src/styles.scss",
              "node_modules/summernote/dist/summernote-lite.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/summernote/dist/summernote-lite.min.js"
            ],
            "customWebpackConfig": {
              "path": "extra-webpack.config.js",
              "libraryName": "my-app",
              "libraryTarget": "umd"
            }
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "none",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "20kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "my-app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "my-app:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "my-app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "my-app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "my-app:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "my-app",
  "cli": {
    "analytics": false
  }
}```

Answer 1

I encountered the same issue. Changing the versions of certain dependencies and devDependencies in package.json resolved it for me.

Changed dependencies to have the following:

• "single-spa": "5.9.3"
• "single-spa-angular": "5.0.2"

Changed the dev dependencies to have the following:

• "@angular-builders/custom-webpack": "12.1.3"
• "@angular-devkit/build-angular": "12.2.16"