feat: upgrade to Angular 19

apps/demo/project.json

@@ -5,12 +5,12 @@
     "sourceRoot": "apps/demo/src",
     "targets": {
         "build": {
-            "executor": "@angular-devkit/build-angular:application",
+            "executor": "@angular/build:application",
             "options": {
                 "outputPath": "dist/demo",
                 "index": "apps/demo/src/index.html",
                 "browser": "apps/demo/src/main.ts",
-                "polyfills": ["zone.js"],
+                "polyfills": [],
                 "tsConfig": "apps/demo/tsconfig.app.json",
                 "baseHref": "./",
                 "assets": [
@@ -46,7 +46,7 @@
             "defaultConfiguration": "production"
         },
         "serve": {
-            "executor": "@angular-devkit/build-angular:dev-server",
+            "executor": "@angular/build:dev-server",
             "configurations": {
                 "production": {
                     "buildTarget": "demo:build:production"

apps/demo/server.ts

@@ -2,7 +2,7 @@ import {dirname, join, resolve} from 'node:path';
 import {fileURLToPath} from 'node:url';
 
 import {APP_BASE_HREF} from '@angular/common';
-import {CommonEngine} from '@angular/ssr';
+import {CommonEngine} from '@angular/ssr/node';
 import {provideLocation, provideUserAgent} from '@ng-web-apis/universal';
 import express from 'express';
 

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

@@ -1,12 +1,11 @@
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
 import {RouterOutlet} from '@angular/router';
 import {TuiRoot} from '@taiga-ui/core';
-import {TuiEditor, TuiEditorSocket} from '@taiga-ui/editor';
 
 @Component({
     standalone: true,
-    selector: 'app',
-    imports: [RouterOutlet, TuiEditor, TuiEditorSocket, TuiRoot],
+    selector: 'app-root',
+    imports: [RouterOutlet, TuiRoot],
     templateUrl: './app.component.html',
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -1,5 +1,9 @@
 import type {ApplicationConfig, Injector} from '@angular/core';
-import {importProvidersFrom, INJECTOR} from '@angular/core';
+import {
+    importProvidersFrom,
+    INJECTOR,
+    provideExperimentalZonelessChangeDetection,
+} from '@angular/core';
 import {provideClientHydration} from '@angular/platform-browser';
 import {provideAnimations} from '@angular/platform-browser/animations';
 import {provideRouter} from '@angular/router';
@@ -10,6 +14,7 @@ import {TUI_SANITIZER} from '@taiga-ui/legacy';
 
 export const appConfig: ApplicationConfig = {
     providers: [
+        provideExperimentalZonelessChangeDetection(),
         provideClientHydration(),
         provideAnimations(),
         provideRouter([

apps/demo/src/app/home/home.component.html

@@ -48,7 +48,7 @@ <h2 class="title">
         }
     </div>
     <div class="controls">
-        <label>
+        <label class="label">
             <input
                 size="m"
                 tuiSwitch

apps/demo/src/app/home/home.component.less

@@ -40,8 +40,8 @@
     justify-content: space-between;
 }
 
-.button[data-size][data-shape],
-.error[data-size][data-shape] {
+.button[data-size],
+.error[data-size] {
     .transition(~'color, background');
 
     background: var(--tui-background-base-alt);
@@ -54,7 +54,7 @@
     }
 }
 
-.error[data-size][data-shape] {
+.error[data-size] {
     color: var(--tui-text-negative);
 
     &:hover,
@@ -131,12 +131,12 @@ tui-dialog[data-appearance='call'][data-size] {
         color: #fff;
     }
 
-    .missed [data-appearance='custom'] {
+    .missed[data-appearance='custom'] {
         background: rgb(210, 58, 71);
         transform: rotate(135deg);
     }
 
-    .income [data-appearance='custom'] {
+    .income[data-appearance='custom'] {
         background: rgb(39, 187, 100);
     }
 
@@ -146,6 +146,10 @@ tui-dialog[data-appearance='call'][data-size] {
     }
 }
 
+.label {
+    display: flex;
+}
+
 @keyframes moveGradient {
     50% {
         background-position: 100% 50%;

apps/demo/src/app/home/home.component.ts

@@ -20,8 +20,8 @@ import {
     TuiLabel,
     TuiLink,
 } from '@taiga-ui/core';
-import {NgDompurifyPipe, NgDompurifySanitizer} from '@taiga-ui/dompurify';
-import {TuiEditor, TuiEditorSocket, TuiEditorTool} from '@taiga-ui/editor';
+import {NgDompurifySanitizer} from '@taiga-ui/dompurify';
+import {TuiEditor, TuiEditorTool} from '@taiga-ui/editor';
 import {TuiAccordion, TuiCheckbox, TuiPush, TuiSlider, TuiSwitch} from '@taiga-ui/kit';
 import {
     TuiInputDateModule,
@@ -35,14 +35,12 @@ import {
     imports: [
         CommonModule,
         FormsModule,
-        NgDompurifyPipe,
         TuiAccordion,
         TuiButton,
         TuiCalendar,
         TuiCheckbox,
         TuiDropdown,
         TuiEditor,
-        TuiEditorSocket,
         TuiHint,
         TuiIcon,
         TuiInputDateModule,

apps/demo/src/environments/environment.ts

@@ -1,16 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
     production: false,
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

apps/demo/src/index.html

@@ -30,7 +30,7 @@
         />
         <meta
             content="yes"
-            name="apple-mobile-web-app-capable"
+            name="mobile-web-app-capable"
         />
         <meta
             content="angular angularjs component library ui kit directive service typescript decorator javascript opensource open source open-source ng"
@@ -79,7 +79,6 @@
         />
     </head>
     <body>
-        <!-- eslint-disable-next-line @angular-eslint/template/prefer-self-closing-tags -->
-        <app></app>
+        <app-root></app-root>
     </body>
 </html>