TSK-1289: Upgrade to Angular 9 (#1202)

* TSK-1289: Bumped to latest angular@8

* TSK-1289: Bumped to angular@9

* TSK-1289: Configured app for angular@9

web/angular.json

@@ -11,13 +11,17 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "aot": false,
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
             "assets": ["src/assets", "src/environments/data-sources"],
-            "styles": ["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/theme/_main.scss"],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/theme/_main.scss"
+            ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
               "node_modules/popper.js/dist/umd/popper.min.js",
@@ -26,6 +30,12 @@
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -97,7 +107,7 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",
-      "styleext": "scss"
+      "style": "scss"
     },
     "@schematics/angular:directive": {
       "prefix": "app"

web/package.json

@@ -17,15 +17,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "8.2.14",
+    "@angular/animations": "9.1.12",
     "@angular/cdk": "8.2.3",
-    "@angular/common": "8.2.14",
+    "@angular/common": "9.1.12",
-    "@angular/core": "8.2.14",
+    "@angular/core": "9.1.12",
-    "@angular/forms": "8.2.14",
+    "@angular/forms": "9.1.12",
     "@angular/material": "8.2.3",
-    "@angular/platform-browser": "8.2.14",
+    "@angular/platform-browser": "9.1.12",
-    "@angular/platform-browser-dynamic": "8.2.14",
+    "@angular/platform-browser-dynamic": "9.1.12",
-    "@angular/router": "8.2.14",
+    "@angular/router": "9.1.12",
     "@ngxs/devtools-plugin": "3.6.2",
     "@ngxs/store": "3.6.2",
     "angular-svg-icon": "7.2.1",
@@ -45,27 +45,27 @@
     "popper.js": "1.16.1",
     "rxjs": "6.5.4",
     "set-value": "3.0.2",
-    "zone.js": "0.9.1"
+    "tslib": "1.10.0",
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.803.28",
+    "@angular-devkit/build-angular": "~0.901.12",
-    "@angular/cli": "8.3.22",
+    "@angular/cli": "9.1.12",
-    "@angular/compiler": "8.2.14",
+    "@angular/compiler": "9.1.12",
-    "@angular/compiler-cli": "8.2.14",
+    "@angular/compiler-cli": "9.1.12",
     "@types/jasmine": "2.8.4",
-    "@types/node": "9.3.0",
+    "@types/node": "12.11.1",
     "@typescript-eslint/eslint-plugin": "2.15.0",
     "@typescript-eslint/eslint-plugin-tslint": "2.15.0",
     "@typescript-eslint/parser": "2.15.0",
     "ajv": "6.11.0",
-    "codelyzer": "5.2.1",
+    "codelyzer": "5.1.2",
     "diff": "3.5.0",
     "eslint": "6.8.0",
-    "eslint-config-airbnb-typescript": "6.3.1",
     "eslint-plugin-import": "2.22.0",
     "@hapi/hoek": "9.0.4",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-prettier": "6.11.0",
-    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-prettier": "3.1.4",
     "jasmine-core": "3.5.0",
     "jasmine-spec-reporter": "4.2.1",
     "karma": "5.1.0",
@@ -77,11 +77,11 @@
     "karma-jasmine-html-reporter": "1.4.0",
     "moment": "2.22.1",
     "ng2-mock-component": "0.1.1",
-    "prettier": "^2.0.5",
+    "prettier": "2.0.5",
     "protractor": "7.0.0",
     "ts-mockito": "2.3.0",
     "ts-node": "4.1.0",
     "tslint": "5.20.1",
-    "typescript": "3.5.3"
+    "typescript": "3.8.3"
   }
 }

web/src/app/administration/components/classification-details/classification-details.component.html

@@ -31,7 +31,7 @@
 
       <!-- DETAILED FIELDS -->
       <div class="panel-body" style="padding: 0">
-        <form #ClassificationForm="ngForm">
+        <ng-form #ClassificationForm="ngForm">
           <div class="row" style="padding: 15px">
             <div class="col-md-6">
 
