Update Angular from 10.0 to 11.0

angular.json

@@ -55,7 +55,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,

package.json

@@ -16,15 +16,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~10.0.6",
-    "@angular/cdk": "^10.2.7",
-    "@angular/common": "~10.0.6",
-    "@angular/core": "~10.0.6",
-    "@angular/forms": "~10.0.6",
-    "@angular/material": "^10.2.7",
-    "@angular/platform-browser": "~10.0.6",
-    "@angular/platform-browser-dynamic": "~10.0.6",
-    "@angular/router": "~10.0.6",
+    "@angular/animations": "~11.2.7",
+    "@angular/cdk": "^11.2.6",
+    "@angular/common": "~11.2.7",
+    "@angular/core": "~11.2.7",
+    "@angular/forms": "~11.2.7",
+    "@angular/material": "^11.2.6",
+    "@angular/platform-browser": "~11.2.7",
+    "@angular/platform-browser-dynamic": "~11.2.7",
+    "@angular/router": "~11.2.7",
     "@capacitor/android": "2.4.5",
     "@capacitor/core": "2.4.5",
     "@capacitor/ios": "2.4.5",
@@ -46,26 +46,25 @@
     "merge-images": "^2.0.0",
     "ngx-pinch-zoom": "^2.5.5",
     "rxjs": "~6.6.3",
-    "safe-pipe": "^1.0.3",
-    "tslib": "^2.0.1",
+    "tslib": "^2.0.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1002.0",
-    "@angular/cli": "~10.2.1",
-    "@angular/compiler": "~10.0.6",
-    "@angular/compiler-cli": "~10.0.6",
-    "@angular/language-service": "~10.2.4",
+    "@angular-devkit/build-angular": "~0.1102.6",
+    "@angular/cli": "~11.2.6",
+    "@angular/compiler": "~11.2.7",
+    "@angular/compiler-cli": "~11.2.7",
+    "@angular/language-service": "~11.2.7",
     "@capacitor/cli": "2.4.5",
-    "@ionic/angular-toolkit": "^2.3.3",
-    "@types/jasmine": "~3.6.2",
+    "@ionic/angular-toolkit": "^3.1.1",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/lodash": "^4.14.166",
     "@types/node": "^14.14.16",
-    "codelyzer": "^6.0.1",
+    "codelyzer": "^6.0.0",
     "husky": "^4.3.6",
     "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~6.0.0",
+    "jasmine-spec-reporter": "~5.0.0",
     "karma": "~5.2.3",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.3",
@@ -81,7 +80,7 @@
     "ts-node": "~9.1.1",
     "tslint": "~6.1.3",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "~3.9.7"
+    "typescript": "~4.1.5"
   },
   "description": "Capture lite app.",
   "husky": {

src/app/app-routing.module.ts

@@ -73,7 +73,6 @@ const routes: Routes = [
   imports: [
     RouterModule.forRoot(routes, {
       preloadingStrategy: PreloadAllModules,
-      relativeLinkResolution: 'corrected',
     }),
   ],
   exports: [RouterModule],

src/app/app.component.spec.ts

@@ -1,6 +1,6 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { Platform } from '@ionic/angular';
 import { AppComponent } from './app.component';
 import { CapacitorPluginsTestingModule } from './shared/core/capacitor-plugins/capacitor-plugins-testing.module';
@@ -11,22 +11,26 @@ describe('AppComponent', () => {
   let platformReadySpy: Promise<void>;
   let platformSpy: Platform;
 
-  beforeEach(async(() => {
-    platformReadySpy = Promise.resolve();
-    platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
+  beforeEach(
+    waitForAsync(() => {
+      platformReadySpy = Promise.resolve();
+      platformSpy = jasmine.createSpyObj('Platform', {
+        ready: platformReadySpy,
+      });
 
-    TestBed.configureTestingModule({
-      declarations: [AppComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      imports: [
-        CapacitorPluginsTestingModule,
-        HttpClientTestingModule,
-        getTranslocoTestingModule(),
-        MaterialTestingModule,
-      ],
-      providers: [{ provide: Platform, useValue: platformSpy }],
-    }).compileComponents();
-  }));
+      TestBed.configureTestingModule({
+        declarations: [AppComponent],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA],
+        imports: [
+          CapacitorPluginsTestingModule,
+          HttpClientTestingModule,
+          getTranslocoTestingModule(),
+          MaterialTestingModule,
+        ],
+        providers: [{ provide: Platform, useValue: platformSpy }],
+      }).compileComponents();
+    })
+  );
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);

src/app/features/about/about.page.spec.ts

@@ -1,21 +1,23 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { SharedTestingModule } from '../../shared/shared-testing.module';
 import { AboutPage } from './about.page';
 
 describe('AboutPage', () => {
   let component: AboutPage;
   let fixture: ComponentFixture<AboutPage>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [AboutPage],
-      imports: [SharedTestingModule],
-    }).compileComponents();
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [AboutPage],
+        imports: [SharedTestingModule],
+      }).compileComponents();
 
-    fixture = TestBed.createComponent(AboutPage);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
+      fixture = TestBed.createComponent(AboutPage);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    })
+  );
 
   it('should create', () => {
     expect(component).toBeTruthy();

src/app/features/contacts/contacts.page.spec.ts

@@ -1,21 +1,23 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { SharedTestingModule } from '../../shared/shared-testing.module';
 import { ContactsPage } from './contacts.page';
 
 describe('ContactsPage', () => {
   let component: ContactsPage;
   let fixture: ComponentFixture<ContactsPage>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ContactsPage],
-      imports: [SharedTestingModule],
-    }).compileComponents();
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [ContactsPage],
+        imports: [SharedTestingModule],
+      }).compileComponents();
 
