Angular migration from 12 to 13 getting error : Cannot destructure property 'styles' of 'buildOptions.sourceMap' as it is undefined

Question

Im trying to upgrade my angular version from 12 to 13 but getting error "An unhandled exception occurred: Cannot destructure property 'styles' of 'buildOptions.sourceMap' as it is undefined."

Im using below command which is provide on offitial site npx @angular/cli@13 update @angular/core@13 @angular/cli@13

please anyone can help me

Answer 1

Unfortunately, I was not able to find a valid spot to add sourceMap configuration in angular.json. What I did do successfully was reset the file by creating a new project and copying the contents of the new angular.json to my old project and then change the project name everywhere that is doesn't match.

An example version of that file is below:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": false
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "temp": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/temp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "temp:build:production"
            },
            "development": {
              "browserTarget": "temp:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "temp: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",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "defaultProject": "temp"
}

Answer 2

I deleted package-lock.json, deleted the node_modules folder and did npm install and it fixed the issue.

Answer 3

If anyone encounters this issue when upgrading from Angular 12 to 13, just need to

replace this text '@ngx-env/builder' with '@angular-devkit/build-angular' in angular.json

Answer 4

The issue has been fixed on version 2.0.1. If you encounter the same issue would you please open an issue on the GitHub repo https://github.com/chihab/ngx-env/issues?

PS: I am the author of the package :)