Uplift to Angular 9

Change-Id: I39713145975ba0e047ecf82960c2c292cc580467
Signed-off-by: elinuxhenrik <henrik.b.andersson@est.tech>
Issue-ID: NONRTRIC-446
diff --git a/webapp-frontend/angular.json b/webapp-frontend/angular.json
index 22246ff..2dc54e2 100644
--- a/webapp-frontend/angular.json
+++ b/webapp-frontend/angular.json
@@ -10,13 +10,14 @@
       "prefix": "rd",
       "schematics": {
         "@schematics/angular:component": {
-          "styleext": "scss"
-            }
-        },
+          "style": "scss"
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "aot": true,
             "outputPath": "dist/controlpanelApp",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -31,15 +32,12 @@
               "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
               "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
               "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
-              "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
-              "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
-              "node_modules/material-design-icons/iconfont/material-icons.css",
               "src/styles.scss",
               "node_modules/ngx-toastr/toastr.css"
             ],
             "scripts": [
-            "node_modules/chart.js/dist/Chart.js",
-            "node_modules/hammerjs/hammer.min.js"
+              "node_modules/chart.js/dist/Chart.js",
+              "node_modules/hammerjs/hammer.min.js"
             ]
           },
           "configurations": {
@@ -64,10 +62,20 @@
                   "type": "initial",
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
                 }
               ]
             },
             "mock": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -158,4 +166,4 @@
     }
   },
   "defaultProject": "controlpanelApp"
-}
+}
\ No newline at end of file
diff --git a/webapp-frontend/package.json b/webapp-frontend/package.json
index e4a5600..7ba20bc 100644
--- a/webapp-frontend/package.json
+++ b/webapp-frontend/package.json
@@ -12,49 +12,48 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^8.2.14",
-    "@angular/cdk": "^7.3.7",
-    "@angular/common": "^8.2.14",
-    "@angular/flex-layout": "^7.0.0-beta.24",
-    "@angular/forms": "^8.2.14",
-    "@angular/platform-browser": "^8.2.14",
-    "@angular/platform-browser-dynamic": "^8.2.14",
-    "@angular/router": "^8.2.14",
-    "@fortawesome/fontawesome-free": "^5.12.0",
+    "@angular/animations": "^9.1.13",
+    "@angular/cdk": "^9.2.3",
+    "@angular/common": "^9.1.13",
+    "@angular/flex-layout": "^9.0.0-beta.31",
+    "@angular/forms": "^9.1.13",
+    "@angular/platform-browser": "^9.1.13",
+    "@angular/platform-browser-dynamic": "^9.1.13",
+    "@angular/router": "^9.1.13",
+    "@fortawesome/fontawesome-free": "^5.15.2",
     "@kubernetes/client-node": "^0.12.3",
-    "@material/radio": "^2.3.0",
     "@types/chart.js": "^2.9.11",
     "@types/uuid": "^7.0.3",
-    "angular-bootstrap-md": "^7.5.4",
+    "angular-bootstrap-md": "^9.2.0",
     "angular6-json-schema-form": "^8.0.0",
     "bootstrap": "^4.4.1",
     "chart.js": "^2.9.3",
     "core-js": "^2.6.11",
     "hammerjs": "^2.0.8",
+    "jquery": "^1.9.1",
     "lodash-es": "^4.17.15",
-    "material-design-icons": "^3.0.1",
-    "ng2-charts": "^1.6.0",
+    "ng2-charts": "^2.4.2",
     "ng2-completer": "^2.0.8",
     "ngx-cookie": "^4.1.2",
-    "ngx-toastr": "^10.2.0",
+    "ngx-toastr": "^11.0.0",
     "rxjs": "6.5.3",
     "rxjs-compat": "6.3.3",
     "tslib": "^1.10.0",
-    "zone.js": "~0.9.1"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.803.29",
-    "@angular/cli": "^8.3.23",
-    "@angular/compiler": "^8.2.14",
-    "@angular/compiler-cli": "^8.2.14",
-    "@angular/core": "^8.2.14",
-    "@angular/language-service": "^8.2.14",
-    "@angular/material": "^7.2.2",
+    "@angular-devkit/build-angular": "~0.901.14",
+    "@angular/cli": "^9.1.13",
+    "@angular/compiler": "^9.1.13",
+    "@angular/compiler-cli": "^9.1.13",
+    "@angular/core": "^9.1.13",
+    "@angular/language-service": "^9.1.13",
+    "@angular/material": "^9.2.4",
     "@nguniversal/express-engine": "^8.2.6",
     "@types/jasmine": "^2.8.16",
     "@types/jasminewd2": "^2.0.8",
