diff --git a/interactive-mining-angular-frontend/angular.json b/interactive-mining-angular-frontend/angular.json
index 54e2d83..3f3160b 100644
--- a/interactive-mining-angular-frontend/angular.json
+++ b/interactive-mining-angular-frontend/angular.json
@@ -44,7 +44,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
diff --git a/interactive-mining-angular-frontend/package.json b/interactive-mining-angular-frontend/package.json
index 1bb8cdd..2cd2d79 100755
--- a/interactive-mining-angular-frontend/package.json
+++ b/interactive-mining-angular-frontend/package.json
@@ -13,15 +13,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^10.2.5",
-    "@angular/common": "^10.2.5",
-    "@angular/compiler": "^10.2.5",
-    "@angular/core": "^10.2.5",
-    "@angular/forms": "^10.2.5",
-    "@angular/localize": "^10.2.5",
-    "@angular/platform-browser": "^10.2.5",
-    "@angular/platform-browser-dynamic": "^10.2.5",
-    "@angular/router": "^10.2.5",
+    "@angular/animations": "^11.2.14",
+    "@angular/common": "^11.2.14",
+    "@angular/compiler": "^11.2.14",
+    "@angular/core": "^11.2.14",
+    "@angular/forms": "^11.2.14",
+    "@angular/localize": "^11.2.14",
+    "@angular/platform-browser": "^11.2.14",
+    "@angular/platform-browser-dynamic": "^11.2.14",
+    "@angular/router": "^11.2.14",
     "core-js": "^2.4.1",
     "file-saver": "^2.0.2",
     "jquery": "^3.4.1",
@@ -34,24 +34,24 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1002.3",
-    "@angular/cli": "^10.2.3",
-    "@angular/compiler-cli": "^10.2.5",
-    "@angular/language-service": "^10.2.5",
+    "@angular-devkit/build-angular": "~0.1102.14",
+    "@angular/cli": "^11.2.14",
+    "@angular/compiler-cli": "^11.2.14",
+    "@angular/language-service": "^11.2.14",
     "@types/file-saver": "^2.0.1",
-    "@types/jasmine": "~3.3.13",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.6",
     "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
-    "jasmine-core": "~3.5.0",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.0.0",
+    "karma": "~6.3.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-cli": "~2.0.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^10.1.0",
+    "ng-packagr": "^11.2.4",
     "protractor": "~7.0.0",
     "ts-node": "~8.2.0",
     "typescript": "~4.0.7"
diff --git a/interactive-mining-angular-frontend/src/app/app.component.spec.ts b/interactive-mining-angular-frontend/src/app/app.component.spec.ts
index 9510495..1e2a27c 100755
--- a/interactive-mining-angular-frontend/src/app/app.component.spec.ts
+++ b/interactive-mining-angular-frontend/src/app/app.component.spec.ts
@@ -1,9 +1,9 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
         AppComponent
@@ -11,19 +11,19 @@ describe('AppComponent', () => {
     }).compileComponents();
   }));
 
