Update angular from 7 -> 12.

Also includes a bugfix in oauth code.
2026-01-08 20:17:54 -05:00 · 2021-08-05 18:32:19 -04:00
parent 92cececa61
commit a0d0a8bd69
84 changed files with 8759 additions and 5232 deletions
--- a/backend/pine/backend/auth/oauth.py
+++ b/backend/pine/backend/auth/oauth.py
@@ -5,6 +5,7 @@ import logging
 import sys
 import traceback
 import urllib
+import typing

 from authlib.integrations.flask_client import OAuth
 from flask import current_app, jsonify, redirect, request, Response, session
@@ -50,12 +51,13 @@ class OAuthUser(models.AuthUser):

 class OAuthModule(bp.AuthModule):
    
-    def __init__(self, app, bp, secret):
+    def __init__(self, app, bp, secret, algorithms: typing.List[str] = ["HS256"]):
        super(OAuthModule, self).__init__(app, bp)
        self.oauth = OAuth()
        self.oauth.init_app(app)
        self.app = self.register_oauth(self.oauth, app)
        self.secret = secret
+        self.algorithms = algorithms
        bp.route("/login", methods=["POST"])(self.login)
        bp.route("/authorize", methods=["GET"])(self.authorize_get)
        bp.route("/authorize", methods=["POST"])(self.authorize_post)
@@ -99,8 +101,8 @@ class OAuthModule(bp.AuthModule):
            raise exceptions.SecurityError(description = str(e))
        access_token = token["access_token"]
        try:
-            decoded = jwt.decode(access_token, self.secret, verify = False)
-            decoded = jwt.decode(access_token, self.secret, verify = True, audience = decoded["aud"])
+            decoded = jwt.decode(access_token, options={"verify_signature": False})
+            decoded = jwt.decode(access_token, self.secret, audience=decoded["aud"], algorithms=self.algorithms)
        except jwt.exceptions.InvalidTokenError as e:
            traceback.print_exc()
            sys.stderr.flush()
--- a/check.sh
+++ b/check.sh
@@ -0,0 +1,22 @@
+#!/bin/bash
+# (C) 2021 The Johns Hopkins University Applied Physics Laboratory LLC.
+
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+
+echo "Checking dependencies for security issues..."
+
+for MOD in backend client docs eve pipelines test; do
+    pushd ${DIR}/${MOD} &> /dev/null
+    echo ""
+    echo "    Checking ${MOD}..."
+    pipenv check
+    popd &> /dev/null
+done
+
+for MOD in frontend/annotation test/tests; do
+    pushd ${DIR}/${MOD} &> /dev/null
+    echo ""
+    echo "    Checking ${MOD}..."
+    npm audit
+    popd &> /dev/null
+done
--- a/frontend/annotation/.browserslistrc
+++ b/frontend/annotation/.browserslistrc
@@ -0,0 +1,10 @@
+# (C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC.
+# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+# For IE 9-11 support, please uncomment the last line of the file and adjust as needed
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+IE 9-11
--- a/frontend/annotation/angular.json
+++ b/frontend/annotation/angular.json
@@ -13,6 +13,9 @@
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
+            "allowedCommonJsDependencies": [
+                "chart.js", "papaparse", "venn.js"
+            ],
            "outputPath": "dist/pine",
            "index": "src/index.html",
            "main": "src/main.ts",
@@ -28,10 +31,22 @@
            ],
            "scripts": [
                "node_modules/jquery/dist/jquery.min.js"
-            ]
+            ],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
          },
          "configurations": {
            "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
@@ -41,14 +56,13 @@
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
-              "extractCss": true,
              "namedChunks": false,
-              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
-          }
+          },
+          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
--- a/frontend/annotation/e2e/tsconfig.json
+++ b/frontend/annotation/e2e/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
--- a/frontend/annotation/package-lock.json
+++ b/frontend/annotation/package-lock.json
--- a/frontend/annotation/package.json
+++ b/frontend/annotation/package.json
@@ -1,69 +1,67 @@
 {
  "name": "pine",
-  "version": "1.3.0-develop",
+  "version": "1.4.0-develop",
  "scripts": {
    "ng": "ng",
-    "start": "ng serve --progress=false",
+    "start": "ng serve",
    "build": "ng build",
-    "prod": "ng build --prod",
+    "prod": "ng build --configuration production",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^7.2.15",
-    "@angular/cdk": "^7.3.7",
-    "@angular/common": "^7.2.15",
-    "@angular/compiler": "^7.2.15",
-    "@angular/core": "^7.2.15",
-    "@angular/flex-layout": "^7.0.0-beta.24",
-    "@angular/forms": "^7.2.15",
-    "@angular/http": "^7.2.15",
-    "@angular/material": "^7.3.7",
-    "@angular/platform-browser": "^7.2.15",
-    "@angular/platform-browser-dynamic": "^7.2.15",
-    "@angular/router": "^7.2.15",
+    "@angular/animations": "^12.2.0",
+    "@angular/cdk": "^12.2.0",
+    "@angular/common": "^12.2.0",
+    "@angular/compiler": "^12.2.0",
+    "@angular/core": "^12.2.0",
+    "@angular/flex-layout": "^12.0.0-beta.34",
+    "@angular/forms": "^12.2.0",
+    "@angular/material": "^12.2.0",
+    "@angular/platform-browser": "^12.2.0",
+    "@angular/platform-browser-dynamic": "^12.2.0",
+    "@angular/router": "^12.2.0",
    "angular-local-storage": "^0.7.1",
-    "chart.js": "^2.9.3",
+    "chart.js": "^2.9.4",
    "classlist.js": "^1.1.20150312",
-    "core-js": "^2.6.10",
-    "d3": "^5.12.0",
-    "hammerjs": "^2.0.8",
-    "jquery": "^3.5.1",
-    "material-icons": "^0.3.1",
-    "ng2-charts": "^2.3.0",
-    "ng2-panzoom": "^2.1.0",
-    "papaparse": "^5.2.0",
-    "roboto-fontface": "^0.9.0",
-    "rxjs": "^6.5.3",
-    "tippy.js": "^3.4.1",
-    "tslib": "^1.10.0",
+    "core-js": "^3.16.0",
+    "d3": "^5.16.0",
+    "jquery": "^3.6.0",
+    "material-icons": "^1.1.0",
+    "ng2-charts": "^2.4.3",
+    "ngx-panzoom": "^11.0.0",
+    "papaparse": "^5.3.1",
+    "roboto-fontface": "^0.10.0",
+    "rxjs": "^6.6.7",
+    "tippy.js": "^6.3.1",
+    "tslib": "^2.3.0",
    "venn.js": "^0.2.20",
    "web-animations-js": "^2.3.2",
-    "zone.js": "^0.8.29"
+    "zone.js": "~0.11.4"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^0.13.10",
-    "@angular/cli": "^7.3.9",
-    "@angular/compiler-cli": "^7.2.15",
-    "@angular/language-service": "^7.2.15",
-    "@types/jasmine": "^2.8.16",
-    "@types/jasminewd2": "^2.0.8",
-    "@types/lodash": "^4.14.137",
-    "@types/node": "~8.9.4",
-    "codelyzer": "~4.2.1",
-    "jasmine-core": "~2.99.1",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "^5.1.0",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "^2.1.0",
-    "karma-jasmine": "~1.1.1",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "^7.0.0",
+    "@angular-devkit/build-angular": "^12.2.0",
+    "@angular/cli": "^12.2.0",
+    "@angular/compiler-cli": "^12.2.0",
+    "@angular/language-service": "^12.2.0",
+    "@types/jasmine": "^3.8.2",
+    "@types/jasminewd2": "^2.0.10",
+    "@types/lodash": "^4.14.172",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "^3.8.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~6.3.4",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "protractor": "~7.0.0",
    "ts-node": "~5.0.1",
-    "tslint": "~5.9.1",
-    "typescript": "~3.1.6",
-    "webpack-dev-server": "^3.9.0"
+    "tslint": "~6.1.0",
+    "typescript": "~4.3.5",
+    "webpack-dev-server": "^3.11.2"
  }
 }
