deps(platform): update project workspace to Angular 13 and migrate @s…

…cion/microfrontend-platform to RxJS 7.5 For more information, refer to https://github.com/angular/angular/blob/master/CHANGELOG.md#1312-2022-01-12 or https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296. closes #108 BREAKING CHANGE: Upgrading @scion/microfrontend-platform to RxJS 7.x introduced a breaking change. The breaking change only refers to updating RxJS to version 7.5. API and communication protocol have not changed or are backward compatible. Host and clients can be updated independently to the new version. To migrate: - migrate your application to RxJS 7.5; for detailed migration instructions, refer to https://rxjs.dev/6-to-7-change-summary.
SchweizerischeBundesbahnen · Mar 18, 2022 · c194c5a · c194c5a
1 parent 3598de6
commit c194c5a
Show file tree

Hide file tree

Showing 92 changed files with 27,331 additions and 14,919 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -17,7 +17,8 @@ What kind of change does this PR introduce?
 - [ ] Refactoring (changes that neither fixes a bug nor adds a feature)
 - [ ] Performance (changes that improve performance)
 - [ ] Test (adding missing tests, refactoring tests; no production code change)
-- [ ] Chore (other changes like formatting, updating the license, updating dependencies, removal of deprecations, etc)
+- [ ] Chore (other changes like formatting, updating the license, removal of deprecations, etc)
+- [ ] Deps (changes related to updating dependencies)
 - [ ] CI (changes to our CI configuration files and scripts)
 - [ ] Revert (revert of a previous commit)
 - [ ] Release (publish a new release)

diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml
@@ -1,7 +1,7 @@
 name: Continuous Integration and Delivery
 on: [push, pull_request]
 env:
-  NODE_VERSION: 14.17.0
+  NODE_VERSION: 16.14.0
 jobs:
   install:
     name: 'Installing NPM modules'

diff --git a/.gitignore b/.gitignore
@@ -1,48 +1,42 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
-# compiled output
+# Compiled output
 /dist
 /tmp
 /out-tsc
-# Only exists if Bazel was run
 /bazel-out
 
-# dependencies
+# Node
 **/node_modules
-
-# profiling files
-chrome-profiler-events*.json
+npm-debug.log
+yarn-error.log
 
 # IDEs and editors
-/.idea
+.idea/
 .project
 .classpath
 .c9/
 *.launch
 .settings/
 *.sublime-workspace
 
