update(TSK-890): Updated to ng8. Tests are passing locally. Adjusted svg-styling, mocked a svg-dependency

web/package.json

@@ -13,14 +13,13 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "7.1.3",
+    "@angular/animations": "8.2.11",
-    "@angular/common": "7.1.3",
+    "@angular/common": "8.2.11",
-    "@angular/forms": "7.1.3",
+    "@angular/forms": "8.2.11",
-    "@angular/http": "7.1.3",
+    "@angular/platform-browser": "8.2.11",
-    "@angular/platform-browser": "7.1.3",
+    "@angular/platform-browser-dynamic": "8.2.11",
-    "@angular/platform-browser-dynamic": "7.1.3",
+    "@angular/router": "8.2.11",
-    "@angular/router": "7.1.3",
+    "angular-svg-icon": "^7.2.1",
-    "angular-svg-icon": "6.0.0",
     "angular-tree-component": "8.2.0",
     "bootstrap": "4.3.1",
     "bootstrap-sass": "3.4.1",
@@ -31,23 +30,23 @@
     "magic-string": "0.22.4",
     "material-design-icons": "3.0.1",
     "ng2-charts": "1.6.0",
-    "ngx-bootstrap": "3.2.0",
+    "ngx-bootstrap": "^4.3.0",
     "ngx-infinite-scroll": "6.0.1",
     "node-sass": "^4.12.0",
     "popper.js": "1.14.3",
-    "rxjs": "6.3.3",
+    "rxjs": "6.5.3",
-    "zone.js": "0.8.26"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.13.9",
+    "@angular-devkit/build-angular": "~0.803.12",
-    "@angular/cli": "^7.3.9",
+    "@angular/cli": "^8.3.12",
-    "@angular/compiler": "^7.2.7",
+    "@angular/compiler": "^8.2.11",
-    "@angular/compiler-cli": "7.2.7",
+    "@angular/compiler-cli": "8.2.11",
-    "@angular/core": "^7.1.3",
+    "@angular/core": "^8.2.11",
     "@types/jasmine": "2.8.4",
     "@types/node": "9.3.0",
     "ajv": "^6.10.2",
-    "codelyzer": "4.4.2",
+    "codelyzer": "^5.0.1",
     "diff": "^3.5.0",
     "hoek": "5.0.3",
     "jasmine-core": "2.9.1",
@@ -65,6 +64,6 @@
     "ts-mockito": "2.3.0",
     "ts-node": "4.1.0",
     "tslint": "5.9.1",
-    "typescript": "3.1.6"
+    "typescript": "3.5.3"
   }
 }

web/src/app/administration/classification/details/classification-details.component.ts

