chore(workbench): update @scion/workbench to Angular 11

closes #234

BREAKING CHANGE: Added support for Angular 11.

To migrate:
Migrate your app to Angular 11 as following:
- Run `ng update @angular/cli @angular/core @angular/cdk`.
- Refer to the Angular Update Guide for detailed instructions on how to update Angular: https://update.angular.io/

README.md

@@ -49,6 +49,7 @@ While the SCION Workbench can be used in regular Angular applications, it is par
 ***
 
 ### Versions
+- `v11.0.0-beta.1` and newer are only compatible with Angular version 11.x. (no microfrontend support yet)
 - `v0.0.0-beta.35` and newer are only compatible with Angular version 10.x.
 - `v0.0.0-beta.33` and newer are only 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.

angular.json

@@ -10,7 +10,7 @@
       "prefix": "wb",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "projects/scion/workbench/tsconfig.lib.json",
             "project": "projects/scion/workbench/ng-package.json"
@@ -114,7 +114,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,

apps/workbench-testing-app/.browserslistrc

@@ -24,6 +24,4 @@ last 2 Edge major versions
 last 2 Safari major versions
 last 2 iOS major versions
 Firefox ESR
-not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
 not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
-

apps/workbench-testing-app/src/app/view-navigation/view-navigation.component.html

@@ -1,22 +1,22 @@
-<input placeholder="Path" [formControl]="form.get(PATH)" class="e2e-path">
-<sci-params-enter [title]="'Query parameters'" [paramsFormArray]="form.get(QUERY_PARAMS)" [addable]="true" [removable]="true" class="e2e-query-params-panel"></sci-params-enter>
-<sci-params-enter [title]="'Matrix parameters'" [paramsFormArray]="form.get(MATRIX_PARAMS)" [addable]="true" [removable]="true" class="e2e-matrix-params-panel"></sci-params-enter>
+<input placeholder="Path" [formControl]="$any(form.get(PATH))" class="e2e-path">
+<sci-params-enter [title]="'Query parameters'" [paramsFormArray]="$any(form.get(QUERY_PARAMS))" [addable]="true" [removable]="true" class="e2e-query-params-panel"></sci-params-enter>
+<sci-params-enter [title]="'Matrix parameters'" [paramsFormArray]="$any(form.get(MATRIX_PARAMS))" [addable]="true" [removable]="true" class="e2e-matrix-params-panel"></sci-params-enter>
 
-<form autocomplete="off">
+<form autocomplete="off" [formGroup]="form">
   <label for="activateIfPresent">ActivateIfPresent</label>
-  <input id="activateIfPresent" type="checkbox" [formControl]="form.get(ACTIVATE_IF_PRESENT)">
+  <input id="activateIfPresent" type="checkbox" [formControlName]="ACTIVATE_IF_PRESENT">
 
   <label for="closeIfPresent">CloseIfPresent</label>
-  <input id="closeIfPresent" type="checkbox" [formControl]="form.get(CLOSE_IF_PRESENT)">
+  <input id="closeIfPresent" type="checkbox" [formControlName]="CLOSE_IF_PRESENT">
 
   <label for="target">Target</label>
-  <select id="target" [formControl]="form.get(TARGET)">
+  <select id="target" [formControlName]="TARGET">
     <option value="self">self</option>
     <option value="blank">blank</option>
   </select>
 
   <label for="insertionIndex">InsertionIndex</label>
-  <input id="insertionIndex" [formControl]="form.get(INSERTION_INDEX)"  list="insertionIndexHints">
+  <input id="insertionIndex" [formControlName]="INSERTION_INDEX" list="insertionIndexHints">
   <datalist id="insertionIndexHints">
     <option value="start">
     <option value="end">

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

@@ -28,7 +28,7 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+/** IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
 /**
@@ -45,7 +45,7 @@
  * will put import in the top of bundle, so user need to create a separate file
  * in this directory (for example: zone-flags.ts), and put the following flags
  * into that file, and then add the following code before importing zone.js.
- * import './zone-flags.ts';
+ * import './zone-flags';
  *
  * The flags allowed in zone-flags.ts are listed here.
  *
@@ -67,6 +67,7 @@
  */
 import 'zone.js/dist/zone';  // Included with Angular CLI.
 
+
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */

apps/workbench-testing-app/tsconfig.app.json

@@ -1,11 +1,14 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/workbench-testing-app",
     "types": []
   },
   "files": [
     "src/main.ts",
     "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
   ]
 }