-    "@types/node": "~8.9.4",
-    "codelyzer": "^5.2.1",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^5.1.2",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~3.1.1",
@@ -65,7 +64,7 @@
     "protractor": "^5.4.3",
     "ts-node": "~7.0.0",
     "tslint": "~5.11.0",
-    "typescript": "~3.5.3"
+    "typescript": "~3.8.3"
   },
   "comments": {
     "dependencies": {
diff --git a/webapp-frontend/src/app/app.component.spec.ts b/webapp-frontend/src/app/app.component.spec.ts
index af5126c..bb65313 100644
--- a/webapp-frontend/src/app/app.component.spec.ts
+++ b/webapp-frontend/src/app/app.component.spec.ts
@@ -52,7 +52,7 @@
   beforeEach(() => {
     fixture = TestBed.createComponent(AppComponent);
     app = fixture.componentInstance;
-    uiService = TestBed.get(UiService);
+    uiService = TestBed.inject(UiService);
     fixture.detectChanges();
   });
 
diff --git a/webapp-frontend/src/app/app.module.ts b/webapp-frontend/src/app/app.module.ts
index 6cfabc8..09757d6 100644
--- a/webapp-frontend/src/app/app.module.ts
+++ b/webapp-frontend/src/app/app.module.ts
@@ -20,20 +20,31 @@
  * ========================LICENSE_END===================================
  */
 import { BrowserModule } from '@angular/platform-browser';
-// tslint:disable-next-line:max-line-length
-import {
-  MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule,
-  MatDialogModule, MatExpansionModule, MatFormFieldModule, MatGridListModule,
-  MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatPaginatorModule,
-  MatProgressSpinnerModule, MatSelectModule, MatSidenavModule, MatSliderModule,
-  MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule,
-  MatTabsModule, MatToolbarModule
-} from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { NgModule } from '@angular/core';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatTooltipModule } from '@angular/material/tooltip';
 import { ChartsModule } from 'ng2-charts';
 import { MDBBootstrapModule } from 'angular-bootstrap-md';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -95,7 +106,6 @@
     MatCardModule,
     MatCheckboxModule,
     MatDialogModule,
-    MaterialDesignFrameworkModule,
     MatExpansionModule,
     MatFormFieldModule,
     MatGridListModule,
@@ -104,18 +114,16 @@
     MatListModule,
     MatMenuModule,
     MatPaginatorModule,
-    MatProgressSpinnerModule,
-    MatRadioModule,
     MatSelectModule,
-    MatSliderModule,
     MatSidenavModule,
+    MatSliderModule,
     MatSlideToggleModule,
     MatSnackBarModule,
     MatSortModule,
     MatTableModule,
     MatTabsModule,
     MatToolbarModule,
-    MatTooltipModule,
+    MaterialDesignFrameworkModule,
     MDBBootstrapModule.forRoot(),
     ReactiveFormsModule,
     ToastrModule.forRoot(),
diff --git a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.html b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.html
index 2eb0dd2..e1832f0 100644
--- a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.html
+++ b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.html
@@ -21,7 +21,7 @@
 <div fxLayout="row">
   <div class="nrcp-global-page-title">Enrichment Information Coordinator</div>
   <div class="refresh-button">
-    <button mat-icon-button color="primary" aria-label="Button with a refresh icon" (click)="refreshTables()">
+        <button id="refreshButton" mat-icon-button color="primary" (click)="refreshTables()">
       <mat-icon>refresh</mat-icon>
     </button>
   </div>
diff --git a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.spec.ts b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.spec.ts
index f1518ce..4767de6 100644
--- a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.spec.ts
+++ b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.spec.ts
@@ -21,7 +21,8 @@
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
-import { MatIconModule, MatTableModule } from '@angular/material';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTableModule } from '@angular/material/table';
 
 import { EICoordinatorComponent } from './ei-coordinator.component';
 import { EIJobDataSource } from './ei-job.datasource';