@@ -67,7 +67,7 @@ export class ClassificationDetailsComponent implements OnInit, OnDestroy {
   private domainSubscription: Subscription;
   private importingExportingSubscription: Subscription;
 
-  @ViewChild('ClassificationForm') classificationForm: NgForm;
+  @ViewChild('ClassificationForm', { static: false }) classificationForm: NgForm;
   toogleValidationMap = new Map<string, boolean>();
 
   constructor(private classificationsService: ClassificationsService,

web/src/app/administration/components/import-export/import-export.component.ts

@@ -20,7 +20,7 @@ export class ImportExportComponent implements OnInit {
 
   @Input() currentSelection: TaskanaType;
 
-  @ViewChild('selectedFile')
+  @ViewChild('selectedFile', { static: true })
   selectedFileInput;
 
   domains: string[] = [];
@@ -94,7 +94,7 @@ export class ImportExportComponent implements OnInit {
   }
 
   private resetProgress() {
-    this.uploadservice.setCurrentProgressValue(0)
+    this.uploadservice.setCurrentProgressValue(0);
     this.uploadservice.isInUse = false;
     this.selectedFileInput.nativeElement.value = '';
   }
@@ -115,7 +115,7 @@ export class ImportExportComponent implements OnInit {
       this.errorHandler(title, JSON.parse(event.responseText).message);
 
     } else if (event.readyState === 4 && event.status === 200) {
-      this.alertService.triggerAlert(new AlertModel(AlertType.SUCCESS, 'Import was successful'))
+      this.alertService.triggerAlert(new AlertModel(AlertType.SUCCESS, 'Import was successful'));
       this.importExportService.setImportingFinished(true);
       this.resetProgress();
     }

web/src/app/administration/workbasket/details/distribution-targets/distribution-targets.component.ts

@@ -62,7 +62,7 @@ export class DistributionTargetsComponent implements OnChanges, OnDestroy {
   selectAllLeft = false;
   selectAllRight = false;
 
-  @ViewChild('panelBody')
+  @ViewChild('panelBody', { static: false })
   private panelBody: ElementRef;
 
 	constructor(
@@ -92,7 +92,7 @@ export class DistributionTargetsComponent implements OnChanges, OnDestroy {
 		if (side === Side.LEFT) {
       const itemsLeft = this.distributionTargetsLeft.length;
       const itemsRight = this.distributionTargetsRight.length;
-			const itemsSelected = this.getSelectedItems(this.distributionTargetsLeft, this.distributionTargetsRight)
+			const itemsSelected = this.getSelectedItems(this.distributionTargetsLeft, this.distributionTargetsRight);
 			this.distributionTargetsSelected = this.distributionTargetsSelected.concat(itemsSelected);
       this.distributionTargetsRight = this.distributionTargetsRight.concat(itemsSelected);
       if (((itemsLeft - itemsSelected.length) <= TaskanaQueryParameters.pageSize) && ((itemsLeft + itemsRight) < this.page.totalElements)) {
@@ -121,17 +121,17 @@ export class DistributionTargetsComponent implements OnChanges, OnDestroy {
 				return true;
 			},
 				error => {
-					this.generalModalService.triggerMessage(new MessageModal(`There was error while saving your workbasket's distribution targets`, error))
+					this.generalModalService.triggerMessage(new MessageModal(`There was error while saving your workbasket's distribution targets`, error));
 					this.requestInProgressService.setRequestInProgress(false);
 					return false;
 				}
-			)
+			);
 		return false;
 
 	}
 
 	onClear() {
-		this.alertService.triggerAlert(new AlertModel(AlertType.INFO, 'Reset edited fields'))
+		this.alertService.triggerAlert(new AlertModel(AlertType.INFO, 'Reset edited fields'));
 		this.distributionTargetsLeft = Object.assign([], this.distributionTargetsClone);
 		this.distributionTargetsRight = Object.assign([], this.distributionTargetsSelectedClone);
 		this.distributionTargetsSelected = Object.assign([], this.distributionTargetsSelectedClone);
@@ -270,7 +270,7 @@ export class DistributionTargetsComponent implements OnChanges, OnDestroy {
 		const distributionTargetsSelelected: Array<string> = [];
 		this.distributionTargetsSelected.forEach(item => {
 			distributionTargetsSelelected.push(item.workbasketId);
-		})
+		});
 		return distributionTargetsSelelected;
   }
 

web/src/app/administration/workbasket/details/information/workbasket-information.component.ts

@@ -73,7 +73,7 @@ export class WorkbasketInformationComponent
 
   private workbasketSubscription: Subscription;
   private routeSubscription: Subscription;
-  @ViewChild('WorkbasketForm')
+  @ViewChild('WorkbasketForm', { static: false })
   workbasketForm: NgForm;
 
   constructor(

web/src/app/administration/workbasket/master/workbasket-list.component.ts

@@ -33,7 +33,7 @@ export class WorkbasketListComponent implements OnInit, OnDestroy {
   sort: SortingModel = new SortingModel();
   filterBy: FilterModel = new FilterModel({name: '', owner: '', type: '', description: '', key: ''});
 
-  @ViewChild('wbToolbar')
+  @ViewChild('wbToolbar', { static: true })
   private toolbarElement: ElementRef;
   private workBasketSummarySubscription: Subscription;
   private workbasketServiceSubscription: Subscription;

web/src/app/app-routing.module.ts

@@ -14,22 +14,22 @@ const appRoutes: Routes = [
       {
         canActivate: [BusinessAdminGuard],
         path: 'administration',
-        loadChildren: './administration/administration.module#AdministrationModule',
+        loadChildren: () => import('./administration/administration.module').then(m => m.AdministrationModule),
       },
       {
         canActivate: [MonitorGuard],
         path: 'monitor',
-        loadChildren: './monitor/monitor.module#MonitorModule',
+        loadChildren: () => import('./monitor/monitor.module').then(m => m.MonitorModule),
       },
       {
         canActivate: [UserGuard],
         path: 'workplace',
-        loadChildren: './workplace/workplace.module#WorkplaceModule'
+        loadChildren: () => import('./workplace/workplace.module').then(m => m.WorkplaceModule)
       },
       {
         canActivate: [HistoryGuard],
         path: 'history',
-        loadChildren: './history/history.module#HistoryModule'
+        loadChildren: () => import('./history/history.module').then(m => m.HistoryModule)
       },
       {
         path: 'no-role',

web/src/app/shared/general-message-modal/general-message-modal.component.ts

@@ -17,7 +17,7 @@ export class GeneralMessageModalComponent implements OnChanges {
 	@Input()
 	type: string;
 
-	@ViewChild('generalModal')
+	@ViewChild('generalModal', { static: true })
 	private modal;
 
 	constructor() { }

web/src/app/shared/remove-confirmation/remove-confirmation.component.ts

@@ -13,7 +13,7 @@ export class RemoveConfirmationComponent implements OnInit {
   private confirmationCallback: Function;
   message: string;
 
-  @ViewChild('removeConfirmationModal')
+  @ViewChild('removeConfirmationModal', { static: true })
   private modal;
 
   constructor(private removeConfirmationService: RemoveConfirmationService) { }

web/src/app/shared/spinner/spinner.component.ts

@@ -50,7 +50,7 @@ export class SpinnerComponent implements OnDestroy {
     @Output()
     spinnerIsRunning = new EventEmitter<boolean>();
 
-    @ViewChild('spinnerModal')
+    @ViewChild('spinnerModal', { static: true })
     private modal;
 
     constructor(private generalModalService: GeneralModalService) {

web/src/app/shared/tree/tree.component.ts

@@ -28,7 +28,7 @@ import {ClassificationsService} from '../services/classifications/classification
 })
 export class TaskanaTreeComponent implements OnInit, AfterViewChecked, OnDestroy {
 
-  @ViewChild('tree')
+  @ViewChild('tree', { static: true })
   private tree: TreeComponent;
 
   @Input() treeNodes: Array<TreeNodeModel>;

web/src/app/shared/type-ahead/type-ahead.component.ts

@@ -47,7 +47,7 @@ export class TypeAheadComponent implements OnInit, ControlValueAccessor {
   @Output()
   onSelect = new EventEmitter<AccessIdDefinition>();
 
-  @ViewChild('inputTypeAhead')
+  @ViewChild('inputTypeAhead', { static: false })
   private inputTypeAhead;
 
   typeaheadLoading = false;

web/src/app/workplace/taskdetails/general/general-fields.component.ts

@@ -22,7 +22,7 @@ export class TaskdetailsGeneralFieldsComponent implements OnInit, OnChanges {
     saveToggleTriggered: boolean;
     @Output() formValid: EventEmitter<boolean> = new EventEmitter<boolean>();
 
-    @ViewChild('TaskForm')
+    @ViewChild('TaskForm', { static: false })
     taskForm: NgForm;
 
     toogleValidationMap = new Map<string, boolean>();

web/src/app/workplace/taskmaster/task-list/task-list.component.spec.ts

@@ -7,7 +7,6 @@ import { HttpClientModule } from '@angular/common/http';
 import { Routes } from '@angular/router';
 import { Component, ChangeDetectorRef } from '@angular/core';
 import { WorkplaceService } from 'app/workplace/services/workplace.service';
-import { SvgIconComponent, SvgIconRegistryService } from 'angular-svg-icon';
 import {DateTimeZonePipe} from '../../../shared/pipes/date-time-zone/date-time-zone.pipe';
 
 
@@ -18,6 +17,13 @@ import {DateTimeZonePipe} from '../../../shared/pipes/date-time-zone/date-time-z
 export class DummyDetailComponent {
 }
 
+@Component({
+  selector: 'svg-icon',
+  template: '<p>Mock Icon Component</p>'
+})
+export class MockSvgIconComponent {
+}
+
 describe('TaskListComponent', () => {
   let component: TaskListComponent;
   let fixture: ComponentFixture<TaskListComponent>;
@@ -35,13 +41,12 @@ describe('TaskListComponent', () => {
       declarations: [
         TaskListComponent,
         DummyDetailComponent,
-        SvgIconComponent,
+        MockSvgIconComponent,
         DateTimeZonePipe
       ],
       providers: [
         WorkplaceService,
-        ChangeDetectorRef,
+        ChangeDetectorRef
-        SvgIconRegistryService
       ]
     })
       .compileComponents();

web/src/app/workplace/taskmaster/task-master.component.ts

@@ -41,7 +41,7 @@ export class TaskMasterComponent implements OnInit, OnDestroy {
   objectReference: ObjectReference;
   selectedSearchType: Search = Search.byWorkbasket;
 
-  @ViewChild('wbToolbar')
+  @ViewChild('wbToolbar', { static: true })
   private toolbarElement: ElementRef;
   private taskChangeSubscription: Subscription;
   private taskDeletedSubscription: Subscription;

web/src/assets/_main.scss

@@ -17,3 +17,4 @@
 @import 'bootstrap-3-backward-compatibility';
 @import 'mixin/colors';
 @import 'progress-bar';
+@import 'shameful';

web/src/assets/_shameful.scss

@@ -0,0 +1,4 @@
+// used until the icon handling is done in a proper way and we got rid of this lib
+svg-icon {
+  display: inline-block;
+}

web/src/polyfills.ts

@@ -11,27 +11,13 @@
  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
  *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ * Learn more in https://angular.io/guide/browser-support
  */
 
 /***************************************************************************************************
- * BROWSER POLYFILLS
+* BROWSER POLYFILLS
- */
+*/
 
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-import 'core-js/es6/symbol';
-import 'core-js/es6/object';
-import 'core-js/es6/function';
-import 'core-js/es6/parse-int';
-import 'core-js/es6/parse-float';
-import 'core-js/es6/number';
-import 'core-js/es6/math';
-import 'core-js/es6/string';
-import 'core-js/es6/date';
-import 'core-js/es6/array';
-import 'core-js/es6/regexp';
-import 'core-js/es6/map';
-import 'core-js/es6/set';
 
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.

web/src/tsconfig.app.json

@@ -2,7 +2,6 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "module": "es2015",
     "baseUrl": "",
     "types": []
   },

web/src/tsconfig.spec.json

@@ -2,8 +2,6 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
-    "module": "commonjs",
-    "target": "es5",
     "baseUrl": "",
     "types": [
       "jasmine",

web/tsconfig.json

@@ -1,6 +1,8 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "downlevelIteration": true,
+    "module": "esnext",
     "outDir": "./dist/out-tsc",
     "baseUrl": "src",
     "sourceMap": true,
@@ -8,7 +10,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],

web/tslint.json

@@ -112,12 +112,12 @@
 			"taskana",
 			"kebab-case"
 		],
-		"use-input-property-decorator": true,
+		"no-inputs-metadata-property": true,
-		"use-output-property-decorator": true,
+		"no-outputs-metadata-property": true,
-		"use-host-property-decorator": true,
+		"no-host-metadata-property": true,
 		"no-input-rename": true,
 		"no-output-rename": true,
-		"use-life-cycle-interface": true,
+		"use-lifecycle-interface": true,
 		"use-pipe-transform-interface": true,
 		"component-class-suffix": true,
 		"directive-class-suffix": true