Angular 19

.github/workflows/manual-workflow.publish-typedoc.yml

@@ -1,7 +1,7 @@
 name: Publish TypeDoc for @scion/workbench-client
 on: workflow_dispatch
 env:
-  NODE_VERSION: 20.14.0
+  NODE_VERSION: 22.11.0
 jobs:
   install:
     name: 'Installing NPM modules'

.github/workflows/workflow.yml

@@ -1,7 +1,7 @@
 name: Continuous Integration and Delivery
 on: [push, pull_request, workflow_dispatch]
 env:
-  NODE_VERSION: 20.14.0
+  NODE_VERSION: 22.11.0
 jobs:
   install:
     name: 'Installing NPM modules'

CONTRIBUTING.md

@@ -40,7 +40,7 @@ Before you start development, we recommend that you build all projects using the
 
 **Node Version**
 
-Make sure to use Node.js version `20.14.0` for contributing to SCION. We recommend using [Node Version Manager](https://github.com/nvm-sh/nvm) if you need different Node.js versions for other projects.
+Make sure to use Node.js version `22.11.0` for contributing to SCION. We recommend using [Node Version Manager](https://github.com/nvm-sh/nvm) if you need different Node.js versions for other projects.
 
 **Disable Angular Cache**
 

README.md

@@ -46,18 +46,12 @@ SCION Workbench enables the creation of Angular web applications that require a
 ***
 
 ### Versions
+- `v19.0.0-beta.1` and newer are compatible with Angular version 19.x.
 - `v18.0.0-beta.1` and newer are compatible with Angular version 18.x.
-- `v17.0.0-beta.1` and newer are compatible with Angular version 17.x.
-- `v16.0.0-beta.1` and newer are compatible with Angular version 16.x.
-- `v15.0.0-beta.1` and newer are compatible with Angular version 15.x.
-- `v14.0.0-beta.1` and newer are compatible with Angular version 14.x.
-- `v13.0.0-beta.1` and newer are compatible with Angular version 13.x.
-- `v12.0.0-beta.1` and newer are compatible with Angular version 12.x.
-- `v11.0.0-beta.3` provides built-in microfrontend support from the [SCION Microfrontend Platform][link-scion-microfrontend-platform].
-- `v11.0.0-beta.1` and newer are compatible with Angular version 11.x.
-- `v0.0.0-beta.35` and newer are compatible with Angular version 10.x.
-- `v0.0.0-beta.33` and newer are compatible with Angular version 9.x.
-- `v0.0.0-beta.23` to `v0.0.0-beta.32` is only compatible with Angular version 8.x.
+- `v17.0.0-beta.1` and newer are compatible with Angular version 17.x. 
+
+Older versions are no longer supported.
+***
 
 [![@scion/workbench version](https://img.shields.io/npm/v/@scion/workbench/latest?label=%40scion%2Fworkbench)][link-workbench-download]
 [![@scion/workbench-client version](https://img.shields.io/npm/v/@scion/workbench-client/latest?label=%40scion%2Fworkbench-client)][link-workbench-client-download]

apps/workbench-testing-app/src/app/app.component.ts

@@ -14,7 +14,7 @@ import {NavigationCancel, NavigationEnd, NavigationError, Router, RouterOutlet}
 import {UUID} from '@scion/toolkit/uuid';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {DOCUMENT} from '@angular/common';
-import {WORKBENCH_ID, WorkbenchService, WorkbenchStartup, WorkbenchViewMenuItemDirective} from '@scion/workbench';
+import {WORKBENCH_ID, WorkbenchService, WorkbenchStartup} from '@scion/workbench';
 import {HeaderComponent} from './header/header.component';
 import {fromEvent} from 'rxjs';
 import {subscribeIn} from '@scion/toolkit/operators';
@@ -28,7 +28,6 @@ import {SettingsService} from './settings.service';
   imports: [
     RouterOutlet,
     HeaderComponent,
-    WorkbenchViewMenuItemDirective,
   ],
 })
 export class AppComponent implements DoCheck {

apps/workbench-testing-app/src/app/layout-page/tables/add-parts/add-parts.component.ts

@@ -10,7 +10,6 @@
 
 import {Component, forwardRef, Input} from '@angular/core';
 import {AbstractControl, ControlValueAccessor, FormControl, FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, NonNullableFormBuilder, ReactiveFormsModule, ValidationErrors, Validator, Validators} from '@angular/forms';
-import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {noop} from 'rxjs';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
@@ -25,7 +24,6 @@ import {UUID} from '@scion/toolkit/uuid';
   standalone: true,
   imports: [
     ReactiveFormsModule,
-    SciFormFieldComponent,
     SciCheckboxComponent,
     SciMaterialIconDirective,
   ],

apps/workbench-testing-app/src/app/layout-page/tables/add-views/add-views.component.ts

@@ -13,7 +13,6 @@ import {noop} from 'rxjs';
 import {AbstractControl, ControlValueAccessor, FormControl, FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, NonNullableFormBuilder, ReactiveFormsModule, ValidationErrors, Validator, Validators} from '@angular/forms';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
-import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {SciMaterialIconDirective} from '@scion/components.internal/material-icon';
 import {CssClassComponent} from '../../../css-class/css-class.component';
 import {UUID} from '@scion/toolkit/uuid';
@@ -26,7 +25,6 @@ import {UUID} from '@scion/toolkit/uuid';
   imports: [
     ReactiveFormsModule,
     SciCheckboxComponent,
-    SciFormFieldComponent,
     SciMaterialIconDirective,
     CssClassComponent,
   ],

apps/workbench-testing-app/src/app/layout-page/tables/navigate-views/navigate-views.component.ts

@@ -12,8 +12,6 @@ import {Component, forwardRef, Input} from '@angular/core';
 import {noop} from 'rxjs';
 import {AbstractControl, ControlValueAccessor, FormControl, FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, NonNullableFormBuilder, ReactiveFormsModule, ValidationErrors, Validator, Validators} from '@angular/forms';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
-import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
-import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {SciMaterialIconDirective} from '@scion/components.internal/material-icon';
 import {Commands, NavigationData, NavigationState} from '@scion/workbench';
 import {RouterCommandsComponent} from '../../../router-commands/router-commands.component';
@@ -28,8 +26,6 @@ import {RecordComponent} from '../../../record/record.component';
   standalone: true,
   imports: [
     ReactiveFormsModule,
-    SciCheckboxComponent,
-    SciFormFieldComponent,
     SciMaterialIconDirective,
     RouterCommandsComponent,
     RecordComponent,

apps/workbench-testing-app/src/app/menu/menu.component.ts

@@ -12,7 +12,7 @@ import {Component, DestroyRef, HostListener, Inject, InjectionToken, Injector, O
 import {OverlayRef} from '@angular/cdk/overlay';
 import {fromEvent} from 'rxjs';
 import {MenuItem, MenuItemSeparator} from './menu-item';
-import {KeyValuePipe, NgClass} from '@angular/common';
+import {NgClass} from '@angular/common';
 import {InstanceofPipe} from '../common/instanceof.pipe';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {SciMaterialIconDirective} from '@scion/components.internal/material-icon';
@@ -29,7 +29,6 @@ export const MENU_ITEMS = new InjectionToken<Array<MenuItem | MenuItemSeparator>
   standalone: true,
   imports: [
     NgClass,
-    KeyValuePipe,
     InstanceofPipe,
     SciMaterialIconDirective,
   ],

apps/workbench-testing-app/src/app/popup-page/popup-page.component.ts

@@ -13,8 +13,6 @@ import {Popup} from '@scion/workbench';
 import {UUID} from '@scion/toolkit/uuid';
 import {SciViewportComponent} from '@scion/components/viewport';
 import {FormsModule, NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
-import {NullIfEmptyPipe} from '../common/null-if-empty.pipe';
-import {JsonPipe} from '@angular/common';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {SciAccordionComponent, SciAccordionItemDirective} from '@scion/components.internal/accordion';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
@@ -25,9 +23,7 @@ import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
   styleUrls: ['./popup-page.component.scss'],
   standalone: true,
   imports: [
-    JsonPipe,
     FormsModule,
-    NullIfEmptyPipe,
     SciViewportComponent,
     SciFormFieldComponent,
     SciAccordionComponent,

apps/workbench-testing-app/src/app/skeletons/chart-skeleton/chart-skeleton.component.ts

@@ -12,7 +12,6 @@ import {Component, HostListener, inject, signal, WritableSignal} from '@angular/
 import {Skeletons} from '../skeletons.util';
 import {NgClass} from '@angular/common';
 import {WorkbenchView} from '@scion/workbench';
-import {SciMaterialIconDirective} from '@scion/components.internal/material-icon';
 import {Chart} from './chart';
 
 /**
@@ -27,7 +26,6 @@ import {Chart} from './chart';
   standalone: true,
   imports: [
     NgClass,
-    SciMaterialIconDirective,
   ],
 })
 export class ChartSkeletonComponent {

apps/workbench-testing-app/src/app/start-page/start-page.component.ts

@@ -9,7 +9,7 @@
  */
 
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component, effect, HostBinding, HostListener, Optional, ViewChild} from '@angular/core';
-import {WorkbenchConfig, WorkbenchRouteData, WorkbenchRouter, WorkbenchRouterLinkDirective, WorkbenchService, WorkbenchView} from '@scion/workbench';
+import {WorkbenchConfig, WorkbenchRouteData, WorkbenchRouter, WorkbenchService, WorkbenchView} from '@scion/workbench';
 import {Capability, IntentClient, ManifestService} from '@scion/microfrontend-platform';
 import {Observable, of} from 'rxjs';
 import {WorkbenchCapabilities, WorkbenchPopupService as WorkbenchClientPopupService, WorkbenchRouter as WorkbenchClientRouter, WorkbenchViewCapability} from '@scion/workbench-client';
@@ -40,7 +40,6 @@ import {SciTabbarComponent, SciTabDirective} from '@scion/components.internal/ta
     SciTabDirective,
     FilterPipe,
     ArrayConcatPipe,
-    WorkbenchRouterLinkDirective,
   ],
 })
 export default class StartPageComponent {

apps/workbench-testing-app/src/app/test-pages/non-standalone-view-test-page/non-standalone-view-test-page.component.ts

@@ -15,7 +15,7 @@ import {WorkbenchView} from '@scion/workbench';
   selector: 'app-non-standalone-view-test-page',
   templateUrl: './non-standalone-view-test-page.component.html',
   styleUrls: ['./non-standalone-view-test-page.component.scss'],
-  standalone: false, // DO NOT CHANGE because used to test non-standalone components
+  standalone: false, // eslint-disable-line @angular-eslint/prefer-standalone
 })
 export class NonStandaloneViewTestPageComponent {
 

apps/workbench-testing-app/src/app/view-page/view-page.component.ts

@@ -16,7 +16,7 @@ import {ActivatedRoute} from '@angular/router';
 import {UUID} from '@scion/toolkit/uuid';
 import {FormsModule, NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
 import {Arrays} from '@scion/toolkit/util';
-import {AsyncPipe, NgClass} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {NullIfEmptyPipe} from '../common/null-if-empty.pipe';
 import {JoinPipe} from '../common/join.pipe';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
@@ -34,7 +34,6 @@ import {CanClose} from '@scion/workbench-client';
   styleUrls: ['./view-page.component.scss'],
   standalone: true,
   imports: [
-    NgClass,
     AsyncPipe,
     FormsModule,
     ReactiveFormsModule,
@@ -118,7 +117,7 @@ export default class ViewPageComponent {
       else {
         console.debug(`[ViewDeactivate] [component=ViewPageComponent@${this.uuid}]`);
       }
-    });
+    }, {forceRoot: true});
   }
 
   private installCssClassUpdater(): void {

apps/workbench-testing-app/src/app/workbench/workbench.component.ts

@@ -12,7 +12,6 @@ import {Component, effect, OnDestroy, untracked} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {distinct, map} from 'rxjs/operators';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {AsyncPipe} from '@angular/common';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {WorkbenchComponent as ScionWorkbenchComponent, WorkbenchDialogService, WorkbenchPart, WorkbenchPartActionDirective, WorkbenchRouter, WorkbenchRouterLinkDirective, WorkbenchService, WorkbenchView, WorkbenchViewMenuItemDirective} from '@scion/workbench';
 import {SciMaterialIconDirective} from '@scion/components.internal/material-icon';
@@ -25,7 +24,6 @@ import {ViewInfoDialogComponent} from '../view-info-dialog/view-info-dialog.comp
   templateUrl: './workbench.component.html',
   standalone: true,
   imports: [
-    AsyncPipe,
     SciMaterialIconDirective,
     ScionWorkbenchComponent,
     WorkbenchPartActionDirective,

apps/workbench-testing-app/src/styles-base-href-webpack.scss

@@ -1,4 +1,4 @@
-// TODO [Angular 19] remove this file and build targets `workbench-testing-app:build-basehref-webpack` and `workbench-testing-app:serve:development-basehref-webpack` when `@angular-devkit/build-angular:browser` builder is deprecated
+// TODO [Angular 20] remove this file and build targets `workbench-testing-app:build-basehref-webpack` and `workbench-testing-app:serve:development-basehref-webpack` when `@angular-devkit/build-angular:browser` builder is deprecated
 @use '@scion/workbench' with (
   $icon-font: (
     directory: '^fonts'