feat: standalone components and pipes; root providers instead of forRoot(); removal of ngModules

Author: hakimio

.global/integration-app.style.scss

@@ -1,44 +1,33 @@
 @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,
         ),
+        density: -1,
     )
 );
 
-@include mat.core();
+@include mat.all-component-themes($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 {
@@ -57,6 +46,8 @@ a {
     --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 {

apps/cdk-demo/main.ts

@@ -1,13 +1,8 @@
-import {enableProdMode} from '@angular/core';
-import {platformBrowser} from '@angular/platform-browser';
+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();
-}
-
-platformBrowser()
-    .bootstrapModule(AppModule, {ngZoneEventCoalescing: true})
-    .catch((error: unknown): void => console.error(error));
+bootstrapApplication(AppComponent, appConfig).catch((error: unknown) =>
+    console.error(error),
+);

apps/cdk-demo/polyfills.ts

@@ -15,7 +15,6 @@
                 "index": "apps/cdk-demo/index.html",
                 "browser": "apps/cdk-demo/main.ts",
                 "tsConfig": "apps/cdk-demo/tsconfig.app.json",
-                "polyfills": ["apps/cdk-demo/polyfills.ts"],
                 "inlineStyleLanguage": "scss",
                 "assets": ["apps/cdk-demo/assets"],
                 "styles": [".global/integration-app.style.scss", "apps/cdk-demo/styles.scss"],

apps/cdk-demo/project.json

@@ -1,8 +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({
-    standalone: false,
     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(),
+    ],
+};

apps/cdk-demo/src/app.component.ts

@@ -0,0 +1,31 @@
+import type {Routes} from '@angular/router';
+import {provideInputFilter} from '@angular-ru/cdk/directives';
+
+import {REG_EXP_ONLY_NUMBERS} from './samples/guide/properties/constants';
+
+export const routes: Routes = [
+    {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'samples',
+    },
+    {
+        path: 'samples',
+        children: [
+            {
+                path: '',
+                pathMatch: 'full',
+                redirectTo: 'guide',
+            },
+            {
+                path: 'guide',
+                loadComponent: async () => import('./samples/guide/guide.component'),
+                providers: [
+                    provideInputFilter({
+                        default: REG_EXP_ONLY_NUMBERS,
+                    }),
+                ],
+            },
+        ],
+    },
+];

apps/cdk-demo/src/app.config.ts

@@ -1,16 +1,25 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
+import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
+import {MatFormField, MatInput, MatLabel} from '@angular/material/input';
+import {AmountFormat, InputFilter} from '@angular-ru/cdk/directives';
 
 import {REG_EXP_ONLY_NUMBERS} from './properties/constants';
 
 @Component({
-    standalone: false,
     selector: 'guide',
+    imports: [
+        AmountFormat,
+        InputFilter,
+        MatFormField,
+        MatInput,
+        MatLabel,
+        ReactiveFormsModule,
+    ],
     templateUrl: './guide.component.html',
     styleUrls: ['./guide.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class GuideComponent {
+export default class GuideComponent {
     public value = 'abc';
     public valueNumbers = '123';
     public filterRegExp = /[a-z]+/;