--- a/frontend/annotation/src/app/app.component.spec.ts
+++ b/frontend/annotation/src/app/app.component.spec.ts
@@ -1,26 +1,26 @@
 // (C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC.

-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
      ],
    }).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;
--- a/frontend/annotation/src/app/app.component.ts
+++ b/frontend/annotation/src/app/app.component.ts
@@ -6,7 +6,7 @@ import { AppConfig } from "./app.config";
 import { HttpErrorResponse } from "@angular/common/http";
 import { Router, ActivatedRoute, NavigationEnd } from "@angular/router";
 import { Title } from '@angular/platform-browser';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';

 import { Observable } from 'rxjs';
 import { filter, map, switchMap } from 'rxjs/operators';
@@ -35,7 +35,7 @@ export class AppComponent implements OnInit, AfterViewInit {

    public title: string = 'PINE';

-    @ViewChild(StatusBarComponent)
+    @ViewChild(StatusBarComponent, { static: true })
    public statusBar: StatusBarComponent;

    constructor(private titleService: Title, private router: Router, private route: ActivatedRoute,
--- a/frontend/annotation/src/app/app.module.ts
+++ b/frontend/annotation/src/app/app.module.ts
@@ -11,46 +11,41 @@ import { HttpClientModule } from "@angular/common/http";
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { FlexLayoutModule } from '@angular/flex-layout';

-import {
-    MatAutocompleteModule,
-    MatBadgeModule,
-    MatBottomSheetModule,
-    MatButtonModule,
-    MatButtonToggleModule,
-    MatCardModule,
-    MatChipsModule,
-    MatDatepickerModule,
-    MatDialogModule,
-    MatDividerModule,
-    MatExpansionModule,
-    MatGridListModule,
-    MatIconModule,
-    MatInputModule,
-    MatListModule,
-    MatMenuModule,
-    MatNativeDateModule,
-    MatPaginatorModule,
-    MatProgressBarModule,
-    MatProgressSpinnerModule,
-    MatRadioModule,
-    MatRippleModule,
-    MatSelectModule,
-    MatSidenavModule,
-    MatSliderModule,
-    MatSlideToggleModule,
-    MatSnackBarModule,
-    MatSortModule,
-    MatStepperModule,
-    MatTableModule,
-    MatTabsModule,
-    MatToolbarModule,
-    MatTooltipModule,
-    MatTreeModule,
-} from "@angular/material";
+import { MatAutocompleteModule } from "@angular/material/autocomplete";
+import { MatBadgeModule } from "@angular/material/badge";
+import { MatBottomSheetModule } from "@angular/material/bottom-sheet";
+import { MatButtonModule } from "@angular/material/button";
+import { MatButtonToggleModule } from "@angular/material/button-toggle";
+import { MatCardModule } from "@angular/material/card";
+import { MatChipsModule } from "@angular/material/chips";
+import { MatNativeDateModule, MatRippleModule } from "@angular/material/core";
+import { MatDatepickerModule } from "@angular/material/datepicker";
+import { MatDialogModule } from "@angular/material/dialog";
+import { MatDividerModule } from "@angular/material/divider";
+import { MatExpansionModule } from "@angular/material/expansion";
+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 { MatProgressBarModule } from "@angular/material/progress-bar";
+import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import { MatRadioModule } from "@angular/material/radio";
+import { MatSelectModule } from "@angular/material/select";
+import { MatSidenavModule } from "@angular/material/sidenav";
+import { MatSlideToggleModule } from "@angular/material/slide-toggle";
+import { MatSliderModule } from "@angular/material/slider";
+import { MatSnackBarModule } from "@angular/material/snack-bar";
+import { MatSortModule } from "@angular/material/sort";
+import { MatStepperModule } from "@angular/material/stepper";
+import { MatTableModule } from "@angular/material/table";
+import { MatTabsModule } from "@angular/material/tabs";
+import { MatToolbarModule } from "@angular/material/toolbar";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { MatTreeModule } from "@angular/material/tree";
 import { MatCheckboxModule } from "@angular/material/checkbox";
-import { Ng2PanZoomModule } from "ng2-panzoom";
-
-import "hammerjs";
+import { NgxPanZoomModule } from "ngx-panzoom";

 import { AppConfig } from "./app.config";
 import { routing } from "./app.routing";
@@ -194,7 +189,7 @@ export function initializeApp(appConfig: AppConfig) {
        BrowserAnimationsModule,
        HttpClientModule,
        FormsModule,
-        Ng2PanZoomModule,
+        NgxPanZoomModule,
        routing
    ],
    providers: [
@@ -216,19 +211,6 @@ export function initializeApp(appConfig: AppConfig) {
        ImageFilterService,
        StatusBarService
    ],
-    bootstrap: [AppComponent],
-    entryComponents: [
-        MessageDialogComponent,
-        DownloadCollectionDataDialogComponent,
-        AddAnnotatorDialog,
-        AddLabelDialog,
-        AddViewerDialog,
-        ImageChooserDialog,
-        ImageCollectionUploaderDialog,
-        AboutComponent,
-        AddCollectionComponent,
-        AddDocumentComponent
-    ]
-
+    bootstrap: [AppComponent]
 })
 export class AppModule { }
--- a/frontend/annotation/src/app/app.routing.ts
+++ b/frontend/annotation/src/app/app.routing.ts
@@ -42,4 +42,4 @@ const appRoutes: Routes = [
    {path: "**", redirectTo: PATHS.collection.view}
 ];

-export const routing = RouterModule.forRoot(appRoutes);
+export const routing = RouterModule.forRoot(appRoutes, { relativeLinkResolution: 'legacy' });
--- a/frontend/annotation/src/app/component/about/about.component.spec.ts
+++ b/frontend/annotation/src/app/component/about/about.component.spec.ts
@@ -1,6 +1,6 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";

 import { AboutComponent } from "./about.component";

@@ -8,7 +8,7 @@ describe("AboutComponent", () => {
    let component: AboutComponent;
    let fixture: ComponentFixture<AboutComponent>;

-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
            declarations: [ AboutComponent ]
        })
--- a/frontend/annotation/src/app/component/about/about.component.ts
+++ b/frontend/annotation/src/app/component/about/about.component.ts
@@ -1,14 +1,14 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

 import { Component, OnInit, Input } from "@angular/core";
-import { MatDialog, MatDialogRef, MatDialogConfig } from "@angular/material";
+import { MatDialog, MatDialogRef, MatDialogConfig } from "@angular/material/dialog";

 import { take } from "rxjs/operators";

 import { BackendService } from "../../service/backend/backend.service";

 import { About } from "../../model/backend";
-import { version } from "../../../../package.json";
+import packageInfo from "../../../../package.json";

 export interface VersionRow {
    component: string,
@@ -27,7 +27,7 @@ export class AboutComponent implements OnInit {

    @Input()
    public about: About;
-    public version = version;
+    public version = packageInfo.version;
    public error = undefined;

    public tableData: VersionRow[];
--- a/frontend/annotation/src/app/component/account/account.component.spec.ts
+++ b/frontend/annotation/src/app/component/account/account.component.spec.ts
@@ -1,6 +1,6 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { AccountComponent } from './account.component';

@@ -8,7 +8,7 @@ describe('AccountComponent', () => {
  let component: AccountComponent;
  let fixture: ComponentFixture<AccountComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ AccountComponent ]
    })
--- a/frontend/annotation/src/app/component/add-collection/add-collection.component.spec.ts
+++ b/frontend/annotation/src/app/component/add-collection/add-collection.component.spec.ts
@@ -1,5 +1,5 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { AddCollectionComponent } from './add-collection.component';

@@ -7,7 +7,7 @@ describe('AddCollectionComponent', () => {
  let component: AddCollectionComponent;
  let fixture: ComponentFixture<AddCollectionComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ AddCollectionComponent ]
    })
--- a/frontend/annotation/src/app/component/add-collection/add-collection.component.ts
+++ b/frontend/annotation/src/app/component/add-collection/add-collection.component.ts
@@ -23,7 +23,7 @@ import { PATHS } from "../../app.paths";
 import { Collection, CONFIG_ALLOW_OVERLAPPING_NER_ANNOTATIONS } from "../../model/collection";
 import { Pipeline } from "../../model/pipeline";
 import { CreatedObject } from "../../model/created";
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';

@Component({
    selector: "app-add-collection",
--- a/frontend/annotation/src/app/component/add-document/add-document.component.spec.ts
+++ b/frontend/annotation/src/app/component/add-document/add-document.component.spec.ts
@@ -1,5 +1,5 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { AddDocumentComponent } from './add-document.component';

@@ -7,7 +7,7 @@ describe('AddDocumentComponent', () => {
  let component: AddDocumentComponent;
  let fixture: ComponentFixture<AddDocumentComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ AddDocumentComponent ]
    })
--- a/frontend/annotation/src/app/component/add-document/add-document.component.ts
+++ b/frontend/annotation/src/app/component/add-document/add-document.component.ts
@@ -16,7 +16,7 @@ import { CreatedObject } from "../../model/created";

 import { ImageChooserComponent } from "../image-chooser/image-chooser.component";
 import { uuidv4 } from "../util";
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Collection } from 'src/app/model/collection';

 export class AddDocumentDialogData {
@@ -44,7 +44,7 @@ export class AddDocumentComponent implements OnInit, AfterViewInit {
    public createForm: FormGroup;
    public collection_id: string;

-    @ViewChild(ImageChooserComponent)
+    @ViewChild(ImageChooserComponent, { static: true })
    public imageChooser: ImageChooserComponent;

    constructor(private auth: AuthService,
--- a/frontend/annotation/src/app/component/admin-data/admin-data.component.spec.ts
+++ b/frontend/annotation/src/app/component/admin-data/admin-data.component.spec.ts
@@ -1,5 +1,5 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { AdminDataComponent } from './admin-data.component';

@@ -7,7 +7,7 @@ describe('AdminDataComponent', () => {
  let component: AdminDataComponent;
  let fixture: ComponentFixture<AdminDataComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ AdminDataComponent ]
    })
--- a/frontend/annotation/src/app/component/admin-data/admin-data.component.ts
+++ b/frontend/annotation/src/app/component/admin-data/admin-data.component.ts
@@ -1,7 +1,7 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */
 import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
 import { HttpErrorResponse, HttpResponse } from "@angular/common/http";
-import { MatButton } from "@angular/material";
+import { MatButton } from "@angular/material/button";

 import { PATHS } from "../../app.paths";

@@ -24,24 +24,24 @@ export class AdminDataComponent implements OnInit {

    public importDropFirst = false;

-    @ViewChild("exportDownload")
+    @ViewChild("exportDownload", { static: true })
    public exportDownload: ElementRef;

-    @ViewChild("fileDisplay")
+    @ViewChild("fileDisplay", { static: true })
    public fileDisplay: ElementRef;

    public file: File;

-    @ViewChild("importButton")
+    @ViewChild("importButton", { static: true })
    public importButton: MatButton;

    public exporting = false;
    public importing = false;

-    @ViewChild("exportError")
+    @ViewChild("exportError", { static: true })
    public exportError: ErrorComponent;

-    @ViewChild("importError")
+    @ViewChild("importError", { static: true })
    public importError: ErrorComponent;

    constructor(private admin: AdminService,
--- a/frontend/annotation/src/app/component/admin-user-modify/admin-user-modify.component.spec.ts
+++ b/frontend/annotation/src/app/component/admin-user-modify/admin-user-modify.component.spec.ts
@@ -1,5 +1,5 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { AdminUserModifyComponent } from './admin-user-modify.component';

@@ -7,7 +7,7 @@ describe('AdminUserModifyComponent', () => {
  let component: AdminUserModifyComponent;
  let fixture: ComponentFixture<AdminUserModifyComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ AdminUserModifyComponent ]
    })
--- a/frontend/annotation/src/app/component/admin-users/admin-users.component.spec.ts
+++ b/frontend/annotation/src/app/component/admin-users/admin-users.component.spec.ts
@@ -1,5 +1,5 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { AdminUsersComponent } from './admin-users.component';

@@ -7,7 +7,7 @@ describe('AdminUsersComponent', () => {
  let component: AdminUsersComponent;
  let fixture: ComponentFixture<AdminUsersComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ AdminUsersComponent ]
    })
--- a/frontend/annotation/src/app/component/admin-users/admin-users.component.ts
+++ b/frontend/annotation/src/app/component/admin-users/admin-users.component.ts
@@ -1,6 +1,8 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */
 import { Component, OnInit, ViewChild } from "@angular/core";
-import { MatSort, MatTableDataSource, MatDialog } from "@angular/material";
+import { MatDialog } from "@angular/material/dialog";
+import { MatSort } from "@angular/material/sort";
+import { MatTableDataSource } from "@angular/material/table";
 import { FormBuilder, FormGroup, FormControl, FormArray, Validators, ValidationErrors, AbstractControl } from "@angular/forms";
 import { HttpErrorResponse } from "@angular/common/http";

--- a/frontend/annotation/src/app/component/admin/admin.component.spec.ts
+++ b/frontend/annotation/src/app/component/admin/admin.component.spec.ts
@@ -1,5 +1,5 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { AdminComponent } from './admin.component';

@@ -7,7 +7,7 @@ describe('AdminComponent', () => {
  let component: AdminComponent;
  let fixture: ComponentFixture<AdminComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ AdminComponent ]
    })
--- a/frontend/annotation/src/app/component/annotate/annotate.component.css
+++ b/frontend/annotation/src/app/component/annotate/annotate.component.css
@@ -1,4 +1,4 @@
-/*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */
+/* (C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

 :host {
    display: block;
--- a/frontend/annotation/src/app/component/annotate/annotate.component.spec.ts
+++ b/frontend/annotation/src/app/component/annotate/annotate.component.spec.ts
@@ -1,5 +1,5 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { AnnotateComponent } from './annotate.component';

@@ -7,7 +7,7 @@ describe('AnnotateComponent', () => {
  let component: AnnotateComponent;
  let fixture: ComponentFixture<AnnotateComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ AnnotateComponent ]
    })
--- a/frontend/annotation/src/app/component/annotate/annotate.component.ts
+++ b/frontend/annotation/src/app/component/annotate/annotate.component.ts
@@ -2,15 +2,16 @@
 import { Component, OnInit, AfterViewInit, ViewChild, ViewChildren, ElementRef, QueryList, HostListener } from "@angular/core";
 import { ActivatedRoute, ParamMap, Router } from "@angular/router";
 import { HttpErrorResponse } from "@angular/common/http";
-import { MatDialog } from "@angular/material";
+import { MatDialog } from "@angular/material/dialog";
 import { Observable } from "rxjs";
 import { map } from "rxjs/operators";

-import { PanZoomConfig, PanZoomAPI, PanZoomModel } from 'ng2-panzoom';
+import { PanZoomConfig, PanZoomAPI, PanZoomModel } from 'ngx-panzoom';

 import { forkJoin } from "rxjs";

-import tippy from "tippy.js/dist/tippy.all";
+import tippy from "tippy.js";
+import { Placement } from "tippy.js";

 import { ErrorComponent } from "../error/error.component";
 import { LoadingComponent } from "../loading/loading.component";
@@ -65,12 +66,12 @@ export class AnnotateComponent implements OnInit, AfterViewInit {

    public readonly PATHS = PATHS;

-    @ViewChild('pageContent') pageContent;
+    @ViewChild('pageContent', { static: true }) pageContent;
    public pageHeight: number;

    @ViewChild('imageContainer') imageRef;

-    @ViewChild(LoadingComponent)
+    @ViewChild(LoadingComponent, { static: true })
    public loading: LoadingComponent;
    @HostListener("window:resize", [])
    private onResize() {
@@ -489,7 +490,7 @@ export class AnnotateComponent implements OnInit, AfterViewInit {
        return {
            content: clone,
            arrow: true,
-            placement: "bottom",
+            placement: "bottom" as Placement,
            trigger: "manual",
            interactive: true,
            animation: "perspective",
--- a/frontend/annotation/src/app/component/annotate/ner-selection.ts
+++ b/frontend/annotation/src/app/component/annotate/ner-selection.ts
@@ -1,5 +1,6 @@
-/*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */
-import tippy from "tippy.js/dist/tippy.all";
+/* (C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */
+
+import tippy from "tippy.js";

 import { Word } from "../../model/word";

--- a/frontend/annotation/src/app/component/collection-details/collection-details.component.spec.ts
+++ b/frontend/annotation/src/app/component/collection-details/collection-details.component.spec.ts
@@ -1,5 +1,5 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { CollectionDetailsComponent } from './collection-details.component';

@@ -7,7 +7,7 @@ describe('CollectionDetailsComponent', () => {
  let component: CollectionDetailsComponent;
  let fixture: ComponentFixture<CollectionDetailsComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ CollectionDetailsComponent ]
    })
--- a/frontend/annotation/src/app/component/collection-details/collection-details.component.ts
+++ b/frontend/annotation/src/app/component/collection-details/collection-details.component.ts
@@ -1,7 +1,9 @@
 /* (C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */
 import { Component, OnInit, ViewChild, AfterViewInit, Inject, OnDestroy, ElementRef } from "@angular/core";
 import { KeyValue } from "@angular/common";
-import { MatPaginator, MatSort, MatDialog, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatSort } from "@angular/material/sort";
 import { ActivatedRoute, Router } from "@angular/router";
 import { HttpErrorResponse } from "@angular/common/http";

@@ -73,9 +75,9 @@ export class CollectionDetailsComponent implements OnInit, AfterViewInit, OnDest
    private new_label: string = null;
    public permissions: CollectionUserPermissions = newPermissions();

-    @ViewChild(MatPaginator) public paginator: MatPaginator;
-    @ViewChild(MatSort) public sort: MatSort;
-    @ViewChild("filter") public filter: ElementRef;
+    @ViewChild(MatPaginator, { static: true }) public paginator: MatPaginator;
+    @ViewChild(MatSort, { static: true }) public sort: MatSort;
+    @ViewChild("filter", { static: true }) public filter: ElementRef;
    private tableReady = new BehaviorSubject<boolean>(false);

    constructor(private router: Router,
--- a/frontend/annotation/src/app/component/collection-details/document-data-source.ts
+++ b/frontend/annotation/src/app/component/collection-details/document-data-source.ts
@@ -1,8 +1,9 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { ElementRef, OnDestroy } from "@angular/core";
+import { ElementRef, Injectable } from "@angular/core";
 import { CollectionViewer, DataSource } from "@angular/cdk/collections";
-import { MatPaginator, MatSort } from "@angular/material";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatSort } from "@angular/material/sort";
 import { HttpErrorResponse } from "@angular/common/http";

 import { Observable, BehaviorSubject, Subscription, forkJoin, merge, fromEvent } from "rxjs";
@@ -31,7 +32,8 @@ const fieldMapping: {[column: string]: string} = {
    "text_start": "text"
 }

-export class DocumentDataSource implements OnDestroy, DataSource<DocumentRow> {
+@Injectable()
+export class DocumentDataSource implements DataSource<DocumentRow> {

    private documentSubject = new BehaviorSubject<DocumentRow[]>([]);
    private loadingSubject = new BehaviorSubject<boolean>(false);
--- a/frontend/annotation/src/app/component/collection-iaa-report/collection-iaa-report.component.spec.ts
+++ b/frontend/annotation/src/app/component/collection-iaa-report/collection-iaa-report.component.spec.ts
@@ -1,5 +1,5 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { CollectionIaaReportComponent } from './collection-iaa-report.component';

@@ -7,7 +7,7 @@ describe('CollectionIaaReportComponent', () => {
  let component: CollectionIaaReportComponent;
  let fixture: ComponentFixture<CollectionIaaReportComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ CollectionIaaReportComponent ]
    })
--- a/frontend/annotation/src/app/component/conf-matrix/conf-matrix.component.spec.ts
+++ b/frontend/annotation/src/app/component/conf-matrix/conf-matrix.component.spec.ts
@@ -1,5 +1,5 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { ConfMatrixComponent } from './conf-matrix.component';

@@ -7,7 +7,7 @@ describe('ConfMatrixComponent', () => {
  let component: ConfMatrixComponent;
  let fixture: ComponentFixture<ConfMatrixComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ ConfMatrixComponent ]
    })
--- a/frontend/annotation/src/app/component/document-details/document-details.component.spec.ts
+++ b/frontend/annotation/src/app/component/document-details/document-details.component.spec.ts
@@ -1,6 +1,6 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { DocumentDetailsComponent } from './document-details.component';

@@ -8,7 +8,7 @@ describe('DocumentDetailsComponent', () => {
  let component: DocumentDetailsComponent;
  let fixture: ComponentFixture<DocumentDetailsComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ DocumentDetailsComponent ]
    })
