Migration failed from 11 to 12: Remove deprecated options from 'angular.json' that are no longer present in v12.

[makinori]

🐞 Bug report

Command

• update

Description

I'm trying to update my Angular project from 11 to 12 and it's failing. I'm having a hard time figuring out what's going on.

🔬 Minimal Reproduction

I'm running this command:

ng update

Using package manager: 'yarn'
Collecting installed dependencies...
Found 42 dependencies.
    We analyzed your package.json, there are some packages to update:
    
      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cdk                       11.2.2 -> 12.0.3         ng update @angular/cdk
      @angular/cli                       11.2.2 -> 12.0.3         ng update @angular/cli
      @angular/core                      11.2.3 -> 12.0.3         ng update @angular/core
      @angular/material                  11.2.2 -> 12.0.3         ng update @angular/material
      @nguniversal/express-engine        11.2.0 -> 12.0.1         ng update @nguniversal/express-engine
    
    There might be additional packages which don't provide 'ng update' capabilities that are outdated.
    You can update the additional packages by running the update command of your package manager.

In which I'm then running this command:

ng update @angular/core @angular/cli @angular/material @angular/cdk @nguniversal/express-engine

🔥 Exception or Error

❯ Remove deprecated options from 'angular.json' that are no longer present in v12.
✖ Migration failed: 'set' on proxy: trap returned falsish for property 'defaultConfiguration'
  See "/private/var/folders/gw/1qz7jj69327488vm7307hxkm0000gn/T/ng-Q5CvCH/angular-errors.log" for further details.

/private/var/folders/gw/1qz7jj69327488vm7307hxkm0000gn/T/ng-Q5CvCH/angular-errors.log

[error] TypeError: 'set' on proxy: trap returned falsish for property 'defaultConfiguration'
    at updateOptions (/Users/maki/git/roxiplus.es/node_modules/@angular/cli/node_modules/@schematics/angular/migrations/update-12/update-angular-config.js:55:33)
    at /Users/maki/git/roxiplus.es/node_modules/@angular/cli/node_modules/@schematics/angular/migrations/update-12/update-angular-config.js:36:21
    at /Users/maki/git/roxiplus.es/node_modules/@angular/cli/node_modules/@schematics/angular/utility/workspace.js:40:34
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

🌍 Your Environment

yarn ng version Angular 11, current from package.json

Angular CLI: 11.2.2
Node: 16.3.0
OS: darwin arm64

Angular: 11.2.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.2
@angular-devkit/build-angular   0.1102.2
@angular-devkit/core            11.2.2
@angular-devkit/schematics      11.2.2
@angular/cdk                    11.2.2
@angular/cli                    11.2.2
@angular/material               11.2.2
@nguniversal/builders           11.2.0
@nguniversal/express-engine     11.2.0
@schematics/angular             10.1.2
@schematics/update              0.1102.2
rxjs                            6.6.6
typescript                      4.0.3

Anything else relevant?

package.json

{
	"name": "roxi-plus",
	"version": "0.0.0",
	"scripts": {
		"pre": "node download-plausible.js",
		"start": "npm run pre && ng serve --host 0.0.0.0",
		"build": "npm run pre && npm run build:ssr && npm run optimize",
		"dev:ssr": "npm run pre && ng run roxi-plus:serve-ssr",
		"serve:ssr": "node dist/server/main.js",
		"build:ssr": "ng build --prod && ng run roxi-plus:server:production",
		"prerender": "ng run roxi-plus:prerender",
		"format": "prettier --write **/*.html",
		"optimize": "gulp optimize",
		"ng": "ng"
	},
	"private": true,
	"dependencies": {
		"@angular/animations": "11.2.3",
		"@angular/cdk": "11.2.2",
		"@angular/common": "11.2.3",
		"@angular/compiler": "11.2.3",
		"@angular/core": "11.2.3",
		"@angular/forms": "11.2.3",
		"@angular/material": "11.2.2",
		"@angular/platform-browser": "11.2.3",
		"@angular/platform-browser-dynamic": "11.2.3",
		"@angular/platform-server": "11.2.3",
		"@angular/router": "11.2.3",
		"@nguniversal/express-engine": "11.2.0",
		"@schematics/angular": "10.1.2",
		"body-parser": "1.19.0",
		"bootstrap": "4.5.2",
		"cookie-parser": "^1.4.5",
		"express": "4.17.1",
		"express-static-gzip": "^2.1.1",
		"ngx-cookie-service": "^11.0.2",
		"nodemailer": "6.4.11",
		"rxjs": "6.6.6",
		"tslib": "^2.0.0",
		"zone.js": "0.10.3"
	},
	"devDependencies": {
		"@angular-devkit/build-angular": "0.1102.2",
		"@angular/cli": "11.2.2",
		"@angular/compiler-cli": "11.2.3",
		"@angular/language-service": "11.2.3",
		"@nguniversal/builders": "11.2.0",
		"@types/express": "4.17.7",
		"@types/node": "14.11.1",
		"@types/nodemailer": "6.4.0",
		"gulp": "^4.0.2",
		"node-fetch": "^2.6.1",
		"prettier": "^2.2.1",
		"sharp": "^0.27.2",
		"svgo": "^2.2.2",
		"through2-concurrent": "^2.0.0",
		"ts-loader": "8.0.4",
		"ts-node": "9.0.0",
		"tslint": "6.1.0",
		"typescript": "4.0.3",
		"webpack-cli": "3.3.12"
	}
}