-# IDE - VSCode
+# Visual Studio Code
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
 .history/*
 
-# misc
-/.sass-cache
+# Miscellaneous
+/.angular/cache
+.sass-cache/
 /connect.lock
 /coverage
 /libpeerconnection.log
-npm-debug.log
-yarn-error.log
 testem.log
 /typings
 
-# System Files
+# System files
 .DS_Store
 Thumbs.db
-
-# Deployers
-.vercel
diff --git a/CONTRIBUTING.md b/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 14.17.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 16.14.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.
 
@@ -146,7 +146,8 @@ Each commit message consists of a **header**, a **summary** and a **footer**.  T
 - `refactor`: changes that neither fixes a bug nor adds a feature
 - `perf`: changes that improve performance
 - `test`: adding missing tests, refactoring tests; no production code change
-- `chore`: other changes like formatting, updating the license, updating dependencies, removal of deprecations, etc
+- `chore`: other changes like formatting, updating the license, removal of deprecations, etc
+- `deps`: changes related to updating dependencies
 - `ci`: changes to our CI configuration files and scripts
 - `revert`: revert of a previous commit
 - `release`: publish a new release
@@ -249,21 +250,10 @@ We have the following microfrontend-platform related packages:
 </details>
 
 <details>
-  <summary><strong>Releasing Policy</strong></summary>
+  <summary><strong>Versioning</strong></summary>
   <br>
-
-SCION follows the semantic versioning scheme (SemVer) for its releases. In this scheme, a release is represented by three numbers: `MAJOR.MINOR.PATCH`. For example, version `1.5.3` indicates major version `1`, minor version `5`, and patch level `3`.
-
-**Major Version:**\
-The major version number is incremented when introducing any backwards incompatible changes to the API.
-
-**Minor Version**\
-The minor version number is incremented when introducting some new, backwards compatible functionality.
-
-**Patch Level**\
-The patch or maintenance level is incremented when fixing bugs.
 
-In the development of a new major release, we usually release pre-releases and tag them with the beta tag (`-beta.x`). A beta pre-release is a snapshot of current development, so it is potentially unstable and incomplete. Before releasing the major version, we start releasing one or more release candidates, which we tag with the rc tag (`-rc.x`). We will publish the official and stable major release if the platform is working as expected and we do not find any critical problems.  
+SCION Microfrontend Platform follows the semantic versioning scheme (SemVer) for its releases. For more information, see our [version policy][link-versioning].
 
 </details>
 
@@ -304,6 +294,7 @@ This chapter describes the tasks to publish a new release to NPM.
 
 [link-getting-started-guide-repo]: https://github.com/SchweizerischeBundesbahnen/scion-microfrontend-platform-getting-started
 [link-github-actions-workflow]: https://github.com/SchweizerischeBundesbahnen/scion-microfrontend-platform/actions
+[link-versioning]: /docs/site/versioning.md
 
 [menu-home]: /README.md
 [menu-projects-overview]: /docs/site/projects-overview.md

diff --git a/apps/microfrontend-platform-devtools/.browserslistrc b/apps/microfrontend-platform-devtools/.browserslistrc
@@ -24,4 +24,3 @@ last 2 Edge major versions
 last 2 Safari major versions
 last 2 iOS major versions
 Firefox ESR
-not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
diff --git a/apps/microfrontend-platform-devtools/src/app/app-details/app-details.component.ts b/apps/microfrontend-platform-devtools/src/app/app-details/app-details.component.ts
@@ -10,7 +10,7 @@
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, ViewChild} from '@angular/core';
 import {BehaviorSubject, MonoTypeOperatorFunction, Observable, Subject} from 'rxjs';
 import {Application, Capability, Intention} from '@scion/microfrontend-platform';
-import {distinctUntilChanged, expand, filter, map, mapTo, switchMap, take, takeUntil} from 'rxjs/operators';
+import {distinctUntilChanged, expand, filter, map, switchMap, take, takeUntil} from 'rxjs/operators';
 import {DevToolsManifestService} from '../dev-tools-manifest.service';
 import {ActivatedRoute, NavigationEnd, Router, UrlSegmentGroup} from '@angular/router';
 import {filterManifestObjects} from '../manifest-object-filter.utils';
@@ -69,7 +69,7 @@ export class AppDetailsComponent implements OnDestroy {
     return this.application$
       .pipe(
         switchMap(application => this._manifestService.capabilities$({appSymbolicName: application.symbolicName})),
-        expand(capabilities => this.capabilityFilterFormControl.valueChanges.pipe(take(1), mapTo(capabilities))),
+        expand(capabilities => this.capabilityFilterFormControl.valueChanges.pipe(take(1), map(() => capabilities))),
         map(capabilities => filterManifestObjects(capabilities, this.capabilityFilterFormControl.value)),
       );
   }
@@ -78,7 +78,7 @@ export class AppDetailsComponent implements OnDestroy {
     return this.application$
       .pipe(
         switchMap(application => this._manifestService.intentions$({appSymbolicName: application.symbolicName})),
-        expand(intentions => this.intentionFilterFormControl.valueChanges.pipe(take(1), mapTo(intentions))),
+        expand(intentions => this.intentionFilterFormControl.valueChanges.pipe(take(1), map(() => intentions))),
         map(intentions => filterManifestObjects(intentions, this.intentionFilterFormControl.value)),
       );
   }

diff --git a/...-platform-devtools/src/app/capability-filter-result/capability-filter-result.component.ts b/...-platform-devtools/src/app/capability-filter-result/capability-filter-result.component.ts
@@ -13,7 +13,7 @@ import {Capability} from '@scion/microfrontend-platform';
 import {CapabilityFilterSession} from '../find-capabilities/capability-filter-session.service';
 import {ShellService} from '../shell.service';
 import {FormControl} from '@angular/forms';
-import {expand, map, mapTo, take} from 'rxjs/operators';
+import {expand, map, take} from 'rxjs/operators';
 import {filterManifestObjects} from '../manifest-object-filter.utils';
 
 @Component({
@@ -31,7 +31,7 @@ export class CapabilityFilterResultComponent {
     shellService.detailsTitle = 'Capabilities';
     this.capabilities$ = capabilityFilterSession.capabilities$()
       .pipe(
-        expand(capabilities => this.filterFormControl.valueChanges.pipe(take(1), mapTo(capabilities))),
+        expand(capabilities => this.filterFormControl.valueChanges.pipe(take(1), map(() => capabilities))),
         map(capabilities => filterManifestObjects(capabilities, this.filterFormControl.value)),
       );
   }

diff --git a/...frontend-platform-devtools/src/app/dependent-intentions/dependent-intentions.component.ts b/...frontend-platform-devtools/src/app/dependent-intentions/dependent-intentions.component.ts
@@ -11,7 +11,7 @@ import {ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges} fro
 import {Intention} from '@scion/microfrontend-platform';
 import {Router} from '@angular/router';
 import {Observable, ReplaySubject} from 'rxjs';
-import {expand, map, mapTo, switchMap, take} from 'rxjs/operators';
+import {expand, map, switchMap, take} from 'rxjs/operators';
 import {filterManifestObjects} from '../manifest-object-filter.utils';
 import {DevToolsManifestService} from '../dev-tools-manifest.service';
 import {Maps} from '@scion/toolkit/util';
@@ -38,7 +38,7 @@ export class DependentIntentionsComponent implements OnChanges {
     this.intentionsByApp$ = this._appChange$
       .pipe(
         switchMap(() => manifestService.observeDependentIntentions$(this.appSymbolicName)),
-        expand(intentions => this.filterFormControl.valueChanges.pipe(take(1), mapTo(intentions))),
+        expand(intentions => this.filterFormControl.valueChanges.pipe(take(1), map(() => intentions))),
         map(intentions => filterManifestObjects(intentions, this.filterFormControl.value)),
         map(intentions => intentions.reduce((acc, intention) => Maps.addListValue(acc, intention.metadata.appSymbolicName, intention), new Map())),
       );

diff --git a/...frontend-platform-devtools/src/app/find-capabilities/capability-filter-session.service.ts b/...frontend-platform-devtools/src/app/find-capabilities/capability-filter-session.service.ts
@@ -10,7 +10,7 @@
 import {Injectable} from '@angular/core';
 import {Observable, Subject} from 'rxjs';
 import {Capability, Qualifier} from '@scion/microfrontend-platform';
-import {expand, map, mapTo, take} from 'rxjs/operators';
+import {expand, map, take} from 'rxjs/operators';
 import {KeyValuePair, LogicalOperator} from './filter-field/filter-field';
 import {DevToolsManifestService} from '../dev-tools-manifest.service';
 import {Arrays} from '@scion/toolkit/util';
@@ -64,7 +64,7 @@ export class CapabilityFilterSession {
   public capabilities$(): Observable<Capability[]> {
     return this._manifestService.capabilities$()
       .pipe(
-        expand(capabilities => this._filterChange$.pipe(take(1), mapTo(capabilities))),
+        expand(capabilities => this._filterChange$.pipe(take(1), map(() => capabilities))),
         map(capabilities => this.filter(capabilities)),
       );
   }

diff --git a/...ontend-platform-devtools/src/app/required-capabilities/required-capabilities.component.ts b/...ontend-platform-devtools/src/app/required-capabilities/required-capabilities.component.ts
@@ -11,7 +11,7 @@ import {ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges} fro
 import {Capability} from '@scion/microfrontend-platform';
 import {Router} from '@angular/router';
 import {Observable, ReplaySubject} from 'rxjs';
-import {expand, map, mapTo, switchMap, take} from 'rxjs/operators';
+import {expand, map, switchMap, take} from 'rxjs/operators';
 import {filterManifestObjects} from '../manifest-object-filter.utils';
 import {DevToolsManifestService} from '../dev-tools-manifest.service';
 import {FormControl} from '@angular/forms';
@@ -39,7 +39,7 @@ export class RequiredCapabilitiesComponent implements OnChanges {
     this.capabilitiesByApp$ = this._appChange$
       .pipe(
         switchMap(() => manifestService.observeDependingCapabilities$(this.appSymbolicName)),
-        expand(capabilities => this.filterFormControl.valueChanges.pipe(take(1), mapTo(capabilities))),
+        expand(capabilities => this.filterFormControl.valueChanges.pipe(take(1), map(() => capabilities))),
         map(capabilities => filterManifestObjects(capabilities, this.filterFormControl.value)),
         map(capabilities => capabilities.reduce((acc, capability) => Maps.addListValue(acc, capability.metadata.appSymbolicName, capability), new Map())),
       );

diff --git a/apps/microfrontend-platform-devtools/src/polyfills.ts b/apps/microfrontend-platform-devtools/src/polyfills.ts
@@ -18,8 +18,8 @@
  *      file.
  *
  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
  *
  * Learn more in https://angular.io/guide/browser-support
  */
