feat: angular v20 and NX v21 (#1534)

Author: hakimio

.gitignore

@@ -22,4 +22,6 @@ junit.xml
 **/.cache**/
 
 .nx/cache
-.nx/workspace-data
+.nx/workspace-data
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md

.global/integration-app.style.scss

@@ -1,44 +1,35 @@
 @use '@angular/material' as mat;
 
-$theme: mat.define-theme(
+@include mat.core();
+
+$ng-app-variable-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
+$ng-app-variable-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
+$ng-app-variable-warn: mat.m2-define-palette(mat.$m2-red-palette);
+
+$ng-app-variable-theme: mat.m2-define-light-theme(
     (
         color: (
-            theme-type: dark,
-            primary: mat.$violet-palette,
-        ),
-        typography: (
-            brand-family: 'Comic Sans',
-            bold-weight: 900,
-        ),
-        density: (
-            scale: -1,
+            primary: $ng-app-variable-primary,
+            accent: $ng-app-variable-accent,
+            warn: $ng-app-variable-warn,
         ),
+        typography: mat.m2-define-typography-config(),
+        density: -1,
     )
 );
 
-@include mat.core();
+@include mat.all-component-themes($ng-app-variable-theme);
+@include mat.typography-hierarchy($ng-app-variable-theme);
+@include mat.form-field-density(-4);
 
 html,
 body {
     height: 100%;
-
-    @include mat.core-theme($theme);
-    @include mat.button-theme($theme);
-    @include mat.core-color($theme);
-    @include mat.button-color($theme);
 }
 
 body {
     margin: 0;
-    font-family:
-        pfhighway,
-        -apple-system,
-        BlinkMacSystemFont,
-        Segoe UI,
-        Roboto,
-        Helvetica,
-        Arial,
-        sans-serif;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 a {
@@ -54,9 +45,11 @@ a {
 }
 
 .dashboard__menu {
-    background: rgb(24, 75, 170);
-    color: #fff;
-    width: 300px;
+    --mat-sidenav-container-background-color: rgb(24, 75, 170);
+    --mat-sidenav-container-text-color: #fff;
+    --mat-sidenav-container-width: 300px;
+    --mat-toolbar-container-background-color: var(--mat-sidenav-container-background-color);
+    --mat-toolbar-container-text-color: var(--mat-sidenav-container-text-color);
 }
 
 .title {
@@ -95,7 +88,7 @@ a {
     color: red;
 }
 
-.spinner.mat-progress-spinner {
+.spinner.mat-mdc-progress-spinner {
     position: absolute;
     right: 0;
 }
@@ -124,7 +117,7 @@ code {
 }
 
 .mat-divider {
-    border-top-color: rgba(241, 232, 232, 0.12);
+    --mat-divider-color: rgba(241, 232, 232, 0.12);
     width: 80%;
     margin: 0 auto !important;
 }

README.md

@@ -10,6 +10,19 @@ found in the Angular.
 
 ---
 
+### Migration to v19
+
+Check out the [migration guide](docs/introduction/migration-v19.md) when migrating to `v19` from `v18` or earlier.
+
+### Compatiblity
+
+| Angular | cdk / ngxs | Standalone Components |
+| ------- | ---------- | --------------------- |
+| 20+     | 19         | ✔️                    |
+| 18+     | 18         | ❌                    |
+
+### Packages
+
 | **Package**                                                    | **Version**                                                       | **README**                                                                                           | **Downloads**                                                                                     |
 | -------------------------------------------------------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
 | [@angular-ru/cdk](https://npmjs.com/package/@angular-ru/cdk)   | ![](https://img.shields.io/npm/v/%40angular-ru%2Fcdk/latest.svg)  | [![](https://img.shields.io/badge/Documentation--green.svg)](https://angular-ru.gitbook.io/sdk/cdk)  | [![](https://img.shields.io/npm/dw/@angular-ru/cdk)](https://npmjs.com/package/@angular-ru/cdk)   |

apps/cdk-demo/main.ts

@@ -1,13 +1,8 @@
-import {enableProdMode} from '@angular/core';
-import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {bootstrapApplication} from '@angular/platform-browser';
 
-import {environment} from './environments/environment';
-import {AppModule} from './src/app.module';
+import {AppComponent} from './src/app.component';
+import {appConfig} from './src/app.config';
 
-if (environment.production) {
-    enableProdMode();
-}
-
-platformBrowserDynamic()
-    .bootstrapModule(AppModule, {ngZoneEventCoalescing: true})
-    .catch((error: Error): void => console.error(error));
+bootstrapApplication(AppComponent, appConfig).catch((error: unknown) =>
+    console.error(error),
+);

apps/cdk-demo/polyfills.ts

@@ -6,59 +6,58 @@
     "tags": ["apps"],
     "targets": {
         "build": {
-            "executor": "@angular-devkit/build-angular:browser",
+            "executor": "@angular/build:application",
             "options": {
-                "outputPath": "dist/cdk-demo",
-                "tsConfig": "apps/cdk-demo/tsconfig.app.json",
-                "main": "apps/cdk-demo/main.ts",
+                "outputPath": {
+                    "base": "dist/cdk-demo",
+                    "browser": ""
+                },
                 "index": "apps/cdk-demo/index.html",
+                "browser": "apps/cdk-demo/main.ts",
+                "tsConfig": "apps/cdk-demo/tsconfig.app.json",
+                "inlineStyleLanguage": "scss",
                 "assets": ["apps/cdk-demo/assets"],
-                "polyfills": "apps/cdk-demo/polyfills.ts",
                 "styles": [".global/integration-app.style.scss", "apps/cdk-demo/styles.scss"],
-                "aot": false,
-                "vendorChunk": true,
-                "extractLicenses": false,
-                "buildOptimizer": false,
-                "sourceMap": true,
-                "optimization": false,
-                "namedChunks": true
+                "scripts": [],
+                "stylePreprocessorOptions": {
+                    "includePaths": ["./src"],
+                    "sass": {
+                        "silenceDeprecations": ["import"]
+                    }
+                }
             },
             "configurations": {
                 "production": {
-                    "fileReplacements": [
+                    "budgets": [
                         {
-                            "replace": "apps/cdk-demo/environments/environment.ts",
-                            "with": "apps/cdk-demo/environments/environment.prod.ts"
+                            "type": "initial",
+                            "maximumWarning": "1mb",
+                            "maximumError": "2mb"
+                        },
+                        {
+                            "type": "anyComponentStyle",
+                            "maximumWarning": "6kb"
                         }
                     ],
-                    "optimization": true,
                     "outputHashing": "all",
-                    "sourceMap": false,
-                    "namedChunks": false,
-                    "aot": true,
-                    "extractLicenses": true,
-                    "buildOptimizer": true
-                },
-                "development": {
                     "fileReplacements": [
                         {
                             "replace": "apps/cdk-demo/environments/environment.ts",
                             "with": "apps/cdk-demo/environments/environment.prod.ts"
                         }
-                    ],
+                    ]
+                },
+                "development": {
                     "optimization": false,
-                    "outputHashing": "all",
-                    "aot": true
+                    "extractLicenses": false,
+                    "sourceMap": true
                 }
             },
             "defaultConfiguration": "production",
-            "outputs": ["{projectRoot}/dist/cdk-demo"]
+            "outputs": ["{options.outputPath}"]
         },
         "serve": {
-            "executor": "@angular-devkit/build-angular:dev-server",
-            "options": {
-                "buildTarget": "cdk-demo:build"
-            },
+            "executor": "@angular/build:dev-server",
             "configurations": {
                 "production": {
                     "buildTarget": "cdk-demo:build:production"

apps/cdk-demo/project.json

@@ -1,7 +1,22 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {MatDivider, MatList, MatListItem} from '@angular/material/list';
+import {MatDrawer, MatDrawerContainer, MatDrawerContent} from '@angular/material/sidenav';
+import {MatToolbar} from '@angular/material/toolbar';
+import {RouterLink, RouterOutlet} from '@angular/router';
 
 @Component({
     selector: 'app-root',
+    imports: [
+        MatDivider,
+        MatDrawer,
+        MatDrawerContainer,
+        MatDrawerContent,
+        MatList,
+        MatListItem,
+        MatToolbar,
+        RouterLink,
+        RouterOutlet,
+    ],
     templateUrl: './app.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })

apps/cdk-demo/src/app-routing.module.ts

@@ -0,0 +1,39 @@
+import type {ApplicationConfig} from '@angular/core';
+import {
+    provideBrowserGlobalErrorListeners,
+    provideZonelessChangeDetection,
+} from '@angular/core';
+import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
+import {
+    PreloadAllModules,
+    provideRouter,
+    withComponentInputBinding,
+    withHashLocation,
+    withInMemoryScrolling,
+    withPreloading,
+    withRouterConfig,
+} from '@angular/router';
+import {provideAmountFormat} from '@angular-ru/cdk/directives';
+
+import {routes} from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        provideZonelessChangeDetection(),
+        provideBrowserGlobalErrorListeners(),
+        provideRouter(
+            routes,
+            withPreloading(PreloadAllModules),
+            withRouterConfig({
+                paramsInheritanceStrategy: 'always',
+            }),
+            withComponentInputBinding(),
+            withInMemoryScrolling({
+                scrollPositionRestoration: 'enabled',
+            }),
+            withHashLocation(),
+        ),
+        provideAnimationsAsync(),
+        provideAmountFormat(),
+    ],
+};