feat!: update to angular 19 (#177)

Co-authored-by: Daniel Kimmich <[email protected]>

Author: json-derulo

package-lock.json

@@ -32,32 +32,32 @@
     "prettier-fix": "prettier . --write"
   },
   "dependencies": {
-    "@angular/animations": "^18.2.8",
-    "@angular/cdk": "^18.2.8",
-    "@angular/common": "^18.2.8",
-    "@angular/compiler": "^18.2.8",
-    "@angular/core": "^18.2.8",
-    "@angular/forms": "^18.2.8",
-    "@angular/material": "^18.2.8",
-    "@angular/platform-browser": "^18.2.8",
-    "@angular/platform-browser-dynamic": "^18.2.8",
-    "@angular/router": "^18.2.8",
+    "@angular/animations": "^19.0.0-rc.2",
+    "@angular/cdk": "^19.0.0-rc.2",
+    "@angular/common": "^19.0.0-rc.2",
+    "@angular/compiler": "^19.0.0-rc.2",
+    "@angular/core": "^19.0.0-rc.2",
+    "@angular/forms": "^19.0.0-rc.2",
+    "@angular/material": "^19.0.0-rc.2",
+    "@angular/platform-browser": "^19.0.0-rc.2",
+    "@angular/platform-browser-dynamic": "^19.0.0-rc.2",
+    "@angular/router": "^19.0.0-rc.2",
     "@ctrl/tinycolor": "^4.0.0",
     "ngx-color-picker": "^17.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.5.0",
-    "zone.js": "~0.14.10"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.8",
+    "@angular-devkit/build-angular": "^19.0.0-rc.2",
     "@angular-eslint/builder": "^18.0.0",
     "@angular-eslint/eslint-plugin": "^18.0.0",
     "@angular-eslint/eslint-plugin-template": "^18.0.0",
     "@angular-eslint/schematics": "^18.0.0",
     "@angular-eslint/template-parser": "^18.0.0",
-    "@angular/cli": "^18.2.8",
-    "@angular/compiler-cli": "^18.2.8",
-    "@angular/language-service": "^18.2.8",
+    "@angular/cli": "^19.0.0-rc.2",
+    "@angular/compiler-cli": "^19.0.0-rc.2",
+    "@angular/language-service": "^19.0.0-rc.2",
     "@types/jasmine": "^5.1.1",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
@@ -72,9 +72,14 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
     "karma-safarinative-launcher": "^1.1.0",
-    "ng-packagr": "^18.0.0",
+    "ng-packagr": "^19.0.0-rc.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.0",
     "typescript": "~5.5.3"
+  },
+  "overrides": {
+    "@angular/common": "^19.0.0-rc.2",
+    "@angular/core": "^19.0.0-rc.2",
+    "@angular/forms": "^19.0.0-rc.2"
   }
 }

package.json

@@ -25,9 +25,9 @@
     "angular-material"
   ],
   "peerDependencies": {
-    "@angular/common": ">=18",
-    "@angular/core": ">=18",
-    "@angular/material": ">=18"
+    "@angular/common": ">=19",
+    "@angular/core": ">=19",
+    "@angular/material": ">=19"
   },
   "dependencies": {
     "@ctrl/tinycolor": "^4.0.0",

projects/material-css-vars/package.json

@@ -17,7 +17,8 @@
   $typography-config: mat.m2-define-typography-config(),
   $density
 ) {
-  @include mat.core();
+  @include mat.elevation-classes();
+  @include mat.app-background();
 
   $primary: mat.m2-define-palette(variables.$palette-primary);
   $accent: mat.m2-define-palette(variables.$palette-accent);

projects/material-css-vars/src/lib/_main.scss

@@ -1,10 +1,10 @@
 import {
-  ENVIRONMENT_INITIALIZER,
   EnvironmentProviders,
   inject,
   makeEnvironmentProviders,
   ModuleWithProviders,
   NgModule,
+  provideEnvironmentInitializer,
 } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { MaterialCssVariablesConfig } from "./model";
@@ -34,10 +34,6 @@ export function provideMaterialCssVars(
 ): EnvironmentProviders {
   return makeEnvironmentProviders([
     { provide: MATERIAL_CSS_VARS_CFG, useValue: config },
-    {
-      provide: ENVIRONMENT_INITIALIZER,
-      useValue: () => inject(MaterialCssVarsService),
-      multi: true,
-    },
+    provideEnvironmentInitializer(() => inject(MaterialCssVarsService)),
   ]);
 }

projects/material-css-vars/src/lib/material-css-vars.module.ts

@@ -7,7 +7,6 @@ import { By } from "@angular/platform-browser";
 
 @Component({
   template: ` <button mat-raised-button [color]="color">Button text</button>`,
-  standalone: true,
   imports: [MatButtonModule],
 })
 class ButtonComponent {

projects/material-css-vars/src/test/integration.spec.ts

@@ -57,7 +57,6 @@ interface SpinnerColor {
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.scss"],
-  standalone: true,
   imports: [
     MatSidenavModule,
     MatToolbarModule,

src/app/app.component.ts

@@ -4,8 +4,8 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
+    "esModuleInterop": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "module": "esnext",
     "moduleResolution": "node",