angular.json

{
	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
	"version": 1,
	"newProjectRoot": "projects",
	"projects": {
		"roxi-plus": {
			"projectType": "application",
			"schematics": {
				"@schematics/angular:component": {
					"style": "scss",
					"skipTests": true
				},
				"@schematics/angular:class": {
					"skipTests": true
				},
				"@schematics/angular:directive": {
					"skipTests": true
				},
				"@schematics/angular:guard": {
					"skipTests": true
				},
				"@schematics/angular:interceptor": {
					"skipTests": true
				},
				"@schematics/angular:module": {
					"skipTests": true
				},
				"@schematics/angular:pipe": {
					"skipTests": true
				},
				"@schematics/angular:service": {
					"skipTests": true
				}
			},
			"root": "",
			"sourceRoot": "src",
			"prefix": "app",
			"architect": {
				"build": {
					"builder": "@angular-devkit/build-angular:browser",
					"options": {
						"outputPath": "dist/browser",
						"index": "src/index.html",
						"main": "src/main.ts",
						"polyfills": "src/polyfills.ts",
						"tsConfig": "tsconfig.app.json",
						"aot": true,
						"assets": [
							"src/favicon.ico",
							"src/66c2e6a0f3149850fd26.js",
							"src/assets"
						],
						"styles": ["src/styles.scss"],
						"scripts": []
					},
					"configurations": {
						"production": {
							"fileReplacements": [
								{
									"replace": "src/environments/environment.ts",
									"with": "src/environments/environment.prod.ts"
								}
							],
							"optimization": true,
							"outputHashing": "all",
							"sourceMap": false,
							"namedChunks": false,
							"extractLicenses": true,
							"vendorChunk": false,
							"buildOptimizer": true,
							"budgets": [
								{
									"type": "initial",
									"maximumWarning": "2mb",
									"maximumError": "5mb"
								},
								{
									"type": "anyComponentStyle",
									"maximumWarning": "6kb",
									"maximumError": "10kb"
								}
							]
						}
					}
				},
				"serve": {
					"builder": "@angular-devkit/build-angular:dev-server",
					"options": {
						"browserTarget": "roxi-plus:build"
					},
					"configurations": {
						"production": {
							"browserTarget": "roxi-plus:build:production"
						}
					}
				},
				"extract-i18n": {
					"builder": "@angular-devkit/build-angular:extract-i18n",
					"options": {
						"browserTarget": "roxi-plus:build"
					}
				},
				"server": {
					"builder": "@angular-devkit/build-angular:server",
					"options": {
						"outputPath": "dist/server",
						"main": "server.ts",
						"tsConfig": "tsconfig.server.json"
					},
					"configurations": {
						"production": {
							"fileReplacements": [
								{
									"replace": "src/environments/environment.ts",
									"with": "src/environments/environment.prod.ts"
								}
							],
							"sourceMap": false,
							"optimization": true
						}
					}
				},
				"serve-ssr": {
					"builder": "@nguniversal/builders:ssr-dev-server",
					"options": {
						"browserTarget": "roxi-plus:build",
						"serverTarget": "roxi-plus:server"
					},
					"configurations": {
						"production": {
							"browserTarget": "roxi-plus:build:production",
							"serverTarget": "roxi-plus:server:production"
						}
					}
				},
				"prerender": {
					"builder": "@nguniversal/builders:prerender",
					"options": {
						"browserTarget": "roxi-plus:build:production",
						"serverTarget": "roxi-plus:server:production",
						"routes": ["/"]
					},
					"configurations": {
						"production": {}
					}
				}
			}
		}
	},
	"defaultProject": "roxi-plus"
}

[mehrad-rafigh]

I am experiencing the same issue though I am using nx. The migration update-angular-config throws the following error when I run the migration Cannot read property 'startsWith' of undefined

[alan-agius4]

I am experiencing the same issue though I am using nx. The migration update-angular-config throws the following error when I run the migration Cannot read property 'startsWith' of undefined

@mehrad-rafigh, That indicates that you have an invalidate configuration, were the required builder property is missing.

[mehrad-rafigh]

I am experiencing the same issue though I am using nx. The migration update-angular-config throws the following error when I run the migration Cannot read property 'startsWith' of undefined

@mehrad-rafigh, That indicates that you have an invalidate configuration, were the required builder property is missing.

Thank you for your answer @alan-agius4.
I checked every app and every one of them has a builder property. The only ones that do not have a builder property are the libraries.

[alan-agius4]

Let's keep this issue focused on the original issue and avoid posting unrelated comments. I don't know about NX, but with Angular CLI projects with library targets always need a builder. All architect entries must have the mandatory builder option defined.

[alan-agius4]

@MAKITSUNE, as a workaround you can use the following command

npx ng update @angular/core @angular/cli @angular/material @angular/cdk