diff --git a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.ts b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.ts
index d19e3a9..b823018 100644
--- a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.ts
+++ b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.ts
@@ -21,7 +21,7 @@
 import { Sort } from '@angular/material/sort';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { FormBuilder, FormGroup, AbstractControl } from '@angular/forms';
-import { MatTableDataSource } from '@angular/material';
+import { MatTableDataSource, MatTable } from '@angular/material/table';
 
 import { BehaviorSubject, Observable } from 'rxjs';
 
diff --git a/webapp-frontend/src/app/ei-coordinator/ei-job.datasource.spec.ts b/webapp-frontend/src/app/ei-coordinator/ei-job.datasource.spec.ts
index a891d5f..c50f69e 100644
--- a/webapp-frontend/src/app/ei-coordinator/ei-job.datasource.spec.ts
+++ b/webapp-frontend/src/app/ei-coordinator/ei-job.datasource.spec.ts
@@ -45,7 +45,7 @@
     });
 
     it('should create', () => {
-        dataSource = TestBed.get(EIJobDataSource);
+        dataSource = TestBed.inject(EIJobDataSource);
         expect(dataSource).toBeTruthy();
     });
 
diff --git a/webapp-frontend/src/app/ei-coordinator/ei-producer.datasource.spec.ts b/webapp-frontend/src/app/ei-coordinator/ei-producer.datasource.spec.ts
index b3b2f4f..0a8f820 100644
--- a/webapp-frontend/src/app/ei-coordinator/ei-producer.datasource.spec.ts
+++ b/webapp-frontend/src/app/ei-coordinator/ei-producer.datasource.spec.ts
@@ -68,7 +68,7 @@
     });
 
     it('should create', () => {
-        dataSource = TestBed.get(EIProducerDataSource);
+        dataSource = TestBed.inject(EIProducerDataSource);
         expect(dataSource).toBeTruthy();
     });
 
diff --git a/webapp-frontend/src/app/interceptor.spec.ts b/webapp-frontend/src/app/interceptor.spec.ts
index 3c35a71..775daac 100644
--- a/webapp-frontend/src/app/interceptor.spec.ts
+++ b/webapp-frontend/src/app/interceptor.spec.ts
@@ -51,12 +51,12 @@
             ]
         });
 