@@ -182,7 +182,7 @@
               </div>
             </div>
           </div>
-        </form>
+        </ng-form>
       </div>
     </div>
   </div>

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

@@ -54,7 +54,7 @@ export class ClassificationDetailsComponent implements OnInit, OnDestroy {
   inputOverflowMap = new Map<string, boolean>();
   validateInputOverflow: Function;
 
-  @ViewChild('ClassificationForm', { static: false }) classificationForm: NgForm;
+  @ViewChild('ClassificationForm') classificationForm: NgForm;
   toggleValidationMap = new Map<string, boolean>();
   destroy$ = new Subject<void>();
 

web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.spec.ts

@@ -1,120 +0,0 @@
-import { SimpleChange } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
-import { AngularSvgIconModule } from 'angular-svg-icon';
-import { of } from 'rxjs';
-import { configureTests } from 'app/app.test.configuration';
-import { WorkbasketAccessItemsRepresentation } from 'app/shared/models/workbasket-access-items-representation';
-import { ICONTYPES } from 'app/shared/models/icon-types';
-import { Location } from '@angular/common';
-import { SavingWorkbasketService } from 'app/administration/services/saving-workbaskets.service';
-import { WorkbasketService } from 'app/shared/services/workbasket/workbasket.service';
-import { RequestInProgressService } from 'app/shared/services/request-in-progress/request-in-progress.service';
-import { AccessIdsService } from 'app/shared/services/access-ids/access-ids.service';
-import { FormsValidatorService } from 'app/shared/services/forms-validator/forms-validator.service';
-import { NgxsModule, Store } from '@ngxs/store';
-import { WorkbasketAccessItemsComponent } from './workbasket-access-items.component';
-import { NotificationService } from '../../../shared/services/notifications/notification.service';
-import { WorkbasketState } from '../../../shared/store/workbasket-store/workbasket.state';
-import { EngineConfigurationState } from '../../../shared/store/engine-configuration-store/engine-configuration.state';
-import { ClassificationCategoriesService } from '../../../shared/services/classification-categories/classification-categories.service';
-
-describe('WorkbasketAccessItemsComponent', () => {
-  let component: WorkbasketAccessItemsComponent;
-  let fixture: ComponentFixture<WorkbasketAccessItemsComponent>;
-  let workbasketService;
-  let debugElement;
-  let notificationsService;
-  let accessIdsService;
-  let formsValidatorService;
-  const locationSpy: jasmine.SpyObj<Location> = jasmine.createSpyObj('Location', ['go']);
-
-  const configure = (testBed: TestBed) => {
-    testBed.configureTestingModule({
-      declarations: [WorkbasketAccessItemsComponent],
-      imports: [
-        FormsModule,
-        AngularSvgIconModule,
-        HttpClientModule,
-        ReactiveFormsModule,
-        NgxsModule.forRoot([WorkbasketState, EngineConfigurationState])
-      ],
-      providers: [
-        WorkbasketService,
-        NotificationService,
-        SavingWorkbasketService,
-        RequestInProgressService,
-        AccessIdsService,
-        FormsValidatorService,
-        ClassificationCategoriesService,
-        { provide: Location, useValue: locationSpy }
-      ]
-    });
-  };
-
-  beforeEach((done) => {
-    configureTests(configure).then((testBed) => {
-      const store: Store = testBed.get(Store);
-      store.reset([WorkbasketState, EngineConfigurationState]);
-
-      fixture = testBed.createComponent(WorkbasketAccessItemsComponent);
-
-      component = fixture.componentInstance;
-      component.workbasket = { type: ICONTYPES.PERSONAL };
-      component.workbasket.type = ICONTYPES.TOPIC;
-      component.workbasket._links = { accessItems: { href: 'someurl' } };
-
-      workbasketService = testBed.get(WorkbasketService);
-      notificationsService = testBed.get(NotificationService);
-      const workbasketAccessItemsRepresentation: WorkbasketAccessItemsRepresentation = {
-        accessItems: [
-          {
-            accessId: 'accessID1',
-            workbasketId: 'id1',
-            workbasketKey: '1',
-            accessItemId: '',
-            accessName: '',
-            permRead: false,
-            permOpen: false,
-            permAppend: false,
-            permTransfer: false,
-            permDistribute: false,
-            permCustom1: false,
-            permCustom2: false,
-            permCustom3: false,
-            permCustom4: false,
-            permCustom5: false,
-            permCustom6: false,
-            permCustom7: false,
-            permCustom8: false,
-            permCustom9: false,
-            permCustom10: false,
-            permCustom11: false,
-            permCustom12: false,
-            _links: {}
-          }
-        ],
-        _links: { self: { href: 'someurl' } }
-      };
-      debugElement = fixture.debugElement.nativeElement;
-      accessIdsService = testBed.get(AccessIdsService);
-      spyOn(accessIdsService, 'searchForAccessId').and.returnValue(of(['accessID1', 'accessID2']));
-      spyOn(accessIdsService, 'getGroupsByAccessId').and.returnValue(of(['accessID1', 'accessID2']));
-      formsValidatorService = testBed.get(FormsValidatorService);
-      component.ngOnChanges({
-        active: new SimpleChange(undefined, 'accessItems', true)
-      });
-      fixture.detectChanges();
-      done();
-    });
-  });
-
-  afterEach(() => {
-    fixture.destroy();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -64,7 +64,7 @@ export class WorkbasketDistributionTargetsComponent implements OnInit, OnChanges
   selectAllLeft = false;
   selectAllRight = false;
 
-  @ViewChild('panelBody', { static: false })
+  @ViewChild('panelBody')
   panelBody: ElementRef;
 
   @Select(WorkbasketSelectors.workbasketDistributionTargets)

web/src/app/administration/components/workbasket-information/workbasket-information.component.html

@@ -30,7 +30,7 @@
   </div>
 
   <div class="panel-body">
-    <form #WorkbasketForm="ngForm">
+    <ng-form #WorkbasketForm="ngForm">
       <div class="col-md-6">
         <!-- KEY -->
         <div class="form-group required">
@@ -169,6 +169,6 @@
           </div>
         </ng-container>
       </div>
-    </form>
+    </ng-form>
   </div>
 </div>

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

@@ -38,7 +38,7 @@ export class WorkbasketInformationComponent implements OnInit, OnChanges, OnDest
   @Input()
   action: ACTION;
 
-  @ViewChild('WorkbasketForm', { static: false })
+  @ViewChild('WorkbasketForm')
   workbasketForm: NgForm;
 
   workbasketClone: Workbasket;

web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.spec.ts

@@ -1,117 +0,0 @@
-import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { of } from 'rxjs';
-import { Router, Routes } from '@angular/router';
-
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { AngularSvgIconModule } from 'angular-svg-icon';
-import { HttpClientModule } from '@angular/common/http';
-import { RouterTestingModule } from '@angular/router/testing';
-import { SharedModule } from 'app/shared/shared.module';
-import { AppModule } from 'app/app.module';
-import { Links } from 'app/shared/models/links';
-import { Filter } from 'app/shared/models/filter';
-import { Sorting } from 'app/shared/models/sorting';
-
-import { ImportExportComponent } from 'app/administration/components/import-export/import-export.component';
-
-import { WorkbasketService } from 'app/shared/services/workbasket/workbasket.service';
-import { ClassificationDefinitionService } from 'app/administration/services/classification-definition.service';
-import { WorkbasketDefinitionService } from 'app/administration/services/workbasket-definition.service';
-import { configureTests } from 'app/app.test.configuration';
-import { ImportExportService } from 'app/administration/services/import-export.service';
-import { WorkbasketListToolbarComponent } from './workbasket-list-toolbar.component';
-import { ICONTYPES } from '../../../shared/models/icon-types';
-
-@Component({
-  selector: 'taskana-dummy-detail',
-  template: 'dummydetail'
-})
-export class DummyDetailComponent {}
-
-describe('WorkbasketListToolbarComponent', () => {
-  let component: WorkbasketListToolbarComponent;
-  let fixture: ComponentFixture<WorkbasketListToolbarComponent>;
-  let debugElement;
-  let workbasketService;
-  let router;
-
-  const routes: Routes = [{ path: ':id', component: DummyDetailComponent, outlet: 'detail' }];
-
-  beforeEach((done) => {
-    const configure = (testBed: TestBed) => {
-      testBed.configureTestingModule({
-        imports: [
-          FormsModule,
-          ReactiveFormsModule,
-          AngularSvgIconModule,
-          HttpClientModule,
-          RouterTestingModule.withRoutes(routes),
-          SharedModule,
-          AppModule
-        ],
-        declarations: [WorkbasketListToolbarComponent, DummyDetailComponent, ImportExportComponent],
-        providers: [
-          WorkbasketService,
-          ClassificationDefinitionService,
-          WorkbasketDefinitionService,
-          ImportExportService
-        ]
-      });
-    };
-    configureTests(configure).then((testBed) => {
-      fixture = TestBed.createComponent(WorkbasketListToolbarComponent);
-      workbasketService = TestBed.get(WorkbasketService);
-      router = TestBed.get(Router);
-      spyOn(workbasketService, 'markWorkbasketForDeletion').and.returnValue(of(''));
-      spyOn(workbasketService, 'triggerWorkBasketSaved');
-
-      debugElement = fixture.debugElement.nativeElement;
-      component = fixture.componentInstance;
-      component.workbaskets = [
-        {
-          workbasketId: '1',
-          key: 'key1',
-          name: 'NAME1',
-          description: 'description 1',
-          owner: 'owner 1',
-          type: ICONTYPES.PERSONAL
-        }
-      ];
-      component.workbaskets[0].markedForDeletion = false;
-
-      fixture.detectChanges();
-      done();
-    });
-  });
-
-  afterEach(() => {
-    document.body.removeChild(debugElement);
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should emit performSorting when sorting is triggered', () => {
-    let sort: Sorting;
-    const compareSort = new Sorting();
-
-    component.performSorting.subscribe((value) => {
-      sort = value;
-    });
-    component.sorting(compareSort);
-    expect(sort).toBe(compareSort);
-  });
-
-  it('should emit performFilter when filter is triggered', () => {
-    let filter: Filter;
-    const compareFilter = new Filter();
-
-    component.performFilter.subscribe((value) => {
-      filter = value;
-    });
-    component.filtering(compareFilter);
-    expect(filter).toBe(compareFilter);
-  });
-});

web/src/app/administration/components/workbasket-overview/workbasket-overview.component.spec.ts

@@ -4,8 +4,6 @@ import { Routes } from '@angular/router';
 import { NgxsModule } from '@ngxs/store';
 import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Location } from '@angular/common';
-import { take } from 'rxjs/operators';
-import { debug } from 'util';
 import { WorkbasketOverviewComponent } from './workbasket-overview.component';
 
 @Component({

web/src/app/shared/components/nav-bar/nav-bar.component.html

@@ -1,7 +1,7 @@
 <nav class="navbar main navbar-fixed-top">
   <div class="navbar  no-border-radius navbar-inverse no-gutter col-xs-12">
     <div class="pull-left col-sm-3 col-md-4">
-      <button type="button" *ngIf="!showNavbar" class="btn btn-default navbar-toggle show pull-left" (click)="toogleNavBar();"
+      <button type="button" *ngIf="!showNavbar" class="btn btn-default navbar-toggle show pull-left" (click)="toggleNavBar();"
         aria-expanded="true" aria-controls="navbar" data-toggle="tooltip" title="Menu">
         <span class="material-icons md-24 white">menu</span>
       </button>
@@ -45,34 +45,34 @@
     <div class="nav-content">
       <taskana-shared-user-information></taskana-shared-user-information>
       <div *ngIf="administrationAccess" class="row menu">
-        <span (click)="toogleNavBar()" routerLink="taskana/administration/workbaskets" aria-controls="administration"
+        <span (click)="toggleNavBar()" routerLink="taskana/administration/workbaskets" aria-controls="administration"
           routerLinkActive="active">Administration</span>
         <div class="row submenu" [ngClass]="{'selected': selectedRoute.indexOf('workbaskets') !== -1 }">
-          <span (click)="toogleNavBar()" class="col-xs-6" routerLink="taskana/administration/workbaskets" aria-controls="Workbaskets"
+          <span (click)="toggleNavBar()" class="col-xs-6" routerLink="taskana/administration/workbaskets" aria-controls="Workbaskets"
             routerLinkActive="active">Workbaskets</span>
         </div>
         <div class="row submenu" [ngClass]="{'selected': selectedRoute.indexOf('classifications') !== -1}">
-          <span (click)="toogleNavBar()" class="col-xs-6" routerLink="taskana/administration/classifications" aria-controls="Classifications"
+          <span (click)="toggleNavBar()" class="col-xs-6" routerLink="taskana/administration/classifications" aria-controls="Classifications"
             routerLinkActive="active">Classifications</span>
         </div>
         <div class="row submenu" [ngClass]="{'selected': selectedRoute.indexOf('access-items-management') !== -1}">
-          <span (click)="toogleNavBar()" class="col-xs-6" routerLink="taskana/administration/access-items-management"
+          <span (click)="toggleNavBar()" class="col-xs-6" routerLink="taskana/administration/access-items-management"
             aria-controls="Access items" routerLinkActive="active">Access items</span>
         </div>
       </div>
       <div *ngIf="monitorAccess" class="row menu" [ngClass]="{'selected': selectedRoute.indexOf('monitor') !== -1}">
-        <span (click)="toogleNavBar()" routerLink="{{monitorUrl}}" aria-controls="Monitor" routerLinkActive="active">Monitor</span>
+        <span (click)="toggleNavBar()" routerLink="{{monitorUrl}}" aria-controls="Monitor" routerLinkActive="active">Monitor</span>
       </div>
       <div *ngIf="workplaceAccess" class="row menu" [ngClass]="{'selected': selectedRoute.indexOf('workplace') !== -1 || selectedRoute === ''}">
-        <span (click)="toogleNavBar()" routerLink="{{workplaceUrl}}" aria-controls="Workplace" routerLinkActive="active">Workplace</span>
+        <span (click)="toggleNavBar()" routerLink="{{workplaceUrl}}" aria-controls="Workplace" routerLinkActive="active">Workplace</span>
       </div>
       <div *ngIf="historyAccess" class="row menu" [ngClass]="{'selected': selectedRoute.indexOf('history') !== -1}">
-        <span (click)="toogleNavBar()" routerLink="{{historyUrl}}" aria-controls="history" routerLinkActive="active">History</span>
+        <span (click)="toggleNavBar()" routerLink="{{historyUrl}}" aria-controls="history" routerLinkActive="active">History</span>
       </div>
     </div>
     <div class="nav-version">
       <p id="taskana-version"> Taskana version: {{version}} </p>
     </div>
   </div>
-  <div *ngIf="showNavbar" class="backdrop" (click)="toogleNavBar()"></div>
+  <div *ngIf="showNavbar" class="backdrop" (click)="toggleNavBar()"></div>
 </nav>

web/src/app/shared/components/nav-bar/nav-bar.component.ts

@@ -82,7 +82,7 @@ export class NavBarComponent implements OnInit, OnDestroy {
     this.domainService.switchDomain(domain);
   }
 
-  toogleNavBar() {
+  toggleNavBar() {
     this.showNavbar = !this.showNavbar;
   }
 

web/src/app/shared/components/popup/dialog-pop-up.component.spec.ts

@@ -1,33 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import {
-  MAT_DIALOG_DATA,
-  MAT_DIALOG_SCROLL_STRATEGY,
-  MatDialog,
-  MatDialogClose,
-  MatDialogModule
-} from '@angular/material/dialog';
-
-import { DialogPopUpComponent } from './dialog-pop-up.component';
-
-describe('PopupComponent', () => {
-  let component: DialogPopUpComponent;
-  let fixture: ComponentFixture<DialogPopUpComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [DialogPopUpComponent],
-      providers: [{ provide: MAT_DIALOG_SCROLL_STRATEGY }, { provide: MAT_DIALOG_DATA }],
-      imports: [MatDialogModule]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DialogPopUpComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,28 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { Overlay } from '@angular/cdk/overlay';
-import { MAT_DIALOG_SCROLL_STRATEGY, MatDialog } from '@angular/material/dialog';
-import { SpinnerComponent } from './spinner.component';
-
-describe('SpinnerComponent', () => {
-  let component: SpinnerComponent;
-  let fixture: ComponentFixture<SpinnerComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [SpinnerComponent],
-      providers: [MatSnackBar, Overlay, MatDialog, { provide: MAT_DIALOG_SCROLL_STRATEGY }]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SpinnerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

web/src/app/shared/components/toast/toast.component.spec.ts

@@ -1,26 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material/snack-bar';
-import { ToastComponent } from './toast.component';
-
-describe('ToastComponent', () => {
-  let component: ToastComponent;
-  let fixture: ComponentFixture<ToastComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ToastComponent],
-      providers: [{ provide: MAT_SNACK_BAR_DATA }]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ToastComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -58,7 +58,7 @@ export class TypeAheadComponent implements AfterViewInit, ControlValueAccessor {
   @Output()
   inputField = new EventEmitter<ElementRef>();
 
-  @ViewChild('inputTypeAhead', { static: false })
+  @ViewChild('inputTypeAhead')
   private inputTypeAhead;
 
   typeaheadLoading = false;

web/src/app/shared/components/user-information/user-information.component.html

@@ -6,7 +6,7 @@
   </div>
   <div class="user-info white">
     <span>Logged as: {{userInformation?.userId}}</span>
-    <button type="button" class="btn btn-default white pull-right transparent" (click)="toogleRoles();" aria-expanded="true" aria-controls="roles">
+    <button type="button" class="btn btn-default white pull-right transparent" (click)="toggleRoles();" aria-expanded="true" aria-controls="roles">
       <span>Roles</span>
     </button>
   </div>

web/src/app/shared/components/user-information/user-information.component.ts

@@ -22,7 +22,7 @@ export class UserInformationComponent implements OnInit {
     }
   }
 
-  toogleRoles() {
+  toggleRoles() {
     this.showRoles = !this.showRoles;
   }
 }

web/src/app/shared/services/http-client-interceptor/http-client-interceptor.service.spec.ts

@@ -1,29 +0,0 @@
-import { TestBed, inject } from '@angular/core/testing';
-import { HttpClientModule } from '@angular/common/http';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { Overlay } from '@angular/cdk/overlay';
-
-import { RequestInProgressService } from 'app/shared/services/request-in-progress/request-in-progress.service';
-import { MAT_DIALOG_SCROLL_STRATEGY, MatDialog } from '@angular/material/dialog';
-import { HttpClientInterceptor } from './http-client-interceptor.service';
-import { NotificationService } from '../notifications/notification.service';
-
-describe('HttpExtensionService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [HttpClientModule],
-      providers: [
-        HttpClientInterceptor,
-        RequestInProgressService,
-        MatSnackBar,
-        Overlay,
-        MatDialog,
-        { provide: MAT_DIALOG_SCROLL_STRATEGY }
-      ]
-    });
-  });
-
-  it('should be created', inject([HttpClientInterceptor], (service: HttpClientInterceptor) => {
-    expect(service).toBeTruthy();
-  }));
-});

web/src/app/shared/services/notifications/notifications.service.spec.ts

@@ -1,54 +0,0 @@
-import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
-import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
-import { Overlay } from '@angular/cdk/overlay';
-import { MAT_DIALOG_SCROLL_STRATEGY, MatDialogModule } from '@angular/material/dialog';
-
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
-import { NotificationService } from './notification.service';
-import { NOTIFICATION_TYPES } from '../../models/notifications';
-import { ToastComponent } from '../../components/toast/toast.component';
-
-describe('NotificationService', () => {
-  let toastComponent: ToastComponent;
-  let toastFixture: ComponentFixture<ToastComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [ToastComponent],
-      providers: [
-        NotificationService,
-        Overlay,
-        { provide: MAT_DIALOG_SCROLL_STRATEGY },
-        { provide: MAT_SNACK_BAR_DATA }
-      ],
-      imports: [MatSnackBarModule, MatDialogModule, NoopAnimationsModule]
-    })
-      .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [ToastComponent] } })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    toastFixture = TestBed.createComponent(ToastComponent);
-    toastComponent = toastFixture.componentInstance;
-    toastFixture.detectChanges();
-  });
-
-  it('should be created', inject([NotificationService], (service: NotificationService) => {
-    expect(service).toBeTruthy();
-  }));
-
-  it('should apply the correct panelClasses for the different alerts', inject(
-    [NotificationService],
-    (service: NotificationService) => {
-      let ref = service.showToast(NOTIFICATION_TYPES.INFO_ALERT);
-      expect(ref.containerInstance.snackBarConfig.panelClass).toEqual(['white', 'background-darkgreen']);
-      ref = service.showToast(NOTIFICATION_TYPES.DANGER_ALERT);
-      expect(ref.containerInstance.snackBarConfig.panelClass).toEqual(['red', 'background-white']);
-      ref = service.showToast(NOTIFICATION_TYPES.WARNING_ALERT);
-      expect(ref.containerInstance.snackBarConfig.panelClass).toEqual(['brown', 'background-white']);
-      ref = service.showToast(NOTIFICATION_TYPES.SUCCESS_ALERT);
-      expect(ref.containerInstance.snackBarConfig.panelClass).toEqual(['white', 'background-bluegreen']);
-    }
-  ));
-});

