Issue/429 angular 16

.eslintrc.json

@@ -110,15 +110,22 @@
         "implicit-arrow-linebreak": "error",
         "object-curly-spacing": "error",
         "nonblock-statement-body-position": "error",
-        "rxjs/no-implicit-any-catch": "off"
+        "rxjs/no-implicit-any-catch": "off",
+        "rxjs/no-unsafe-takeuntil": [
+          "error",
+          {
+            "alias": ["takeUntil", "takeUntilDestroyed"]
+          }
+        ]
       }
     },
     {
       "files": [
         "*.html"
       ],
       "extends": [
-        "plugin:@angular-eslint/template/recommended"
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:@angular-eslint/template/accessibility"
       ],
       "rules": {}
     }

.github/workflows/workflow.yml

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

CONTRIBUTING.md

@@ -36,7 +36,7 @@ This section explains how to submit a pull request.
   <summary><strong>Development</strong></summary>
   <br>
 
-Make sure to use Node.js version 16.16.0 for contributing to SCION. We suggest 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 18.16.0 for contributing to SCION. We suggest using [Node Version Manager](https://github.com/nvm-sh/nvm) if you need different Node.js versions for other projects.
 
 For development, you can uncomment the section `PATH-OVERRIDE-FOR-DEVELOPMENT` in `tsconfig.json`. This allows running tests or serving applications without having to build dependent modules first.
 

README.md

@@ -49,6 +49,7 @@ SCION Workbench enables the creation of Angular web applications that require a
 ***
 
 ### Versions
+- `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.

apps/workbench-client-testing-app/src/app/activator/activator.module.ts

@@ -73,25 +73,6 @@ export default class ActivatorModule {
       },
     });
 
-    // Register view to navigate using the workbench router legacy API.
-    // @deprecated since version 14; API will be removed in version 16; used internally to test not to break old workbench clients
-    await this._manifestService.registerCapability<TestingAppViewCapability>({
-      type: WorkbenchCapabilities.View,
-      qualifier: {
-        component: 'router-legacy',
-        app,
-      },
-      description: '[e2e] Allows opening a microfrontend in a workbench view using the "old" router API',
-      private: false,
-      properties: {
-        path: 'test-router-legacy',
-        pinToStartPage: true,
-        title: 'Workbench Router (legacy)',
-        heading,
-        cssClass: 'e2e-test-router-legacy',
-      },
-    });
-
     // Register view to register workbench capabilities dynamically at runtime.
     await this._manifestService.registerCapability<TestingAppViewCapability>({
       type: WorkbenchCapabilities.View,

apps/workbench-client-testing-app/src/app/app.routes.ts

@@ -19,10 +19,6 @@ export const routes: Routes = [
     path: 'test-router',
     loadComponent: () => import('./router-page/router-page.component'),
   },
-  {
-    path: 'test-router-legacy',
-    loadComponent: () => import('./router-page-legacy/router-page-legacy.component'),
-  },
   {
     path: 'test-view',
     loadComponent: () => import('./view-page/view-page.component'),

apps/workbench-client-testing-app/src/app/test-pages/angular-zone-test-page/angular-zone-test-page.component.html

@@ -29,10 +29,10 @@
 
 <ng-template #test_template let-test>
   <section class="panel">
-    <label>
+    <div class="run-in-angular-checkbox">
       <sci-checkbox [(ngModel)]="test.runInAngular" class="e2e-run-inside-angular"></sci-checkbox>
       <span>Subscribe in NgZone</span>
-    </label>
+    </div>
     <button (click)="test.onTestClick()" class="e2e-subscribe">Subscribe</button>
     <output *ngFor="let emission of test.emissions" class="zone e2e-emission" [attr.data-zone]="emission.insideAngular ? 'inside-angular' : 'outside-angular'">{{emission.label}}</output>
   </section>

apps/workbench-client-testing-app/src/app/test-pages/angular-zone-test-page/angular-zone-test-page.component.scss

@@ -12,14 +12,14 @@
       flex-direction: column;
       gap: .5em;
 
-      label {
+      > div.run-in-angular-checkbox {
         display: flex;
         gap: .75em;
         align-items: center;
         user-select: none;
       }
 
-      output.zone {
+      > output.zone {
         padding: 1em;
         border-width: 1px;
         border-style: solid;

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

@@ -13,8 +13,8 @@ import {ReactiveFormsModule, UntypedFormArray, UntypedFormBuilder, UntypedFormGr
 import {ViewClosingEvent, ViewClosingListener, WorkbenchMessageBoxService, WorkbenchRouter, WorkbenchView} from '@scion/workbench-client';
 import {ActivatedRoute} from '@angular/router';
 import {UUID} from '@scion/toolkit/uuid';
-import {MonoTypeOperatorFunction, NEVER, Subject} from 'rxjs';
-import {finalize, startWith, take, takeUntil} from 'rxjs/operators';
+import {MonoTypeOperatorFunction, NEVER} from 'rxjs';
+import {finalize, startWith, take} from 'rxjs/operators';
 import {APP_INSTANCE_ID} from '../app-instance-id';
 import {SciParamsEnterComponent, SciParamsEnterModule} from '@scion/components.internal/params-enter';
 import {AsyncPipe, JsonPipe, Location, NgIf} from '@angular/common';
@@ -26,6 +26,7 @@ import {SciPropertyModule} from '@scion/components.internal/property';
 import {AppendParamDataTypePipe} from '../common/append-param-data-type.pipe';
 import {SciCheckboxModule} from '@scion/components.internal/checkbox';
 import {SciViewportModule} from '@scion/components/viewport';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 const TITLE = 'title';
 const HEADING = 'heading';
@@ -70,8 +71,6 @@ export default class ViewPageComponent implements ViewClosingListener, OnDestroy
   public form: UntypedFormGroup;
   public uuid = UUID.randomUUID();
 
-  private _destroy$ = new Subject<void>();
-
   constructor(formBuilder: UntypedFormBuilder,
               public view: WorkbenchView,
               public route: ActivatedRoute,
@@ -104,7 +103,7 @@ export default class ViewPageComponent implements ViewClosingListener, OnDestroy
     this.view.capability$
       .pipe(
         take(1),
-        takeUntil(this._destroy$),
+        takeUntilDestroyed(),
       )
       .subscribe(capability => {
         console.debug(`[ViewCapability$::first] [component=ViewPageComponent@${this.uuid}, capabilityId=${capability.metadata.id}]`);
@@ -163,7 +162,7 @@ export default class ViewPageComponent implements ViewClosingListener, OnDestroy
     this.form.get(CONFIRM_CLOSING).valueChanges
       .pipe(
         startWith(this.form.get(CONFIRM_CLOSING).value as boolean),
-        takeUntil(this._destroy$),
+        takeUntilDestroyed(),
       )
       .subscribe(confirmClosing => {
         if (confirmClosing) {
@@ -189,7 +188,7 @@ export default class ViewPageComponent implements ViewClosingListener, OnDestroy
 
   private installViewActiveStateLogger(): void {
     this.view.active$
-      .pipe(takeUntil(this._destroy$))
+      .pipe(takeUntilDestroyed())
       .subscribe(active => {
         if (active) {
           console.debug(`[ViewActivate] [component=ViewPageComponent@${this.uuid}]`);
@@ -221,6 +220,5 @@ export default class ViewPageComponent implements ViewClosingListener, OnDestroy
 
   public ngOnDestroy(): void {
     this.view.removeClosingListener(this);
-    this._destroy$.next();
   }
 }

apps/workbench-getting-started-app/src/app/todo/todo.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="todo$ | async as todo">
-  <label>Task:</label>{{todo.task}}
-  <label>Due Date:</label>{{todo.dueDate | date:'short'}}
-  <label>Notes:</label>{{todo.notes}}
+  <span>Task:</span>{{todo.task}}
+  <span>Due Date:</span>{{todo.dueDate | date:'short'}}
+  <span>Notes:</span>{{todo.notes}}
 </ng-container>