Update Angular 13

- Update Angular 13
- Update test reporter
- Update Angular Material
- Update config
- Resolves #1784
- Remove Material 13

Author: oodamien

.gitignore

@@ -11,6 +11,7 @@ ui/dist
 ui/tmp
 ui/out-tsc
 ui/.c9/
+ui/.angular/
 
 ui/.sass-cache
 ui/connect.lock

pom.xml

@@ -68,7 +68,7 @@
 		</developer>
 	</developers>
 	<prerequisites>
-		<maven>3.1.0</maven>
+		<maven>3.8.3</maven>
 	</prerequisites>
 	<build>
 		<resources>
@@ -80,7 +80,7 @@
 			<plugin>
 				<groupId>org.apache.maven.plugins</groupId>
 				<artifactId>maven-compiler-plugin</artifactId>
-				<version>3.6.2</version>
+				<version>3.8.1</version>
 				<configuration>
 					<source>1.8</source>
 					<target>1.8</target>
@@ -101,7 +101,7 @@
 							<goal>install-node-and-npm</goal>
 						</goals>
 						<configuration>
-							<nodeVersion>v14.17.4</nodeVersion>
+							<nodeVersion>v14.18.0</nodeVersion>
 						</configuration>
 					</execution>
 					<execution>

ui/package-lock.json

@@ -22,14 +22,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "12.2.3",
-    "@angular/common": "12.2.3",
-    "@angular/compiler": "12.2.3",
-    "@angular/core": "12.2.3",
-    "@angular/forms": "12.2.3",
-    "@angular/platform-browser": "12.2.3",
-    "@angular/platform-browser-dynamic": "12.2.3",
-    "@angular/router": "12.2.3",
+    "@angular/animations": "13.0.1",
+    "@angular/cdk": "^13.0.1",
+    "@angular/common": "13.0.1",
+    "@angular/compiler": "13.0.1",
+    "@angular/core": "13.0.1",
+    "@angular/forms": "13.0.1",
+    "@angular/platform-browser": "13.0.1",
+    "@angular/platform-browser-dynamic": "13.0.1",
+    "@angular/router": "13.0.1",
     "@cds/core": "5.5.2",
     "@clr/angular": "12.0.4",
     "@clr/icons": "4.0.14",
@@ -52,15 +53,15 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "12.2.3",
-    "@angular-eslint/builder": "12.0.0",
-    "@angular-eslint/eslint-plugin": "12.0.0",
-    "@angular-eslint/eslint-plugin-template": "12.0.0",
+    "@angular-devkit/build-angular": "13.0.2",
+    "@angular-eslint/builder": "12.6.1",
+    "@angular-eslint/eslint-plugin": "12.6.1",
+    "@angular-eslint/eslint-plugin-template": "12.6.1",
     "@angular-eslint/schematics": "12.3.1",
-    "@angular-eslint/template-parser": "12.0.0",
-    "@angular/cli": "12.2.3",
-    "@angular/compiler-cli": "12.2.3",
-    "@angular/language-service": "12.2.3",
+    "@angular-eslint/template-parser": "12.6.1",
+    "@angular/cli": "13.0.2",
+    "@angular/compiler-cli": "13.0.1",
+    "@angular/language-service": "13.0.1",
     "@compodoc/compodoc": "1.0.4",
     "@types/backbone": "1.4.10",
     "@types/codemirror": "0.0.91",
@@ -86,7 +87,7 @@
     "karma": "6.3.4",
     "karma-browserstack-launcher": "1.5.1",
     "karma-chrome-launcher": "3.1.0",
-    "karma-coverage-istanbul-reporter": "3.0.3",
+    "karma-coverage": "^2.0.3",
     "karma-edge-launcher": "0.4.2",
     "karma-firefox-launcher": "1.3.0",
     "karma-jasmine": "3.3.1",
@@ -100,7 +101,7 @@
     "protractor-docker-plugin": "file:protractor-docker-plugin",
     "shelljs": "0.8.4",
     "ts-node": "8.8.1",
-    "typescript": "4.3.5",
+    "typescript": "4.4.4",
     "webpack-bundle-analyzer": "3.6.1"
   },
   "napa-config": {

ui/package.json

@@ -6,11 +6,15 @@ <h1>Tools</h1>
       <ng-template>
         <div>
           <clr-icon shape="angle" style="transform: rotate(90deg)"></clr-icon>
-          <a href="{{ baseApiUrl }}#" (click)="run('export-stream')">Export stream(s): Create a JSON file with the selected streams</a>
+          <a href="{{ baseApiUrl }}#" (click)="run('export-stream')"
+            >Export stream(s): Create a JSON file with the selected streams</a
+          >
         </div>
         <div [appRole]="['ROLE_CREATE']">
           <clr-icon shape="angle" style="transform: rotate(90deg)"></clr-icon>
-          <a href="{{ baseApiUrl }}#" (click)="run('import-stream')">Import stream(s): Import streams from a JSON file</a>
+          <a href="{{ baseApiUrl }}#" (click)="run('import-stream')"
+            >Import stream(s): Import streams from a JSON file</a
+          >
         </div>
       </ng-template>
     </app-view-card>
@@ -33,7 +37,9 @@ <h1>Tools</h1>
       <ng-template>
         <div>
           <clr-icon shape="angle" style="transform: rotate(90deg)"></clr-icon>
-          <a href="{{ baseApiUrl }}#" (click)="run('export-task')">Export task(s): Create a JSON file with the selected tasks</a>
+          <a href="{{ baseApiUrl }}#" (click)="run('export-task')"
+            >Export task(s): Create a JSON file with the selected tasks</a
+          >
         </div>
         <div [appRole]="['ROLE_CREATE']">
           <clr-icon shape="angle" style="transform: rotate(90deg)"></clr-icon>

ui/src/app/manage/tools/tools.component.html

@@ -13,18 +13,19 @@ module.exports = function (config) {
       require('karma-safari-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-spec-reporter'),
-      require('karma-coverage-istanbul-reporter'),
+      require('karma-coverage'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, '../coverage'),
-      reports: ['html', 'lcovonly'],
-      fixWebpackSourcePaths: true
+
+    // optionally, configure the reporter
+    coverageReporter: {
+      type : 'html',
+      dir : '../coverage/'
     },
-    reporters: ['spec', 'progress', 'kjhtml'],
+    reporters: ['spec', 'progress', 'coverage', 'kjhtml'],
     specReporter: {
       maxLogLines: 5,
       suppressErrorSummary: false,

ui/src/karma.conf.js

@@ -30,19 +30,9 @@
  **/
 // import 'core-js/es6/array';
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
 /** IE10 and IE11 requires the following for the Reflect API. */
 // import 'core-js/es6/reflect';
 
-/**
- * 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

ui/src/polyfills.ts

@@ -16,7 +16,9 @@ declare const require: {
 };
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+});
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.

ui/src/test.ts

@@ -1,6 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
+    "skipLibCheck": true,
     "outDir": "../out-tsc/app",
     "types": []
   },

ui/src/tsconfig.app.json

@@ -1,6 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
+    "skipLibCheck": true,
     "outDir": "../out-tsc/spec",
     "types": [
       "jasmine",