feat!: update to Angular 15

package.json

@@ -55,37 +55,36 @@
     ],
     "prettier": "@taiga-ui/prettier-config",
     "dependencies": {
-        "@angular/animations": "12.2.17",
-        "@angular/common": "12.2.17",
-        "@angular/compiler": "12.2.17",
-        "@angular/core": "12.2.17",
-        "@angular/forms": "12.2.17",
-        "@angular/platform-browser": "12.2.17",
-        "@angular/platform-browser-dynamic": "12.2.17",
-        "@angular/platform-server": "12.2.17",
-        "@angular/router": "12.2.17",
+        "@angular/animations": "15.2.10",
+        "@angular/common": "15.2.10",
+        "@angular/compiler": "15.2.10",
+        "@angular/core": "15.2.10",
+        "@angular/forms": "15.2.10",
+        "@angular/platform-browser": "15.2.10",
+        "@angular/platform-browser-dynamic": "15.2.10",
+        "@angular/platform-server": "15.2.10",
+        "@angular/router": "15.2.10",
         "@ng-web-apis/common": "3.0.6",
         "@ng-web-apis/universal": "3.0.7",
-        "@nguniversal/express-engine": "12.1.3",
+        "@nguniversal/express-engine": "15.2.1",
         "@tinkoff/ng-dompurify": "4.0.0",
-        "core-js": "2.6.12",
         "dompurify": "3.0.6",
         "express": "4.18.2",
         "ngx-highlightjs": "6.1.3",
-        "rxjs": "6.6.7",
+        "rxjs": "7.8.0",
         "tslib": "2.6.2",
-        "zone.js": "0.11.4"
+        "zone.js": "0.12.0"
     },
     "devDependencies": {
-        "@angular-builders/custom-webpack": "12.1.3",
-        "@angular-devkit/build-angular": "12.2.18",
-        "@angular-devkit/core": "12.2.18",
-        "@angular/cli": "12.2.18",
-        "@angular/compiler-cli": "12.2.17",
-        "@angular/language-service": "12.2.17",
+        "@angular-devkit/build-angular": "15.2.10",
+        "@angular-devkit/core": "15.2.10",
+        "@angular/cli": "15.2.10",
+        "@angular/compiler-cli": "15.2.10",
+        "@angular/language-service": "15.2.10",
         "@commitlint/cli": "18.4.3",
         "@commitlint/config-conventional": "18.4.3",
-        "@nguniversal/builders": "12.1.3",
+        "@nguniversal/builders": "15.2.1",
+        "@nx/angular": "17.1.3",
         "@nx/jest": "17.1.3",
         "@nx/node": "17.1.3",
         "@nx/workspace": "17.1.3",
@@ -102,20 +101,19 @@
         "jest": "29.7.0",
         "jest-preset-angular": "12.2.6",
         "lerna": "8.0.0",
-        "lint-staged": "15.2.0",
-        "ng-packagr": "12.2.7",
+        "lint-staged": "15.1.0",
+        "ng-packagr": "15.2.2",
         "nx": "17.1.3",
         "prettier": "3.1.0",
         "stylelint": "15.11.0",
-        "terser-webpack-plugin": "5.3.9",
         "ts-jest": "29.1.1",
         "ts-node": "10.9.1",
         "tsickle": "0.46.3",
         "tslint": "6.1.3",
         "tsutils": "3.21.0",
-        "typescript": "4.3.5",
+        "typescript": "4.8.2",
         "wait-on": "7.2.0",
-        "webpack": "5.89.0"
+        "webpack": "5.76.1"
     },
     "engines": {
         "node": ">= 10",

projects/demo/project.json

@@ -6,7 +6,7 @@
     "prefix": "app",
     "targets": {
         "build": {
-            "executor": "@angular-builders/custom-webpack:browser",
+            "executor": "@nx/angular:webpack-browser",
             "options": {
                 "customWebpackConfig": {
                     "path": "projects/demo/webpack.config.ts"
@@ -16,9 +16,8 @@
                 "outputPath": "dist/demo/browser",
                 "index": "projects/demo/src/index.html",
                 "main": "projects/demo/src/main.browser.ts",
-                "polyfills": "projects/demo/src/polyfills.ts",
-                "tsConfig": "tsconfig.json",
-                "aot": false,
+                "polyfills": ["zone.js"],
+                "tsConfig": "projects/demo/tsconfig.browser.json",
                 "assets": ["projects/demo/src/favicon.ico"],
                 "styles": ["node_modules/highlight.js/styles/idea.css", "projects/demo/src/styles.css"],
                 "scripts": [],
@@ -35,7 +34,6 @@
                     "outputHashing": "all",
                     "sourceMap": false,
                     "namedChunks": false,
-                    "aot": true,
                     "extractLicenses": true,
                     "vendorChunk": false,
                     "buildOptimizer": true,
@@ -50,13 +48,13 @@
             }
         },
         "serve": {
-            "executor": "@angular-builders/custom-webpack:dev-server",
+            "executor": "@nx/angular:webpack-dev-server",
             "options": {
-                "browserTarget": "demo:build"
+                "buildTarget": "demo:build"
             },
             "configurations": {
                 "production": {
-                    "browserTarget": "demo:build:production"
+                    "buildTarget": "demo:build:production"
                 }
             }
         },
@@ -93,7 +91,7 @@
         "prerender": {
             "executor": "@nguniversal/builders:prerender",
             "options": {
-                "browserTarget": "demo:build:production",
+                "buildTarget": "demo:build:production",
                 "serverTarget": "demo:server:production",
                 "routes": ["/"]
             },

projects/demo/src/app/app.browser.module.ts

@@ -4,22 +4,22 @@ import {BrowserModule} from '@angular/platform-browser';
 import {NgDompurifySanitizer} from '@tinkoff/ng-dompurify';
 import {HighlightModule, HIGHLIGHT_OPTIONS} from 'ngx-highlightjs';
 import {AppComponent} from './app.component';
-import {ComboBoxDemoModule} from './modules/comboBoxDemo/comboBoxDemo.module';
-import {InputDemoModule} from './modules/inputDemo/inputDemo.module';
-import {MenuDemoModule} from './modules/menuDemo/menuDemo.module';
-import {StarWarsModule} from './modules/starWars/starWars.module';
 import {StarWarsDemoModule} from './modules/starWarsDemo/starWarsDemo.module';
-import {TabsDemoModule} from './modules/tabsDemo/tabsDemo.module';
+import {StarWarsComponent} from "./modules/starWars/starWars.component";
+import {ComboBoxDemoComponent} from "./modules/comboBoxDemo/comboBoxDemo.component";
+import {InputDemoComponent} from "./modules/inputDemo/inputDemo.component";
+import {MenuDemoComponent} from "./modules/menuDemo/menuDemo.component";
+import {TabsDemoComponent} from "./modules/tabsDemo/tabsDemo.component";
 
 @NgModule({
     bootstrap: [AppComponent],
     imports: [
         BrowserModule.withServerTransition({appId: 'demo'}),
-        InputDemoModule,
-        MenuDemoModule,
-        ComboBoxDemoModule,
-        TabsDemoModule,
-        StarWarsModule,
+        InputDemoComponent,
+        MenuDemoComponent,
+        ComboBoxDemoComponent,
+        TabsDemoComponent,
+        StarWarsComponent,
         StarWarsDemoModule,
         HighlightModule,
     ],
@@ -29,6 +29,11 @@ import {TabsDemoModule} from './modules/tabsDemo/tabsDemo.module';
             provide: HIGHLIGHT_OPTIONS,
             useValue: {
                 coreLibraryLoader: () => import('highlight.js/lib/core'),
+                languages: {
+                    xml: () => import('highlight.js/lib/languages/xml'),
+                    typescript: () => import('highlight.js/lib/languages/typescript'),
+                    less: () => import('highlight.js/lib/languages/less'),
+                }
             },
         },
         {

projects/demo/src/app/modules/comboBox/comboBox.component.ts

@@ -5,14 +5,19 @@ import {
     Input,
     Output,
 } from '@angular/core';
-import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+import {PolymorpheusContent, PolymorpheusOutletDirective} from '@tinkoff/ng-polymorpheus';
 import {ContextWithActive} from '../interfaces';
+import {CommonModule} from "@angular/common";
+import {InputComponent} from "../input/input.component";
+import {MenuComponent} from "../menu/menu.component";
 
 @Component({
     selector: 'app-combo-box',
     templateUrl: './comboBox.template.html',
     styleUrls: ['./comboBox.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [CommonModule, InputComponent, MenuComponent, PolymorpheusOutletDirective]
 })
 export class ComboBoxComponent<T> {
     stringValue = '';

projects/demo/src/app/modules/comboBoxDemo/comboBoxDemo.component.ts

@@ -4,12 +4,17 @@ import * as html from '../comboBox/comboBox.template.html?raw';
 
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {AbstractDemo} from '../abstractDemo';
+import {ComboBoxComponent} from "../comboBox/comboBox.component";
+import {TabsComponent} from "../tabs/tabs.component";
+import {HighlightModule} from "ngx-highlightjs";
 
 @Component({
     selector: 'app-combo-box-demo',
     templateUrl: './comboBoxDemo.template.html',
     styleUrls: ['./comboBoxDemo.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [ComboBoxComponent, TabsComponent, HighlightModule]
 })
 export class ComboBoxDemoComponent extends AbstractDemo {
     readonly items = [

projects/demo/src/app/modules/input/input.component.ts

@@ -5,13 +5,16 @@ import {
     Input,
     Output,
 } from '@angular/core';
-import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+import {PolymorpheusContent, PolymorpheusOutletDirective} from '@tinkoff/ng-polymorpheus';
+import {FormsModule} from "@angular/forms";
 
 @Component({
     selector: 'app-input',
     templateUrl: './input.template.html',
     styleUrls: ['./input.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [FormsModule, PolymorpheusOutletDirective]
 })
 export class InputComponent {
     @Input()

projects/demo/src/app/modules/inputDemo/inputDemo.component.ts

@@ -4,12 +4,17 @@ import * as html from '../input/input.template.html?raw';
 
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {AbstractDemo} from '../abstractDemo';
+import {HighlightModule} from "ngx-highlightjs";
+import {InputComponent} from "../input/input.component";
+import {TabsComponent} from "../tabs/tabs.component";
 
 @Component({
     selector: 'app-input-demo',
     templateUrl: './inputDemo.template.html',
     styleUrls: ['./inputDemo.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [HighlightModule, InputComponent, TabsComponent],
 })
 export class InputDemoComponent extends AbstractDemo {
     readonly searchIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">

projects/demo/src/app/modules/menu/menu.component.ts

@@ -6,14 +6,20 @@ import {
     Input,
     Output,
 } from '@angular/core';
-import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+import {
+    PolymorpheusContent,
+    PolymorpheusOutletDirective,
+} from '@tinkoff/ng-polymorpheus';
 import {ContextWithActive} from '../interfaces';
+import {CommonModule} from "@angular/common";
 
 @Component({
     selector: 'app-menu',
     templateUrl: './menu.template.html',
     styleUrls: ['./menu.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [CommonModule, PolymorpheusOutletDirective]
 })
 export class MenuComponent<T> {
     private activeItem: T | null = null;