-  it('should create the app', async(() => {
+  it('should create the app', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));
 
-  it(`should have as title 'app'`, async(() => {
+  it(`should have as title 'app'`, waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app.title).toEqual('app');
   }));
 
-  it('should render title in a h1 tag', async(() => {
+  it('should render title in a h1 tag', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
diff --git a/interactive-mining-angular-frontend/src/app/configuration/configuration.component.spec.ts b/interactive-mining-angular-frontend/src/app/configuration/configuration.component.spec.ts
index 2817e13..0877a68 100755
--- a/interactive-mining-angular-frontend/src/app/configuration/configuration.component.spec.ts
+++ b/interactive-mining-angular-frontend/src/app/configuration/configuration.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ConfigurationComponent } from './configuration.component';
 
@@ -6,7 +6,7 @@ describe('ConfigurationComponent', () => {
   let component: ConfigurationComponent;
   let fixture: ComponentFixture<ConfigurationComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ConfigurationComponent ]
     })
diff --git a/interactive-mining-angular-frontend/src/app/configuration/resultspreview/resultspreview.component.spec.ts b/interactive-mining-angular-frontend/src/app/configuration/resultspreview/resultspreview.component.spec.ts
index 5edf17e..8171a1e 100755
--- a/interactive-mining-angular-frontend/src/app/configuration/resultspreview/resultspreview.component.spec.ts
+++ b/interactive-mining-angular-frontend/src/app/configuration/resultspreview/resultspreview.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ResultspreviewComponent } from './resultspreview.component';
 
@@ -6,7 +6,7 @@ describe('ResultspreviewComponent', () => {
   let component: ResultspreviewComponent;
   let fixture: ComponentFixture<ResultspreviewComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ResultspreviewComponent ]
     })
diff --git a/interactive-mining-angular-frontend/src/app/configuration/settings/settings.component.spec.ts b/interactive-mining-angular-frontend/src/app/configuration/settings/settings.component.spec.ts
index 12311fd..596139f 100755
--- a/interactive-mining-angular-frontend/src/app/configuration/settings/settings.component.spec.ts
+++ b/interactive-mining-angular-frontend/src/app/configuration/settings/settings.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SettingsComponent } from './settings.component';
 
@@ -6,7 +6,7 @@ describe('SettingsComponent', () => {
   let component: SettingsComponent;
   let fixture: ComponentFixture<SettingsComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SettingsComponent ]
     })
diff --git a/interactive-mining-angular-frontend/src/app/contents/contents.component.spec.ts b/interactive-mining-angular-frontend/src/app/contents/contents.component.spec.ts
index 9ac9edf..553bdf9 100755
--- a/interactive-mining-angular-frontend/src/app/contents/contents.component.spec.ts
+++ b/interactive-mining-angular-frontend/src/app/contents/contents.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ContentComponent } from './contents.component';
 
@@ -6,7 +6,7 @@ describe('ContentComponent', () => {
   let component: ContentComponent;
   let fixture: ComponentFixture<ContentComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ContentComponent ]
     })
diff --git a/interactive-mining-angular-frontend/src/app/manageprofiles/manageprofiles.component.spec.ts b/interactive-mining-angular-frontend/src/app/manageprofiles/manageprofiles.component.spec.ts
index 35d8b52..576a68b 100755
--- a/interactive-mining-angular-frontend/src/app/manageprofiles/manageprofiles.component.spec.ts
+++ b/interactive-mining-angular-frontend/src/app/manageprofiles/manageprofiles.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ManageprofilesComponent } from './manageprofiles.component';
 
@@ -6,7 +6,7 @@ describe('ManageprofilesComponent', () => {
   let component: ManageprofilesComponent;
   let fixture: ComponentFixture<ManageprofilesComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ManageprofilesComponent ]
     })
diff --git a/interactive-mining-angular-frontend/src/app/saveprofile/saveprofile.component.spec.ts b/interactive-mining-angular-frontend/src/app/saveprofile/saveprofile.component.spec.ts
index c042c96..7bb03ef 100755
--- a/interactive-mining-angular-frontend/src/app/saveprofile/saveprofile.component.spec.ts
+++ b/interactive-mining-angular-frontend/src/app/saveprofile/saveprofile.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SaveprofileComponent } from './saveprofile.component';
 
@@ -6,7 +6,7 @@ describe('SaveprofileComponent', () => {
   let component: SaveprofileComponent;
   let fixture: ComponentFixture<SaveprofileComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SaveprofileComponent ]
     })
diff --git a/interactive-mining-angular-frontend/src/app/stepsnvabar/stepsnvabar.component.spec.ts b/interactive-mining-angular-frontend/src/app/stepsnvabar/stepsnvabar.component.spec.ts
index 320c63c..7134038 100755
--- a/interactive-mining-angular-frontend/src/app/stepsnvabar/stepsnvabar.component.spec.ts
+++ b/interactive-mining-angular-frontend/src/app/stepsnvabar/stepsnvabar.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { StepsnvabarComponent } from './stepsnvabar.component';
 
@@ -6,7 +6,7 @@ describe('StepsnvabarComponent', () => {
   let component: StepsnvabarComponent;
   let fixture: ComponentFixture<StepsnvabarComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ StepsnvabarComponent ]
     })