migrate

.eslintrc.json

@@ -38,13 +38,18 @@
             "varsIgnorePattern": "^_",
             "caughtErrorsIgnorePattern": "^_"
           }
-        ]
+        ],
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
       }
     },
     {
       "files": ["*.js", "*.jsx"],
       "extends": ["plugin:@nx/javascript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
+      }
     },
     {
       "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],

.prettierignore

@@ -3,4 +3,5 @@
 /dist
 /coverage
 
-/.nx/cache
+/.nx/cache
+/.nx/workspace-data

apps/demo/src/_app.scss

@@ -4,16 +4,16 @@
 @use './lib/components/material-overrides';
 
 @mixin theme($theme) {
-  $config: mat.get-color-config($theme);
+  $config: mat.m2-get-color-config($theme);
   $primary-palette: map.get($config, 'primary');
   $accent-palette: map.get($config, 'accent');
   $background-palette: map.get($config, 'background');
   $foreground-palette: map.get($config, 'foreground');
 
-  $primary-color: mat.get-color-from-palette($primary-palette);
-  $accent-color: mat.get-color-from-palette($accent-palette);
-  $divider-color: mat.get-color-from-palette($foreground-palette, divider);
-  $card-color: mat.get-color-from-palette($background-palette, card);
+  $primary-color: mat.m2-get-color-from-palette($primary-palette);
+  $accent-color: mat.m2-get-color-from-palette($accent-palette);
+  $divider-color: mat.m2-get-color-from-palette($foreground-palette, divider);
+  $card-color: mat.m2-get-color-from-palette($background-palette, card);
 
   // make a new color map since @angular/material has a tedious API.
   $colors: (

apps/demo/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -7,16 +7,10 @@ import { AppComponent } from './app.component';
 import { DemoModule } from './demo';
 import { HomeModule } from './home';
 
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    BrowserModule,
-    DemoModule,
-    HomeModule,
-    HttpClientModule,
-  ],
-  bootstrap: [AppComponent],
-})
+@NgModule({ declarations: [AppComponent],
+    bootstrap: [AppComponent], imports: [AppRoutingModule,
+        BrowserAnimationsModule,
+        BrowserModule,
+        DemoModule,
+        HomeModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
 export class AppModule {}

apps/demo/src/styles.scss

@@ -11,11 +11,11 @@
 @include layout.core();
 @include mat.core();
 
-$primary: mat.define-palette(mat.$blue-palette, A400);
-$accent: mat.define-palette(mat.$orange-palette, A400);
-$warn: mat.define-palette(mat.$red-palette);
+$primary: mat.m2-define-palette(mat.$m2-blue-palette, A400);
+$accent: mat.m2-define-palette(mat.$m2-orange-palette, A400);
+$warn: mat.m2-define-palette(mat.$m2-red-palette);
 
-$dark-theme: mat.define-dark-theme(
+$dark-theme: mat.m2-define-dark-theme(
   (
     color: (
       primary: $primary,
@@ -25,7 +25,7 @@ $dark-theme: mat.define-dark-theme(
   )
 );
 
-$light-theme: mat.define-light-theme(
+$light-theme: mat.m2-define-light-theme(
   (
     color: (
       primary: $primary,