-    fixture = TestBed.createComponent(ContactsPage);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
+      fixture = TestBed.createComponent(ContactsPage);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    })
+  );
 
   it('should create', () => {
     expect(component).toBeTruthy();

src/app/features/home/capture-tab/capture-details/capture-details.page.spec.ts

@@ -1,21 +1,23 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { SharedTestingModule } from '../../../../shared/shared-testing.module';
 import { CaptureDetailsPage } from './capture-details.page';
 
 describe('CaptureDetailsPage', () => {
   let component: CaptureDetailsPage;
   let fixture: ComponentFixture<CaptureDetailsPage>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [CaptureDetailsPage],
-      imports: [SharedTestingModule],
-    }).compileComponents();
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [CaptureDetailsPage],
+        imports: [SharedTestingModule],
+      }).compileComponents();
 
-    fixture = TestBed.createComponent(CaptureDetailsPage);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
+      fixture = TestBed.createComponent(CaptureDetailsPage);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    })
+  );
 
   it('should create', () => {
     expect(component).toBeTruthy();

src/app/features/home/capture-tab/capture-details/contact-selection-dialog/contact-selection-dialog.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { SharedTestingModule } from '../../../../../shared/shared-testing.module';
 import { ContactSelectionDialogComponent } from './contact-selection-dialog.component';
@@ -7,20 +7,22 @@ describe('ContactSelectionDialogComponent', () => {
   let component: ContactSelectionDialogComponent;
   let fixture: ComponentFixture<ContactSelectionDialogComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ContactSelectionDialogComponent],
-      imports: [SharedTestingModule],
-      providers: [
-        { provide: MatDialogRef, useValue: {} },
-        { provide: MAT_DIALOG_DATA, useValue: {} },
-      ],
-    }).compileComponents();
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [ContactSelectionDialogComponent],
+        imports: [SharedTestingModule],
+        providers: [
+          { provide: MatDialogRef, useValue: {} },
+          { provide: MAT_DIALOG_DATA, useValue: {} },
+        ],
+      }).compileComponents();
 
-    fixture = TestBed.createComponent(ContactSelectionDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
+      fixture = TestBed.createComponent(ContactSelectionDialogComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    })
+  );
 
   it('should create', () => {
     expect(component).toBeTruthy();

src/app/features/home/capture-tab/capture-details/contact-selection-dialog/friend-invitation-dialog/friend-invitation-dialog.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { SharedTestingModule } from '../../../../../../shared/shared-testing.module';
 import { FriendInvitationDialogComponent } from './friend-invitation-dialog.component';
@@ -7,20 +7,22 @@ describe('FriendInvitationDialogComponent', () => {
   let component: FriendInvitationDialogComponent;
   let fixture: ComponentFixture<FriendInvitationDialogComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [FriendInvitationDialogComponent],
-      imports: [SharedTestingModule],
-      providers: [
-        { provide: MatDialogRef, useValue: {} },
-        { provide: MAT_DIALOG_DATA, useValue: {} },
-      ],
-    }).compileComponents();
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [FriendInvitationDialogComponent],
+        imports: [SharedTestingModule],
+        providers: [
+          { provide: MatDialogRef, useValue: {} },
+          { provide: MAT_DIALOG_DATA, useValue: {} },
+        ],
+      }).compileComponents();
 
-    fixture = TestBed.createComponent(FriendInvitationDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
+      fixture = TestBed.createComponent(FriendInvitationDialogComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    })
+  );
 
   it('should create', () => {
     expect(component).toBeTruthy();

src/app/features/home/capture-tab/capture-details/information/information.page.spec.ts

@@ -1,21 +1,23 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { SharedTestingModule } from '../../../../../shared/shared-testing.module';
 import { InformationPage } from './information.page';
 
 describe('InformationPage', () => {
   let component: InformationPage;
   let fixture: ComponentFixture<InformationPage>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [InformationPage],
-      imports: [SharedTestingModule],
-    }).compileComponents();
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [InformationPage],
+        imports: [SharedTestingModule],
+      }).compileComponents();
 
-    fixture = TestBed.createComponent(InformationPage);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
+      fixture = TestBed.createComponent(InformationPage);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    })
+  );
 
   it('should create', () => {
     expect(component).toBeTruthy();