web/src/app/shared/shared.module.ts

@@ -5,7 +5,9 @@ import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { AngularSvgIconModule } from 'angular-svg-icon';
 import { RouterModule } from '@angular/router';
 import { TreeModule } from 'angular-tree-component';
-import { AlertModule, TypeaheadModule, BsDatepickerModule } from 'ngx-bootstrap';
+import { AlertModule, TypeaheadModule } from 'ngx-bootstrap';
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+
 import { AccordionModule } from 'ngx-bootstrap/accordion';
 import { WorkbasketService } from 'app/shared/services/workbasket/workbasket.service';
 import { ClassificationsService } from 'app/shared/services/classifications/classifications.service';

web/src/app/workplace/components/task/task.component.html

@@ -28,7 +28,7 @@
   </div>
   <div class="panel-body" *ngIf="task">
     <div class="row">
-      <form #TaskForm="ngForm">
+      <ng-form #TaskForm="ngForm">
         <div class="col-md-6">
           <div class="form-group">
             <label for="task-description" class="control-label">Description</label>
@@ -48,7 +48,7 @@
               [(ngModel)]="task.due" name="task.due">
           </div>
         </div>
-      </form>
+      </ng-form>
     </div>
     <div class="row">
       <iframe class="col-xs-12" *ngIf="link" [src]="link"></iframe>

web/src/app/workplace/components/taskdetails-general/general-fields.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="task && !requestInProgress">
-  <form #TaskForm="ngForm" autocomplete="off">
+  <ng-form #TaskForm="ngForm" autocomplete="off">
     <div class="col-md-6">
       <div class="row">
         <div class="form-group col-xs-6 required">
@@ -136,5 +136,5 @@
         </div>
       </div>
     </div>
-  </form>
+  </ng-form>
 </ng-container>

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

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

web/src/tsconfig.app.json

@@ -5,5 +5,14 @@
     "baseUrl": "",
     "types": []
   },
-  "exclude": ["test.ts", "**/*.spec.ts"]
+  "files": [
+    "main.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ],
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
 }