-        httpMock = TestBed.get(HttpTestingController);
-        service = TestBed.get(EIService);
+        httpMock = TestBed.inject(HttpTestingController);
+        service = TestBed.inject(EIService);
     });
 
     it('should create', () => {
-        const interceptors = TestBed.get(HTTP_INTERCEPTORS);
+        const interceptors = TestBed.inject(HTTP_INTERCEPTORS);
         let found = false;
         interceptors.forEach(interceptor => {
             if (interceptor instanceof HttpRequestInterceptor) {
diff --git a/webapp-frontend/src/app/policy-control/policy-control.component.html b/webapp-frontend/src/app/policy-control/policy-control.component.html
index 3deb2dd..9aa8341 100644
--- a/webapp-frontend/src/app/policy-control/policy-control.component.html
+++ b/webapp-frontend/src/app/policy-control/policy-control.component.html
@@ -21,7 +21,7 @@
   <div fxLayout="row">
     <div class="nrcp-global-page-title">Policy Control</div>
     <div class="refresh-button">
-        <button mat-icon-button color="primary" aria-label="Button with a refresh icon" (click)="refreshTables()">
+        <button mat-icon-button color="primary" (click)="refreshTables()">
             <mat-icon>refresh</mat-icon>
         </button>
     </div>
@@ -81,7 +81,3 @@
     </mat-footer-row>
 
 </table>
-
-<div class="spinner-container" *ngIf="policyTypesDataSource.loading$ | async">
-    <mat-spinner diameter="50"></mat-spinner>
-</div>
\ No newline at end of file
diff --git a/webapp-frontend/src/app/policy-control/policy-control.component.spec.ts b/webapp-frontend/src/app/policy-control/policy-control.component.spec.ts
index 73914f1..bcdb3f6 100644
--- a/webapp-frontend/src/app/policy-control/policy-control.component.spec.ts
+++ b/webapp-frontend/src/app/policy-control/policy-control.component.spec.ts
@@ -20,7 +20,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { MatDialog } from '@angular/material/dialog';
-import { MatIconModule, MatTableModule } from '@angular/material';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTableModule } from '@angular/material/table';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { of } from 'rxjs';
 
diff --git a/webapp-frontend/src/app/policy-control/policy-control.component.ts b/webapp-frontend/src/app/policy-control/policy-control.component.ts
index 5ff7e88..4227d78 100644
--- a/webapp-frontend/src/app/policy-control/policy-control.component.ts
+++ b/webapp-frontend/src/app/policy-control/policy-control.component.ts
@@ -55,7 +55,7 @@
     darkMode: boolean;
 
     constructor(
-        private policyTypesDataSource: PolicyTypeDataSource,
+        public policyTypesDataSource: PolicyTypeDataSource,
         private dialog: MatDialog,
         private ui: UiService) { }
 
diff --git a/webapp-frontend/src/app/policy-control/policy-instance.component.ts b/webapp-frontend/src/app/policy-control/policy-instance.component.ts
index 94cdb05..36c00fc 100644
--- a/webapp-frontend/src/app/policy-control/policy-instance.component.ts
+++ b/webapp-frontend/src/app/policy-control/policy-instance.component.ts
@@ -18,7 +18,7 @@
  * ========================LICENSE_END===================================
  */
 
-import { MatSort } from '@angular/material';
+import { MatSort } from '@angular/material/sort';
 import { Component, OnInit, ViewChild, Input, AfterViewInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { PolicyTypeSchema } from '../interfaces/policy.types';
diff --git a/webapp-frontend/src/app/policy-control/policy-instance.datasource.ts b/webapp-frontend/src/app/policy-control/policy-instance.datasource.ts
index 5002522..fdf9884 100644
--- a/webapp-frontend/src/app/policy-control/policy-instance.datasource.ts
+++ b/webapp-frontend/src/app/policy-control/policy-instance.datasource.ts
@@ -20,7 +20,7 @@
 
 import { DataSource } from '@angular/cdk/collections';
 import { HttpErrorResponse } from '@angular/common/http';
-import { MatSort } from '@angular/material';
+import { MatSort } from '@angular/material/sort';
 import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { merge } from 'rxjs';
diff --git a/webapp-frontend/src/app/policy-control/policy-type.datasource.spec.ts b/webapp-frontend/src/app/policy-control/policy-type.datasource.spec.ts
index aa759bc..ac19f82 100644
--- a/webapp-frontend/src/app/policy-control/policy-type.datasource.spec.ts
+++ b/webapp-frontend/src/app/policy-control/policy-type.datasource.spec.ts
@@ -70,7 +70,7 @@
     });
 
     it('should create', () => {
-      policyTypeDataSource = TestBed.get(PolicyTypeDataSource);
+      policyTypeDataSource = TestBed.inject(PolicyTypeDataSource);
       expect(policyTypeDataSource).toBeTruthy();
     });
 
diff --git a/webapp-frontend/src/app/services/ei/ei.service.spec.ts b/webapp-frontend/src/app/services/ei/ei.service.spec.ts
index cf9f2f0..6ced48c 100644
--- a/webapp-frontend/src/app/services/ei/ei.service.spec.ts
+++ b/webapp-frontend/src/app/services/ei/ei.service.spec.ts
@@ -38,7 +38,7 @@
   }));
 
   it('should be created', () => {
-    service = TestBed.get(EIService);
+    service = TestBed.inject(EIService);
     expect(service).toBeTruthy();
   });
 
@@ -46,8 +46,8 @@
     let expectedEIProducerIds: string[];
 
     beforeEach(() => {
-      service = TestBed.get(EIService);
-      httpTestingController = TestBed.get(HttpTestingController);
+      service = TestBed.inject(EIService);
+      httpTestingController = TestBed.inject(HttpTestingController);
       expectedEIProducerIds = [ 'producer1', 'producer2' ] as string[];
     });
 