@@ -28,18 +28,6 @@
  * BROWSER POLYFILLS
  */
 
-/**
- * IE11 requires the following for NgClass support on SVG elements
- */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
@@ -67,7 +55,8 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js'; // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
+
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

diff --git a/apps/microfrontend-platform-testing-app/.browserslistrc b/apps/microfrontend-platform-testing-app/.browserslistrc
@@ -24,4 +24,3 @@ last 2 Edge major versions
 last 2 Safari major versions
 last 2 iOS major versions
 Firefox ESR
-not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
diff --git a/apps/microfrontend-platform-testing-app/src/app/activator/activator-progress.module.ts b/apps/microfrontend-platform-testing-app/src/app/activator/activator-progress.module.ts
@@ -42,7 +42,7 @@ export class ActivatorProgressModule {
       throw Error('[NullActivatorContextError] Not running in an activator context.');
     }
 
-    // Signal the host platform that this activator is ready, except for app3 which has no readiness topic declared
+    // Signal the host platform that this activator is ready.
     const readinessTopics = activationContext.activator.properties.readinessTopics;
     if (readinessTopics) {
       Beans.get(MessageClient).publish(readinessTopics as string);

diff --git a/apps/microfrontend-platform-testing-app/src/app/app-shell/app-shell.component.ts b/apps/microfrontend-platform-testing-app/src/app/app-shell/app-shell.component.ts
@@ -8,9 +8,9 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 import {Component, HostBinding, OnDestroy} from '@angular/core';
-import {asapScheduler, Subject} from 'rxjs';
+import {asapScheduler, Subject, switchMap} from 'rxjs';
 import {APP_IDENTITY, ContextService, FocusMonitor, IS_PLATFORM_HOST, OUTLET_CONTEXT, OutletContext} from '@scion/microfrontend-platform';
-import {switchMapTo, takeUntil} from 'rxjs/operators';
+import {takeUntil} from 'rxjs/operators';
 import {ActivatedRoute} from '@angular/router';
 import {Defined} from '@scion/toolkit/util';
 import {Beans} from '@scion/toolkit/bean-manager';
@@ -41,7 +41,7 @@ export class AppShellComponent implements OnDestroy {
   private installRouteActivateListener(): void {
     this._routeActivate$
       .pipe(
-        switchMapTo(Beans.get(ContextService).observe$<OutletContext>(OUTLET_CONTEXT)),
+        switchMap(() => Beans.get(ContextService).observe$<OutletContext>(OUTLET_CONTEXT)),
         takeUntil(this._destroy$),
       )
       .subscribe(outletContext => {

diff --git a/apps/microfrontend-platform-testing-app/src/app/browser-outlet/browser-outlet.component.ts b/apps/microfrontend-platform-testing-app/src/app/browser-outlet/browser-outlet.component.ts
@@ -109,10 +109,10 @@ export class BrowserOutletComponent {
         .map(route => {
           const matrixParams: Map<string, any> = route.data['matrixParams'] || new Map();
           const matrixParamsEncoded = Array.from(matrixParams.keys())
-            .reduce((encoded, paramKey) => encoded.concat(`${paramKey}=${matrixParams.get(paramKey)}`), [])
-            .join(';');
+            .reduce((encoded, paramKey) => encoded.concat(`;${paramKey}=${matrixParams.get(paramKey)}`), [])
+            .join();
           return {
-            url: `${app.url}/#/${route.path}${matrixParamsEncoded ? `;${matrixParamsEncoded}` : ''}`,
+            url: `${app.url}/#/${route.path}${matrixParamsEncoded}`,
             label: `${app.symbolicName}: ${route.data['pageTitle']}`,
           };
         }));

diff --git a/...nd-platform-testing-app/src/app/manifest/lookup-capability/lookup-capability.component.ts b/...nd-platform-testing-app/src/app/manifest/lookup-capability/lookup-capability.component.ts
@@ -51,11 +51,12 @@ export class LookupCapabilityComponent {
   public onLookup(): void {
     const nilQualifierIfEmpty = this.form.get(NILQUALIFIER_IF_EMPTY).value;
     const qualifier = SciParamsEnterComponent.toParamsDictionary(this.form.get(QUALIFIER) as FormArray, false);
+    const nilQualifierOrUndefined = nilQualifierIfEmpty ? {} : undefined;
 
     const filter: ManifestObjectFilter = {
       id: this.form.get(ID).value || undefined,
       type: this.form.get(TYPE).value || undefined,
-      qualifier: Object.keys(qualifier).length ? qualifier : (nilQualifierIfEmpty ? {} : undefined),
+      qualifier: Object.keys(qualifier).length ? qualifier : nilQualifierOrUndefined,
       appSymbolicName: this.form.get(APP_SYMBOLIC_NAME).value || undefined,
     };
     this.capabilities$ = Beans.get(ManifestService).lookupCapabilities$(filter)

diff --git a/...tend-platform-testing-app/src/app/manifest/lookup-intention/lookup-intention.component.ts b/...tend-platform-testing-app/src/app/manifest/lookup-intention/lookup-intention.component.ts
@@ -50,11 +50,12 @@ export class LookupIntentionComponent {
   public onLookup(): void {
     const nilQualifierIfEmpty = this.form.get(NILQUALIFIER_IF_EMPTY).value;
     const qualifier = SciParamsEnterComponent.toParamsDictionary(this.form.get(QUALIFIER) as FormArray, false);
+    const nilQualifierOrUndefined = nilQualifierIfEmpty ? {} : undefined;
 
     const filter: ManifestObjectFilter = {
       id: this.form.get(ID).value || undefined,
       type: this.form.get(TYPE).value || undefined,
-      qualifier: Object.keys(qualifier).length ? qualifier : (nilQualifierIfEmpty ? {} : undefined),
+      qualifier: Object.keys(qualifier).length ? qualifier : nilQualifierOrUndefined,
       appSymbolicName: this.form.get(APP_SYMBOLIC_NAME).value || undefined,
     };
     this.intentions$ = Beans.get(ManifestService).lookupIntentions$(filter)

diff --git a/...latform-testing-app/src/app/manifest/register-capability/register-capability.component.ts b/...latform-testing-app/src/app/manifest/register-capability/register-capability.component.ts
@@ -98,11 +98,12 @@ export class RegisterCapabilityComponent {
 
     const nilQualifierIfEmpty = this.unregisterForm.get(NILQUALIFIER_IF_EMPTY).value;
     const qualifier = SciParamsEnterComponent.toParamsDictionary(this.unregisterForm.get(QUALIFIER) as FormArray, false);
+    const nilQualifierOrUndefined = nilQualifierIfEmpty ? {} : undefined;
 
     const filter: ManifestObjectFilter = {
       id: this.unregisterForm.get(ID).value || undefined,
       type: this.unregisterForm.get(TYPE).value || undefined,
-      qualifier: Object.keys(qualifier).length ? qualifier : (nilQualifierIfEmpty ? {} : undefined),
+      qualifier: Object.keys(qualifier).length ? qualifier : nilQualifierOrUndefined,
       appSymbolicName: this.unregisterForm.get(APP_SYMBOLIC_NAME).value || undefined,
     };
 

diff --git a/...-platform-testing-app/src/app/manifest/register-intention/register-intention.component.ts b/...-platform-testing-app/src/app/manifest/register-intention/register-intention.component.ts
@@ -88,11 +88,12 @@ export class RegisterIntentionComponent {
 
     const nilQualifierIfEmpty = this.unregisterForm.get(NILQUALIFIER_IF_EMPTY).value;
     const qualifier = SciParamsEnterComponent.toParamsDictionary(this.unregisterForm.get(QUALIFIER) as FormArray, false);
+    const nilQualifierOrUndefined = nilQualifierIfEmpty ? {} : undefined;
 
     const filter: ManifestObjectFilter = {
       id: this.unregisterForm.get(ID).value || undefined,
       type: this.unregisterForm.get(TYPE).value || undefined,
-      qualifier: Object.keys(qualifier).length ? qualifier : (nilQualifierIfEmpty ? {} : undefined),
+      qualifier: Object.keys(qualifier).length ? qualifier : nilQualifierOrUndefined,
       appSymbolicName: this.unregisterForm.get(APP_SYMBOLIC_NAME).value || undefined,
     };