--- a/frontend/annotation/src/app/component/download-collection-data.dialog/download-collection-data.dialog.component.spec.ts
+++ b/frontend/annotation/src/app/component/download-collection-data.dialog/download-collection-data.dialog.component.spec.ts
@@ -1,6 +1,6 @@
 /* (C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { DownloadCollectionDataComponent } from './download-collection-data.component';

@@ -8,7 +8,7 @@ describe('DownloadCollectionDataDialogComponent', () => {
  let component: DownloadCollectionDataDialogComponent;
  let fixture: ComponentFixture<DownloadCollectionDataDialogComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ DownloadCollectionDataDialogComponent ]
    })
--- a/frontend/annotation/src/app/component/download-collection-data.dialog/download-collection-data.dialog.component.ts
+++ b/frontend/annotation/src/app/component/download-collection-data.dialog/download-collection-data.dialog.component.ts
@@ -1,7 +1,7 @@
 /* (C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialog, MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
+import { MatDialog, MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
 import { FormBuilder, FormGroup, FormControl } from "@angular/forms";

 import { Collection, DownloadCollectionData } from "../../model/collection";
--- a/frontend/annotation/src/app/component/error/error.component.css
+++ b/frontend/annotation/src/app/component/error/error.component.css
@@ -4,7 +4,7 @@
 	margin-top: 15px;
 }

-/deep/ .main {
+::ng-deep .main {
 	font-weight: bold;
 	font-size: large;
 }
--- a/frontend/annotation/src/app/component/error/error.component.spec.ts
+++ b/frontend/annotation/src/app/component/error/error.component.spec.ts
@@ -1,6 +1,6 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { ErrorComponent } from './error.component';

@@ -8,7 +8,7 @@ describe('ErrorComponent', () => {
  let component: ErrorComponent;
  let fixture: ComponentFixture<ErrorComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ ErrorComponent ]
    })
--- a/frontend/annotation/src/app/component/iaa-heatmap/iaa-heatmap.component.spec.ts
+++ b/frontend/annotation/src/app/component/iaa-heatmap/iaa-heatmap.component.spec.ts
@@ -1,6 +1,6 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { IaaHeatmapComponent } from './iaa-heatmap.component';

@@ -8,7 +8,7 @@ describe('IaaHeatmapComponent', () => {
  let component: IaaHeatmapComponent;
  let fixture: ComponentFixture<IaaHeatmapComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ IaaHeatmapComponent ]
    })
--- a/frontend/annotation/src/app/component/iaa-heatmap/iaa-heatmap.component.ts
+++ b/frontend/annotation/src/app/component/iaa-heatmap/iaa-heatmap.component.ts
@@ -23,7 +23,7 @@ export class IaaHeatmapComponent implements OnInit, AfterViewInit, OnChanges {

  flattened_data = []

-  @ViewChild('canvas')
+  @ViewChild('canvas', { static: true })
  canvas: ElementRef<HTMLCanvasElement>;

  private ctx: CanvasRenderingContext2D
--- a/frontend/annotation/src/app/component/image-chooser/image-chooser.component.spec.ts
+++ b/frontend/annotation/src/app/component/image-chooser/image-chooser.component.spec.ts
@@ -1,6 +1,6 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";

 import { ImageChooserComponent } from "./image-chooser.component";

@@ -8,7 +8,7 @@ describe("ImageChooserComponent", () => {
    let component: ImageChooserComponent;
    let fixture: ComponentFixture<ImageChooserComponent>;

-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
            declarations: [ ImageChooserComponent ]
        })
--- a/frontend/annotation/src/app/component/image-chooser/image-chooser.component.ts
+++ b/frontend/annotation/src/app/component/image-chooser/image-chooser.component.ts
@@ -259,7 +259,7 @@ interface ImageChooserDialogData {
 })
 export class ImageChooserDialog implements OnInit {

-    @ViewChild(ImageChooserComponent)
+    @ViewChild(ImageChooserComponent, { static: true })
    public chooser: ImageChooserComponent;

    constructor(public dialogRef: MatDialogRef<ImageChooserDialog>,
--- a/frontend/annotation/src/app/component/image-collection-uploader/image-collection-uploader.component.spec.ts
+++ b/frontend/annotation/src/app/component/image-collection-uploader/image-collection-uploader.component.spec.ts
@@ -1,6 +1,6 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";

 import { ImageCollectionUploaderComponent } from "./image-collection-uploader.component";

@@ -8,7 +8,7 @@ describe("ImageCollectionUploaderComponent", () => {
    let component: ImageCollectionUploaderComponent;
    let fixture: ComponentFixture<ImageCollectionUploaderComponent>;

-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
            declarations: [ ImageCollectionUploaderComponent ]
        })
--- a/frontend/annotation/src/app/component/image-collection-uploader/image-collection-uploader.component.ts
+++ b/frontend/annotation/src/app/component/image-collection-uploader/image-collection-uploader.component.ts
@@ -74,7 +74,7 @@ export class ImageCollectionUploaderComponent implements OnInit {
 })
 export class ImageCollectionUploaderDialog implements OnInit {

-    @ViewChild(ImageCollectionUploaderComponent)
+    @ViewChild(ImageCollectionUploaderComponent, { static: true })
    public uploader: ImageCollectionUploaderComponent;

    constructor(public dialogRef: MatDialogRef<ImageCollectionUploaderComponent>) {
--- a/frontend/annotation/src/app/component/image-explorer/image-explorer.component.spec.ts
+++ b/frontend/annotation/src/app/component/image-explorer/image-explorer.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { ImageExplorerComponent } from './image-explorer.component';

@@ -6,7 +6,7 @@ describe('ImageExplorerComponent', () => {
  let component: ImageExplorerComponent;
  let fixture: ComponentFixture<ImageExplorerComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ ImageExplorerComponent ]
    })
--- a/frontend/annotation/src/app/component/image-explorer/image-explorer.component.ts
+++ b/frontend/annotation/src/app/component/image-explorer/image-explorer.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, OnChanges, SimpleChanges, ViewChild, ElementRef, OnDestroy } from '@angular/core';
-import { PanZoomConfig, PanZoomAPI, PanZoomModel } from 'ng2-panzoom';
+import { PanZoomConfig, PanZoomAPI, PanZoomModel } from 'ngx-panzoom';
 import { Subscription } from 'rxjs';

 import { BackendService } from "../../service/backend/backend.service";
@@ -15,7 +15,7 @@ export class ImageExplorerComponent implements OnInit, OnChanges, OnDestroy {
    @Input() documentId: string;
    @Input() collectionId: string;
    @Input() imageUrl: string;
-    @ViewChild('imageCanvas') imageCanvas: ElementRef<HTMLCanvasElement>;
+    @ViewChild('imageCanvas', { static: true }) imageCanvas: ElementRef<HTMLCanvasElement>;

    private canvasContext;
    private img;
--- a/frontend/annotation/src/app/component/label-chooser/label-chooser.component.spec.ts
+++ b/frontend/annotation/src/app/component/label-chooser/label-chooser.component.spec.ts
@@ -1,6 +1,6 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { LabelChooserComponent } from './label-chooser.component';

@@ -8,7 +8,7 @@ describe('LabelChooserComponent', () => {
  let component: LabelChooserComponent;
  let fixture: ComponentFixture<LabelChooserComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ LabelChooserComponent ]
    })
--- a/frontend/annotation/src/app/component/label-chooser/label-chooser.component.ts
+++ b/frontend/annotation/src/app/component/label-chooser/label-chooser.component.ts
@@ -3,7 +3,8 @@
 import { Component, OnInit, Input, Output, ElementRef, ViewChild, EventEmitter } from '@angular/core';
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { FormControl } from '@angular/forms';
-import { MatAutocompleteSelectedEvent, MatChipInputEvent } from '@angular/material';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MatChipInputEvent } from '@angular/material/chips';

 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
--- a/frontend/annotation/src/app/component/loading/loading.component.spec.ts
+++ b/frontend/annotation/src/app/component/loading/loading.component.spec.ts
@@ -1,6 +1,6 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { LoadingComponent } from './loading.component';

@@ -8,7 +8,7 @@ describe('LoadingComponent', () => {
  let component: LoadingComponent;
  let fixture: ComponentFixture<LoadingComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ LoadingComponent ]
    })
--- a/frontend/annotation/src/app/component/login/login.component.spec.ts
+++ b/frontend/annotation/src/app/component/login/login.component.spec.ts
@@ -1,6 +1,6 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { LoginComponent } from './login.component';

@@ -8,7 +8,7 @@ describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ LoginComponent ]
    })
--- a/frontend/annotation/src/app/component/login/login.component.ts
+++ b/frontend/annotation/src/app/component/login/login.component.ts
@@ -21,7 +21,7 @@ export class LoginComponent implements OnInit {

    public static readonly SUBTITLE = "Login";
    
-    @ViewChild(LoadingComponent)
+    @ViewChild(LoadingComponent, { static: true })
    public loading: LoadingComponent;

    public form: LoginForm;
--- a/frontend/annotation/src/app/component/message.dialog/message.dialog.component.spec.ts
+++ b/frontend/annotation/src/app/component/message.dialog/message.dialog.component.spec.ts
@@ -1,22 +1,22 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

-import { Message.DialogComponent } from './message.dialog.component';
+import { MessageDialogComponent } from './message.dialog.component';

-describe('Message.DialogComponent', () => {
-  let component: Message.DialogComponent;
-  let fixture: ComponentFixture<Message.DialogComponent>;
+describe('MessageDialogComponent', () => {
+  let component: MessageDialogComponent;
+  let fixture: ComponentFixture<MessageDialogComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
-      declarations: [ Message.DialogComponent ]
+      declarations: [ MessageDialogComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
-    fixture = TestBed.createComponent(Message.DialogComponent);
+    fixture = TestBed.createComponent(MessageDialogComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
--- a/frontend/annotation/src/app/component/message.dialog/message.dialog.component.ts
+++ b/frontend/annotation/src/app/component/message.dialog/message.dialog.component.ts
@@ -1,7 +1,7 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

 import { Component, OnInit, Inject } from "@angular/core";
-import { MatDialog, MatDialogConfig, MAT_DIALOG_DATA } from "@angular/material";
+import { MatDialog, MatDialogConfig, MAT_DIALOG_DATA } from "@angular/material/dialog";

 import { Observable } from "rxjs";

--- a/frontend/annotation/src/app/component/metrics-history/metrics-history.component.spec.ts
+++ b/frontend/annotation/src/app/component/metrics-history/metrics-history.component.spec.ts
@@ -1,6 +1,6 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { MetricsHistoryComponent } from './metrics-history.component';

@@ -8,7 +8,7 @@ describe('MetricsHistoryComponent', () => {
  let component: MetricsHistoryComponent;
  let fixture: ComponentFixture<MetricsHistoryComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ MetricsHistoryComponent ]
    })
--- a/frontend/annotation/src/app/component/metrics-history/metrics-history.component.ts
+++ b/frontend/annotation/src/app/component/metrics-history/metrics-history.component.ts
@@ -13,7 +13,7 @@ export class MetricsHistoryComponent implements OnInit, AfterContentInit, OnChan

  constructor() { }

-  @ViewChild('historicChart') private historicChartRef;
+  @ViewChild('historicChart', { static: true }) private historicChartRef;

  chart: any;

--- a/frontend/annotation/src/app/component/metrics/metrics.component.spec.ts
+++ b/frontend/annotation/src/app/component/metrics/metrics.component.spec.ts
@@ -1,6 +1,6 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { MetricsComponent } from './metrics.component';

@@ -8,7 +8,7 @@ describe('MetricsComponent', () => {
  let component: MetricsComponent;
  let fixture: ComponentFixture<MetricsComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ MetricsComponent ]
    })
--- a/frontend/annotation/src/app/component/ner-annotation-table/ner-annotation-table.component.spec.ts
+++ b/frontend/annotation/src/app/component/ner-annotation-table/ner-annotation-table.component.spec.ts
@@ -1,6 +1,6 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { AnnotationTableComponent } from './annotation-table.component';

@@ -8,7 +8,7 @@ describe('AnnotationTableComponent', () => {
  let component: AnnotationTableComponent;
  let fixture: ComponentFixture<AnnotationTableComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ AnnotationTableComponent ]
    })
--- a/frontend/annotation/src/app/component/ner-annotation-table/ner-annotation-table.component.ts
+++ b/frontend/annotation/src/app/component/ner-annotation-table/ner-annotation-table.component.ts
@@ -1,7 +1,9 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

 import { Component, OnInit, ViewChild, Input, Output, EventEmitter } from '@angular/core';
-import { MatTable, MatPaginator, MatTableDataSource, MatSort, MatSortable } from '@angular/material';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort, MatSortable } from '@angular/material/sort';
+import { MatTable, MatTableDataSource } from '@angular/material/table';

 import { Observable } from "rxjs";

@@ -32,10 +34,10 @@ export class NERAnnotationTableComponent implements OnInit {
    @ViewChild(MatPaginator)
    public paginator: MatPaginator;

-    @ViewChild(MatSort)
+    @ViewChild(MatSort, { static: true })
    public sort: MatSort;

-    @ViewChild(MatTable)
+    @ViewChild(MatTable, { static: true })
    public table: MatTable<MatTableDataSource<NerAnnotation>>;

    public displayedColumns: string[] = ['text', 'label', 'start', 'end', 'actions'];
--- a/frontend/annotation/src/app/component/status-bar/status-bar.component.spec.ts
+++ b/frontend/annotation/src/app/component/status-bar/status-bar.component.spec.ts
@@ -1,6 +1,6 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";

 import { StatusBarComponent } from "./status-bar.component";

@@ -8,7 +8,7 @@ describe("StatusBarComponent", () => {
    let component: StatusBarComponent;
    let fixture: ComponentFixture<StatusBarComponent>;

-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
            declarations: [ StatusBarComponent ]
        })
--- a/frontend/annotation/src/app/component/toolbar/toolbar-nav-button/toolbar-nav-button.component.spec.ts
+++ b/frontend/annotation/src/app/component/toolbar/toolbar-nav-button/toolbar-nav-button.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';

 import { ToolbarNavButtonComponent } from './toolbar-nav-button.component';
@@ -7,7 +7,7 @@ describe('ToolbarNavButtonComponent', () => {
    let component: ToolbarNavButtonComponent;
    let fixture: ComponentFixture<ToolbarNavButtonComponent>;

-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
            declarations: [
                ToolbarNavButtonComponent
--- a/frontend/annotation/src/app/component/toolbar/toolbar-nav/toolbar-nav.component.spec.ts
+++ b/frontend/annotation/src/app/component/toolbar/toolbar-nav/toolbar-nav.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';

 import { ToolbarNavComponent } from './toolbar-nav.component';
@@ -7,7 +7,7 @@ describe('ToolbarNavComponent', () => {
    let component: ToolbarNavComponent;
    let fixture: ComponentFixture<ToolbarNavComponent>;

-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
            declarations: [
                ToolbarNavComponent
--- a/frontend/annotation/src/app/component/toolbar/toolbar-nav/toolbar-nav.component.ts
+++ b/frontend/annotation/src/app/component/toolbar/toolbar-nav/toolbar-nav.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { show } from "../../about/about.component";
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';

@Component({
    selector: 'app-toolbar-nav',
--- a/frontend/annotation/src/app/component/user-card/user-card.component.spec.ts
+++ b/frontend/annotation/src/app/component/user-card/user-card.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { UserCardComponent } from './user-card.component';

@@ -6,7 +6,7 @@ describe('UserCardComponent', () => {
    let component: UserCardComponent;
    let fixture: ComponentFixture<UserCardComponent>;

-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
            declarations: [ UserCardComponent ]
        }).compileComponents();
--- a/frontend/annotation/src/app/component/user-chooser/user-chooser.component.spec.ts
+++ b/frontend/annotation/src/app/component/user-chooser/user-chooser.component.spec.ts
@@ -1,6 +1,6 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { UserChooserComponent } from './user-chooser.component';

@@ -8,7 +8,7 @@ describe('UserChooserComponent', () => {
  let component: UserChooserComponent;
  let fixture: ComponentFixture<UserChooserComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ UserChooserComponent ]
    })
--- a/frontend/annotation/src/app/component/user-chooser/user-chooser.component.ts
+++ b/frontend/annotation/src/app/component/user-chooser/user-chooser.component.ts
@@ -3,7 +3,8 @@
 import { Component, OnInit, ElementRef, ViewChild, Input, Output, EventEmitter } from '@angular/core';
 import { COMMA, ENTER, TAB } from '@angular/cdk/keycodes';
 import { FormBuilder, FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
-import { MatAutocompleteSelectedEvent, MatChipInputEvent } from '@angular/material';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MatChipInputEvent } from '@angular/material/chips';
 import { HttpErrorResponse } from "@angular/common/http";

 import { Observable } from 'rxjs';
--- a/frontend/annotation/src/app/component/venn-diag/venn-diag.component.spec.ts
+++ b/frontend/annotation/src/app/component/venn-diag/venn-diag.component.spec.ts
@@ -1,6 +1,6 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { VennDiagComponent } from './venn-diag.component';

@@ -8,7 +8,7 @@ describe('VennDiagComponent', () => {
  let component: VennDiagComponent;
  let fixture: ComponentFixture<VennDiagComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ VennDiagComponent ]
    })
--- a/frontend/annotation/src/app/component/venn-diag/venn-diag.component.ts
+++ b/frontend/annotation/src/app/component/venn-diag/venn-diag.component.ts
@@ -12,7 +12,7 @@ import * as venn from 'venn.js';
 })
 export class VennDiagComponent implements OnInit, AfterViewInit, AfterContentInit, OnChanges {

-  @ViewChild('venn') private vennContainer: ElementRef;
+  @ViewChild('venn', { static: true }) private vennContainer: ElementRef;

  @Input()
  data: any
--- a/frontend/annotation/src/app/component/view-collections/view-collections.component.spec.ts
+++ b/frontend/annotation/src/app/component/view-collections/view-collections.component.spec.ts
@@ -1,6 +1,6 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { ViewCollectionsComponent } from './view-collections.component';

@@ -8,7 +8,7 @@ describe('ViewCollectionsComponent', () => {
  let component: ViewCollectionsComponent;
  let fixture: ComponentFixture<ViewCollectionsComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ ViewCollectionsComponent ]
    })
--- a/frontend/annotation/src/app/component/view-collections/view-collections.component.ts
+++ b/frontend/annotation/src/app/component/view-collections/view-collections.component.ts
@@ -1,7 +1,9 @@
 /*(C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC. */

 import { Component, OnInit, ViewChild } from "@angular/core";
