feat!: update to Angular 20

BREAKING CHANGE: Minimum required Angular version is v20

Author: json-derulo

.browserslistrc

@@ -15,7 +15,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist/angular-material-css-vars",
             "index": "src/index.html",
@@ -56,7 +56,7 @@
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "options": {
             "buildTarget": "angular-material-css-vars:build"
           },
@@ -71,23 +71,11 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "angular-material-css-vars:build"
           }
         },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "angular-material-css-vars:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "angular-material-css-vars:serve:production"
-            }
-          }
-        },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
@@ -103,14 +91,14 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "builder": "@angular/build:ng-packagr",
           "options": {
             "tsConfig": "projects/material-css-vars/tsconfig.lib.json",
             "project": "projects/material-css-vars/ng-package.json"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "codeCoverage": true,
             "main": "projects/material-css-vars/src/test.ts",
@@ -137,5 +125,31 @@
       "enabled": true
     },
     "schematicCollections": ["@angular-eslint/schematics"]
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

angular.json

@@ -32,16 +32,15 @@
     "prettier-fix": "prettier . --write"
   },
   "dependencies": {
-    "@angular/animations": "^19.2.3",
-    "@angular/cdk": "^19.2.6",
-    "@angular/common": "^19.2.3",
-    "@angular/compiler": "^19.2.3",
-    "@angular/core": "^19.2.3",
-    "@angular/forms": "^19.2.3",
-    "@angular/material": "^19.2.6",
-    "@angular/platform-browser": "^19.2.3",
-    "@angular/platform-browser-dynamic": "^19.2.3",
-    "@angular/router": "^19.2.3",
+    "@angular/cdk": "^20.0.0-rc.1",
+    "@angular/common": "^20.0.0-rc.1",
+    "@angular/compiler": "^20.0.0-rc.1",
+    "@angular/core": "^20.0.0-rc.1",
+    "@angular/forms": "^20.0.0-rc.1",
+    "@angular/material": "^20.0.0-rc.1",
+    "@angular/platform-browser": "^20.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "^20.0.0-rc.1",
+    "@angular/router": "^20.0.0-rc.1",
     "@ctrl/tinycolor": "^4.0.0",
     "@types/node": "^22.13.14",
     "ngx-color-picker": "^19.0.0",
@@ -50,10 +49,10 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.4",
-    "@angular/cli": "^19.2.4",
-    "@angular/compiler-cli": "^19.2.3",
-    "@angular/language-service": "^19.2.3",
+    "@angular/build": "^20.0.0-rc.2",
+    "@angular/cli": "^20.0.0-rc.2",
+    "@angular/compiler-cli": "^20.0.0-rc.1",
+    "@angular/language-service": "^20.0.0-rc.1",
     "@types/jasmine": "^5.1.1",
     "angular-eslint": "^19.0.0",
     "copyfiles": "^2.1.1",
@@ -67,7 +66,7 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
     "karma-safarinative-launcher": "^1.1.0",
-    "ng-packagr": "^19.0.0",
+    "ng-packagr": "^20.0.0-rc.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.0",
     "typescript": "~5.8.2",
@@ -78,5 +77,10 @@
     "yarn": "Please use pnpm instead of yarn to install dependencies",
     "pnpm": "^10.7.0"
   },
+  "pnpm": {
+    "overrides": {
+      "jasmine-core": "$jasmine-core"
+    }
+  },
   "packageManager": "[email protected]"
 }