@@ -70,8 +70,8 @@
     let expectedEIJobs: EIJob[];
 
     beforeEach(() => {
-      service = TestBed.get(EIService);
-      httpTestingController = TestBed.get(HttpTestingController);
+      service = TestBed.inject(EIService);
+      httpTestingController = TestBed.inject(HttpTestingController);
       expectedEIJobs = [
         { ei_job_identity: '1', ei_job_data: 'data', ei_type_identity: 'Type ID 1',  target_uri: 'hhtp://url', owner: 'owner'},
         { ei_job_identity: '2', ei_job_data: 'EI Job 2', ei_type_identity: 'Type ID 2',  target_uri: 'hhtp://url', owner: 'owner'}
@@ -97,8 +97,8 @@
     let expectedProducer: ProducerRegistrationInfo;
 
     beforeEach(() => {
-      service = TestBed.get(EIService);
-      httpTestingController = TestBed.get(HttpTestingController);
+      service = TestBed.inject(EIService);
+      httpTestingController = TestBed.inject(HttpTestingController);
       expectedProducer = {
         supported_ei_types: [ 'type1', 'type2' ]
       } as ProducerRegistrationInfo;
@@ -123,8 +123,8 @@
     let expectedProducerStatus: ProducerStatus;
 
     beforeEach(() => {
-      service = TestBed.get(EIService);
-      httpTestingController = TestBed.get(HttpTestingController);
+      service = TestBed.inject(EIService);
+      httpTestingController = TestBed.inject(HttpTestingController);
       expectedProducerStatus = {
         opState: OperationalState.ENABLED
       } as ProducerStatus;
diff --git a/webapp-frontend/src/app/services/policy/policy.service.spec.ts b/webapp-frontend/src/app/services/policy/policy.service.spec.ts
index d37bb21..095443b 100644
--- a/webapp-frontend/src/app/services/policy/policy.service.spec.ts
+++ b/webapp-frontend/src/app/services/policy/policy.service.spec.ts
@@ -44,8 +44,8 @@
     let emptyPolicyType: PolicyTypes;
 
     beforeEach(() => {
-      policyService = TestBed.get(PolicyService);
-      httpTestingController = TestBed.get(HttpTestingController);
+      policyService = TestBed.inject(PolicyService);
+      httpTestingController = TestBed.inject(HttpTestingController);
       expectedPolicytypes = {
         "policytype_ids": [
           "",
@@ -85,8 +85,8 @@
     let emptyPolicyInstances: PolicyInstances;
     let policyTypeId = '1';
     beforeEach(() => {
-      policyService = TestBed.get(PolicyService);
-      httpTestingController = TestBed.get(HttpTestingController);
+      policyService = TestBed.inject(PolicyService);
+      httpTestingController = TestBed.inject(HttpTestingController);
       expectedPolicyInstances = {
         "policy_ids": [
           "2100",
@@ -125,8 +125,8 @@
     let emptyPolicyInstances: PolicyInstances;
     let policyId = "2000";
     beforeEach(() => {
-      policyService = TestBed.get(PolicyService);
-      httpTestingController = TestBed.get(HttpTestingController);
+      policyService = TestBed.inject(PolicyService);
+      httpTestingController = TestBed.inject(HttpTestingController);
       expectedPolicyInstance = {
         "policy_id": "2000",
         "policytype_id": "1",
diff --git a/webapp-frontend/src/app/services/ui/confirm-dialog.service.spec.ts b/webapp-frontend/src/app/services/ui/confirm-dialog.service.spec.ts
index 2cc241e..8abece5 100644
--- a/webapp-frontend/src/app/services/ui/confirm-dialog.service.spec.ts
+++ b/webapp-frontend/src/app/services/ui/confirm-dialog.service.spec.ts
@@ -21,7 +21,7 @@
 import { TestBed } from '@angular/core/testing';
 
 import { ConfirmDialogService } from './confirm-dialog.service';
-import { MatDialogModule } from '@angular/material';
+import { MatDialogModule } from '@angular/material/dialog';
 import {UiService} from './ui.service';
 
 describe('ConfirmDialogService', () => {
@@ -31,7 +31,7 @@
   }));
 
   it('should be created', () => {
-    const service: ConfirmDialogService = TestBed.get(ConfirmDialogService);
+    const service: ConfirmDialogService = TestBed.inject(ConfirmDialogService);
     expect(service).toBeTruthy();
   });
 });
diff --git a/webapp-frontend/src/app/services/ui/notification.service.spec.ts b/webapp-frontend/src/app/services/ui/notification.service.spec.ts
index b6953e6..f522b11 100644
--- a/webapp-frontend/src/app/services/ui/notification.service.spec.ts
+++ b/webapp-frontend/src/app/services/ui/notification.service.spec.ts
@@ -25,7 +25,7 @@
 
 describe('NotificationService', () => {
   beforeEach(() => TestBed.configureTestingModule({
-    imports: [ToastrModule.forRoot()],  
+    imports: [ToastrModule.forRoot()],
     providers: [
         {provide: ToastrModule}
       ]
@@ -33,7 +33,7 @@
   }));
 
   it('should be created', () => {
-    const service: NotificationService = TestBed.get(NotificationService);
+    const service: NotificationService = TestBed.inject(NotificationService);
     expect(service).toBeTruthy();
   });
 });
diff --git a/webapp-frontend/src/app/ui/confirm-dialog/confirm-dialog.component.spec.ts b/webapp-frontend/src/app/ui/confirm-dialog/confirm-dialog.component.spec.ts
index c0bb760..ef0e92f 100644
--- a/webapp-frontend/src/app/ui/confirm-dialog/confirm-dialog.component.spec.ts
+++ b/webapp-frontend/src/app/ui/confirm-dialog/confirm-dialog.component.spec.ts
@@ -21,7 +21,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ConfirmDialogComponent } from './confirm-dialog.component';
-import { MatDialogModule } from '@angular/material';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 describe('ConfirmDialogComponent', () => {
diff --git a/webapp-frontend/src/app/ui/ei-card/ei-card.component.spec.ts b/webapp-frontend/src/app/ui/ei-card/ei-card.component.spec.ts
index 4b85328..797483d 100644
--- a/webapp-frontend/src/app/ui/ei-card/ei-card.component.spec.ts
+++ b/webapp-frontend/src/app/ui/ei-card/ei-card.component.spec.ts
@@ -20,7 +20,7 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {EICardComponent} from './ei-card.component';
-import { MatIconModule } from '@angular/material';
+import { MatIconModule } from '@angular/material/icon';
 import { RouterTestingModule } from '@angular/router/testing';
 import {UiService} from '../../services/ui/ui.service';
 
diff --git a/webapp-frontend/src/app/ui/policy-card/policy-card.component.spec.ts b/webapp-frontend/src/app/ui/policy-card/policy-card.component.spec.ts
index 1031db9..d97014e 100644
--- a/webapp-frontend/src/app/ui/policy-card/policy-card.component.spec.ts
+++ b/webapp-frontend/src/app/ui/policy-card/policy-card.component.spec.ts
@@ -20,7 +20,8 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {PolicyCardComponent} from './policy-card.component';
-import { MatIconModule,MatCardModule } from '@angular/material';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
 import { RouterTestingModule} from '@angular/router/testing';
 import {UiService} from '../../services/ui/ui.service';
 
diff --git a/webapp-frontend/src/index.html b/webapp-frontend/src/index.html
index 0f8ee56..4195093 100644
--- a/webapp-frontend/src/index.html
+++ b/webapp-frontend/src/index.html
@@ -26,7 +26,9 @@
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="assets/oran-logo.png">
-  </head>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
   <body>
     <nrcp-root></nrcp-root>
   </body>
diff --git a/webapp-frontend/src/styles.scss b/webapp-frontend/src/styles.scss
index 23555ed..c470e1c 100644
--- a/webapp-frontend/src/styles.scss
+++ b/webapp-frontend/src/styles.scss
@@ -42,4 +42,6 @@
   color: #432c85;
   font-size: 25px;
   font-weight: 100;
-}
\ No newline at end of file
+}
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
diff --git a/webapp-frontend/src/tsconfig.app.json b/webapp-frontend/src/tsconfig.app.json
index 190fd30..f3a1b80 100644
--- a/webapp-frontend/src/tsconfig.app.json
+++ b/webapp-frontend/src/tsconfig.app.json
@@ -4,8 +4,11 @@
     "outDir": "../out-tsc/app",
     "types": []
   },
-  "exclude": [
-    "test.ts",
-    "**/*.spec.ts"
+  "files": [
+    "main.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
   ]
 }
diff --git a/webapp-frontend/tsconfig.json b/webapp-frontend/tsconfig.json
index a94b5b6..5a33131 100644
--- a/webapp-frontend/tsconfig.json
+++ b/webapp-frontend/tsconfig.json
@@ -12,7 +12,7 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "resolveJsonModule": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],