-import { MatPaginator, MatTableDataSource, MatDialog } from "@angular/material";
+import { MatDialog } from "@angular/material/dialog";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatTableDataSource } from "@angular/material/table";

 import { PATHS } from "../../app.paths";
 import { AppConfig } from "../../app.config";
@@ -35,7 +37,7 @@ export class ViewCollectionsComponent implements OnInit {

    public active = true;

-    collections: CollectionRow[];
+    collections: CollectionRow[] = [];
    selected = null;

    displayedColumns: string[] = ["title", "creator", "last_updated"];
--- a/frontend/annotation/src/app/service/auth/modules/oauth-authorize.component.ts
+++ b/frontend/annotation/src/app/service/auth/modules/oauth-authorize.component.ts
@@ -20,7 +20,7 @@ export class OAuthAuthorizeComponent implements OnInit {
    
    public static SUBTITLE = "Authorizing...";
    
-    @ViewChild(LoadingComponent)
+    @ViewChild(LoadingComponent, { static: true })
    public loading: LoadingComponent;
    
    constructor(private route: ActivatedRoute,
--- a/frontend/annotation/src/environments/environment.ts
+++ b/frontend/annotation/src/environments/environment.ts
@@ -15,4 +15,4 @@ export const environment = {
 * import the following file, but please comment it out in production mode
 * because it will have performance impact when throw error
 */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
--- a/frontend/annotation/src/polyfills.ts
+++ b/frontend/annotation/src/polyfills.ts
@@ -1,4 +1,3 @@
-// (C) 2019 The Johns Hopkins University Applied Physics Laboratory LLC.
 /**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
@@ -12,34 +11,19 @@
 * 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/weak-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`.

 /** IE10 and IE11 requires the following for the Reflect API. */
-import 'core-js/es6/reflect';
+import 'core-js/es/reflect';


 /** Evergreen browsers require these. **/
@@ -72,7 +56,7 @@ import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 /***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.



--- a/frontend/annotation/src/styles.css
+++ b/frontend/annotation/src/styles.css
@@ -1,7 +1,8 @@
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import '~material-icons/iconfont/material-icons.css';
@import '~roboto-fontface/css/roboto/roboto-fontface.css';
-@import '~tippy.js/dist/themes/light-border.css';
+@import '~tippy.js/dist/tippy.css';
+@import '~tippy.js/themes/light-border.css';

 /* make Flex work. */
 html,
--- a/frontend/annotation/src/test.ts
+++ b/frontend/annotation/src/test.ts
@@ -2,7 +2,7 @@

 // This file is required by karma.conf.js and loads recursively all the .spec and framework files

-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
  BrowserDynamicTestingModule,
--- a/frontend/annotation/src/themes.scss
+++ b/frontend/annotation/src/themes.scss
@@ -1,6 +1,6 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;

-@include mat-core();
+@include mat.core();

 /* Palettes */
 $md-whaleblue: (
@@ -138,23 +138,23 @@ $md-summergreen: (

 /* Theme */

-$custom-theme-primary: mat-palette($md-deeppine, 500);
-$custom-theme-accent: mat-palette($md-whaleblue, 500);
-$custom-theme-warn: mat-palette($mat-red);
+$custom-theme-primary: mat.define-palette($md-deeppine, 500);
+$custom-theme-accent: mat.define-palette($md-whaleblue, 500);
+$custom-theme-warn: mat.define-palette(mat.$red-palette);

-$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
+$custom-theme: mat.define-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);

 .background-primary-color-lighter {
-  background-color: mat-color($custom-theme-primary, lighter) !important;
+  background-color: mat.get-color-from-palette($custom-theme-primary, lighter) !important;
 }

 .background-accent-color-lighter {
-  background-color: mat-color($custom-theme-accent, lighter) !important;
+  background-color: mat.get-color-from-palette($custom-theme-accent, lighter) !important;
 }

 .table-selectable tr.trow:hover {
-    background-color: mat-color($custom-theme-primary, lighter);
+    background-color: mat.get-color-from-palette($custom-theme-primary, lighter);
    cursor: pointer;
 }

-@include angular-material-theme($custom-theme);
+@include mat.all-component-themes($custom-theme);
--- a/frontend/annotation/src/tsconfig.app.json
+++ b/frontend/annotation/src/tsconfig.app.json
@@ -2,12 +2,15 @@
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
-    "module": "es2015",
    "types": [],
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
+  "files": [
+    "main.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
  ]
 }
--- a/frontend/annotation/src/tsconfig.spec.json
+++ b/frontend/annotation/src/tsconfig.spec.json
@@ -2,7 +2,6 @@
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
-    "module": "commonjs",
    "types": [
      "jasmine",
      "node"
--- a/frontend/annotation/tsconfig.json
+++ b/frontend/annotation/tsconfig.json
@@ -2,14 +2,15 @@
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
+    "downlevelIteration": true,
    "importHelpers": true,
+    "module": "es2020",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
-    "target": "es5",
+    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
--- a/frontend/annotation/tslint.json
+++ b/frontend/annotation/tslint.json
@@ -2,6 +2,7 @@
  "rulesDirectory": [
    "node_modules/codelyzer"
  ],
+  "extends": "tslint:recommended",
  "rules": {
    "arrow-return-shorthand": true,
    "callable-types": true,
@@ -65,7 +66,6 @@
    "no-trailing-whitespace": true,
    "no-unnecessary-initializer": true,
    "no-unused-expression": true,
-    "no-use-before-declare": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
    "one-line": [
@@ -110,12 +110,12 @@
      "check-type"
    ],
    "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
+    "no-inputs-metadata-property": true,
+    "no-outputs-metadata-property": 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
--- a/test/README.md
+++ b/test/README.md
@@ -30,10 +30,10 @@ npm install
 Then, when the dev stack is running:

 ```
-./open_with_dev_stack.sh
+./open_with_dev_stack.sh [--pytest|--cyptress]
 ```

-This will both run pytest and open the cypress dashboard.
+This will either run pytest or open the cypress dashboard.

 Note that running with the dev stack is noticably slower than running with the docker-compose stack.
 You should also be sure to freshly import the testing data before you run the tests
--- a/test/open_with_dev_stack.sh
+++ b/test/open_with_dev_stack.sh
@@ -4,11 +4,19 @@
 DIR="$( cd "$( dirname "${0}" )" && pwd )"
 source ${DIR}/tests/run_common.sh

-pushd ${DIR}/tests
-pipenv run pytest pytest/ &
-PYTEST_PID="$!"
-npm run cypress:open -- --config-file cypress.dev.json &
-CYPRESS_PID="$!"
-popd
-
-wait ${PYTEST_PID} ${CYPRESS_PID}
+if [[ $1 == --pytest ]]; then
+    pushd ${DIR}/tests
+    pipenv run pytest pytest/ &
+    PYTEST_PID="$!"
+    popd
+    wait ${PYTEST_PID}
+elif [[ $1 == --cypress ]]; then
+    pushd ${DIR}/tests
+    npm run cypress:open -- --config-file cypress.dev.json &
+    CYPRESS_PID="$!"
+    popd
+    wait ${CYPRESS_PID}
+else
+    echo "Usage: $0 [--pytest|--cypress]"
+    exit 1
+fi
--- a/test/tests/cypress/integration/03-documents.spec.js
+++ b/test/tests/cypress/integration/03-documents.spec.js
@@ -105,7 +105,6 @@ function annotateWord(wordSubject, label) {
          .should("be.visible")
          .click().then($label => {
        cy.wrap($word)
-          .should("be.visible")
          .should("not.have.class", "select")
          .should("not.have.class", "selectLeft")
          .should("not.have.class", "selectRight")
@@ -148,7 +147,6 @@ function unannotateWord(wordSubject) {
        .should("be.visible")
        .click().then(_ => {
          cy.wrap($word)
-            .should("be.visible")
            .should("not.have.class", "annotation")
            .should("not.have.class", "annotationLeft")
            .should("not.have.class", "annotationRight");
--- a/test/tests/package-lock.json
+++ b/test/tests/package-lock.json
@@ -463,9 +463,9 @@
      }
    },
    "cypress": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-8.1.0.tgz",
-      "integrity": "sha512-GXjlqPjY/6HPbQwAp3AvlA1Mk/NoJTAmqVSUhQsuM/1xDpd/FQHkxVuq5h6O6RrAoCXSgpZPXFsVtdqE+FwEJw==",
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-8.2.0.tgz",
+      "integrity": "sha512-jg7S5VxxslwsgEyAkCE9ZCkFADxOUY1bSWScp1cWnga88K0TZgFQ0zdxyG9Mw/4spLGuvkriIZ62am+TR6C04w==",
      "dev": true,
      "requires": {
        "@cypress/request": "^2.88.5",
--- a/test/tests/package.json
+++ b/test/tests/package.json
@@ -13,7 +13,7 @@
  },
  "private": true,
  "devDependencies": {
-    "cypress": "^8.1.0",
+    "cypress": "^8.2.0",
    "mocha": "^9.0.3",
    "mochawesome": "^6.2.2",
    "mochawesome-merge": "^4.2.0",