feat(console): angular 11, replace ngx-moment with @angular/material-moment-adapter (#965)

* update core / cli

* update material

* lint

* replace nx-moment with @angular/moment adapter

console/angular.json

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

console/package.json

@@ -11,24 +11,25 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~10.0.11",
+    "@angular/animations": "~11.0.0",
-    "@angular/cdk": "~10.1.3",
+    "@angular/cdk": "~11.0.0",
-    "@angular/common": "~10.0.11",
+    "@angular/common": "~11.0.0",
-    "@angular/compiler": "~10.0.11",
+    "@angular/compiler": "~11.0.0",
-    "@angular/core": "~10.0.11",
+    "@angular/core": "~11.0.0",
-    "@angular/forms": "~10.0.11",
+    "@angular/forms": "~11.0.0",
-    "@angular/material": "^10.1.3",
+    "@angular/material": "^11.0.0",
-    "@angular/platform-browser": "~10.0.11",
+    "@angular/material-moment-adapter": "^11.0.0",
-    "@angular/platform-browser-dynamic": "~10.0.11",
+    "@angular/platform-browser": "~11.0.0",
-    "@angular/router": "~10.0.11",
+    "@angular/platform-browser-dynamic": "~11.0.0",
-    "@angular/service-worker": "~10.0.11",
+    "@angular/router": "~11.0.0",
+    "@angular/service-worker": "~11.0.0",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@types/file-saver": "^2.0.1",
-    "@types/uuid": "^8.3.0",
     "@types/google-protobuf": "^3.7.4",
-    "angularx-qrcode": "^10.0.11",
+    "@types/uuid": "^8.3.0",
     "angular-oauth2-oidc": "^10.0.3",
+    "angularx-qrcode": "^10.0.11",
     "cors": "^2.8.5",
     "file-saver": "^2.0.2",
     "google-proto-files": "^2.2.0",
@@ -36,29 +37,28 @@
     "grpc": "^1.24.3",
     "grpc-web": "^1.2.1",
     "moment": "^2.29.1",
-    "ngx-moment": "^5.0.0",
     "ngx-quicklink": "^0.2.6",
     "rxjs": "~6.6.3",
     "ts-protoc-gen": "^0.13.0",
-    "tslib": "^2.0.3",
+    "tslib": "^2.0.0",
     "uuid": "^8.3.1",
     "zone.js": "~0.11.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1002.0",
+    "@angular-devkit/build-angular": "~0.1100.1",
-    "@angular/cli": "~10.2.0",
+    "@angular/cli": "~11.0.1",
-    "@angular/compiler-cli": "~10.0.11",
+    "@angular/compiler-cli": "~11.0.0",
     "@angular/language-service": "~11.0.0",
-    "@types/jasmine": "~3.6.1",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^14.14.6",
-    "codelyzer": "^6.0.1",
+    "codelyzer": "^6.0.0",
     "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.2",
-    "karma-jasmine": "~4.0.1",
+    "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "prettier": "^2.1.2",
     "protractor": "~7.0.0",
@@ -67,6 +67,6 @@
     "stylelint-scss": "^3.18.0",
     "ts-node": "~9.0.0",
     "tslint": "~6.1.3",
-    "typescript": "^3.9.7"
+    "typescript": "^4.0.5"
   }
 }

console/src/app/app-routing.module.ts

@@ -131,6 +131,7 @@ const routes: Routes = [
             routes,
             {
                 preloadingStrategy: QuicklinkStrategy,
+                relativeLinkResolution: 'legacy',
             },
         ),
     ],

console/src/app/app.component.spec.ts

@@ -1,10 +1,10 @@
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [RouterTestingModule],
       declarations: [AppComponent],

console/src/app/modules/accounts-card/accounts-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 { AccountsCardComponent } from './accounts-card.component';
 
@@ -6,7 +6,7 @@ describe('AccountsCardComponent', () => {
   let component: AccountsCardComponent;
   let fixture: ComponentFixture<AccountsCardComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [AccountsCardComponent],
     }).compileComponents();

console/src/app/modules/add-member-dialog/member-create-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 { MemberCreateDialogComponent } from './member-create-dialog.component';
 
@@ -7,7 +7,7 @@ describe('AddMemberDialogComponent', () => {
     let component: MemberCreateDialogComponent;
     let fixture: ComponentFixture<MemberCreateDialogComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [MemberCreateDialogComponent],
         })

console/src/app/modules/avatar/avatar.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { AvatarComponent } from './avatar.component';
 
@@ -6,7 +6,7 @@ describe('AvatarComponent', () => {
     let component: AvatarComponent;
     let fixture: ComponentFixture<AvatarComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [AvatarComponent],
         })

console/src/app/modules/card/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 { CardComponent } from './card.component';
 
@@ -6,7 +6,7 @@ describe('CardComponent', () => {
   let component: CardComponent;
   let fixture: ComponentFixture<CardComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [CardComponent],
     })

console/src/app/modules/changes/changes.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ChangesComponent } from './changes.component';
 
@@ -6,7 +6,7 @@ describe('ChangesComponent', () => {
     let component: ChangesComponent;
     let fixture: ComponentFixture<ChangesComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [ChangesComponent],
         })

console/src/app/modules/contributors/contributors.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ContributorsComponent } from './contributors.component';
 
@@ -6,7 +6,7 @@ describe('ContributorsComponent', () => {
     let component: ContributorsComponent;
     let fixture: ComponentFixture<ContributorsComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [ContributorsComponent],
         })

console/src/app/modules/detail-layout/detail-layout.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { DetailLayoutComponent } from './detail-layout.component';
 
@@ -6,7 +6,7 @@ describe('DetailLayoutComponent', () => {
     let component: DetailLayoutComponent;
     let fixture: ComponentFixture<DetailLayoutComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [DetailLayoutComponent],
         })

console/src/app/modules/idp-create/idp-create.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { IdpCreateComponent } from './idp-create.component';
 
@@ -6,7 +6,7 @@ describe('IdpCreateComponent', () => {
     let component: IdpCreateComponent;
     let fixture: ComponentFixture<IdpCreateComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [IdpCreateComponent],
         })

console/src/app/modules/idp-table/idp-table.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { IdpTableComponent } from './idp-table.component';
 
@@ -6,7 +6,7 @@ describe('UserTableComponent', () => {
     let component: IdpTableComponent;
     let fixture: ComponentFixture<IdpTableComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [IdpTableComponent],
         })

console/src/app/modules/idp/idp.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { IdpComponent } from './idp.component';
 
@@ -6,7 +6,7 @@ describe('IdComponent', () => {
     let component: IdpComponent;
     let fixture: ComponentFixture<IdpComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [IdpComponent],
         })

console/src/app/modules/members-table/members-table.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
@@ -10,7 +10,7 @@ describe('MembersTableComponent', () => {
     let component: MembersTableComponent;
     let fixture: ComponentFixture<MembersTableComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [MembersTableComponent],
             imports: [

console/src/app/modules/meta-layout/meta-layout.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { MetaLayoutComponent } from './meta-layout.component';
 
@@ -6,7 +6,7 @@ describe('MetaLayoutComponent', () => {
     let component: MetaLayoutComponent;
     let fixture: ComponentFixture<MetaLayoutComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [MetaLayoutComponent],
         })

console/src/app/modules/password-complexity-view/password-complexity-view.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { PasswordComplexityViewComponent } from './password-complexity-view.component';
 
@@ -6,7 +6,7 @@ describe('PasswordComplexityViewComponent', () => {
     let component: PasswordComplexityViewComponent;
     let fixture: ComponentFixture<PasswordComplexityViewComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [PasswordComplexityViewComponent],
         })

console/src/app/modules/policies/label-policy/label-policy.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { LabelPolicyComponent } from './label-policy.component';
 
@@ -6,7 +6,7 @@ describe('LabelPolicyComponent', () => {
     let component: LabelPolicyComponent;
     let fixture: ComponentFixture<LabelPolicyComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [LabelPolicyComponent],
         })

console/src/app/modules/policies/login-policy/add-idp-dialog/add-idp-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 { AddIdpDialogComponent } from './add-idp-dialog.component';
 
@@ -7,7 +7,7 @@ describe('AddIdpDialogComponent', () => {
     let component: AddIdpDialogComponent;
     let fixture: ComponentFixture<AddIdpDialogComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [AddIdpDialogComponent],
         })

console/src/app/modules/policies/login-policy/login-policy.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { LoginPolicyComponent } from './login-policy.component';
 
@@ -6,7 +6,7 @@ describe('LoginPolicyComponent', () => {
     let component: LoginPolicyComponent;
     let fixture: ComponentFixture<LoginPolicyComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [LoginPolicyComponent],
         })

console/src/app/modules/policies/org-iam-policy/org-iam-policy.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { OrgIamPolicyComponent } from './org-iam-policy.component';
 
@@ -6,7 +6,7 @@ describe('OrgIamPolicyComponent', () => {
     let component: OrgIamPolicyComponent;
     let fixture: ComponentFixture<OrgIamPolicyComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [OrgIamPolicyComponent],
         })

console/src/app/modules/policies/password-age-policy/password-age-policy.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { PasswordAgePolicyComponent } from './password-age-policy.component';
 
@@ -6,7 +6,7 @@ describe('PasswordAgePolicyComponent', () => {
     let component: PasswordAgePolicyComponent;
     let fixture: ComponentFixture<PasswordAgePolicyComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [PasswordAgePolicyComponent],
         })

console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { PasswordComplexityPolicyComponent } from './password-complexity-policy.component';
 
@@ -6,7 +6,7 @@ describe('PasswordComplexityPolicyComponent', () => {
     let component: PasswordComplexityPolicyComponent;
     let fixture: ComponentFixture<PasswordComplexityPolicyComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [PasswordComplexityPolicyComponent],
         })

console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { PasswordLockoutPolicyComponent } from './password-lockout-policy.component';
 
@@ -6,7 +6,7 @@ describe('PasswordLockoutPolicyComponent', () => {
     let component: PasswordLockoutPolicyComponent;
     let fixture: ComponentFixture<PasswordLockoutPolicyComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [PasswordLockoutPolicyComponent],
         })

console/src/app/modules/policy-grid/policy-grid.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { PolicyGridComponent } from './policy-grid.component';
 
@@ -6,7 +6,7 @@ describe('PolicyGridComponent', () => {
     let component: PolicyGridComponent;
     let fixture: ComponentFixture<PolicyGridComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [PolicyGridComponent],
         })

console/src/app/modules/project-members/project-members.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
@@ -10,7 +10,7 @@ describe('ProjectMembersComponent', () => {
   let component: ProjectMembersComponent;
   let fixture: ComponentFixture<ProjectMembersComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ProjectMembersComponent],
       imports: [

console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ProjectRoleDetailComponent } from './project-role-detail.component';
 
@@ -6,7 +6,7 @@ describe('ProjectRoleDetailComponent', () => {
     let component: ProjectRoleDetailComponent;
     let fixture: ComponentFixture<ProjectRoleDetailComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [ProjectRoleDetailComponent],
         })

console/src/app/modules/project-roles/project-roles.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
@@ -10,7 +10,7 @@ describe('ProjectRolesComponent', () => {
   let component: ProjectRolesComponent;
   let fixture: ComponentFixture<ProjectRolesComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ProjectRolesComponent],
       imports: [

console/src/app/modules/refresh-table/refresh-table.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { RefreshTableComponent } from './refresh-table.component';
 
@@ -6,7 +6,7 @@ describe('RefreshTableComponent', () => {
     let component: RefreshTableComponent;
     let fixture: ComponentFixture<RefreshTableComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [RefreshTableComponent],
         })

console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SearchProjectAutocompleteComponent } from './search-project-autocomplete.component';
 
@@ -7,7 +7,7 @@ describe('SearchProjectComponent', () => {
     let component: SearchProjectAutocompleteComponent;
     let fixture: ComponentFixture<SearchProjectAutocompleteComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [SearchProjectAutocompleteComponent],
         })

console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SearchRolesAutocompleteComponent } from './search-roles-autocomplete.component';
 
@@ -8,7 +8,7 @@ describe('SearchProjectComponent', () => {
     let component: SearchRolesAutocompleteComponent;
     let fixture: ComponentFixture<SearchRolesAutocompleteComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [SearchRolesAutocompleteComponent],
         })

console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SearchUserAutocompleteComponent } from './search-user-autocomplete.component';
 
@@ -6,7 +6,7 @@ describe('SearchUserAutocompleteComponent', () => {
     let component: SearchUserAutocompleteComponent;
     let fixture: ComponentFixture<SearchUserAutocompleteComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [SearchUserAutocompleteComponent],
         })

console/src/app/modules/user-grants/user-grants.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { UserGrantsComponent } from './user-grants.component';
 
@@ -6,7 +6,7 @@ describe('UserGrantsComponent', () => {
     let component: UserGrantsComponent;
     let fixture: ComponentFixture<UserGrantsComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [UserGrantsComponent],
         })

console/src/app/modules/warn-dialog/warn-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 { WarnDialogComponent } from './warn-dialog.component';
 
@@ -6,7 +6,7 @@ describe('WarnDialogComponent', () => {
     let component: WarnDialogComponent;
     let fixture: ComponentFixture<WarnDialogComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [WarnDialogComponent],
         })

console/src/app/pages/home/home.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { HomeComponent } from './home.component';
 
@@ -6,7 +6,7 @@ describe('HomeComponent', () => {
   let component: HomeComponent;
   let fixture: ComponentFixture<HomeComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [HomeComponent],
     }).compileComponents();

console/src/app/pages/iam/failed-events/failed-events.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { FailedEventsComponent } from './failed-events.component';
 
@@ -6,7 +6,7 @@ describe('FailedEventsComponent', () => {
     let component: FailedEventsComponent;
     let fixture: ComponentFixture<FailedEventsComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [FailedEventsComponent],
         })

console/src/app/pages/iam/iam-members/iam-members.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
@@ -10,7 +10,7 @@ describe('IamMembersComponent', () => {
     let component: IamMembersComponent;
     let fixture: ComponentFixture<IamMembersComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [IamMembersComponent],
             imports: [

console/src/app/pages/iam/iam-views/iam-views.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { IamViewsComponent } from './iam-views.component';
 
@@ -6,7 +6,7 @@ describe('IamViewsComponent', () => {
     let component: IamViewsComponent;
     let fixture: ComponentFixture<IamViewsComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [IamViewsComponent],
         })

console/src/app/pages/iam/iam.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { IamComponent } from './iam.component';
 
@@ -6,7 +6,7 @@ describe('IamComponent', () => {
     let component: IamComponent;
     let fixture: ComponentFixture<IamComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [IamComponent],
         })

console/src/app/pages/orgs/org-create/org-create.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { OrgCreateComponent } from './org-create.component';
 
@@ -6,7 +6,7 @@ describe('OrgCreateComponent', () => {
     let component: OrgCreateComponent;
     let fixture: ComponentFixture<OrgCreateComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [OrgCreateComponent],
         })

console/src/app/pages/orgs/org-detail/add-domain-dialog/add-domain-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 { AddDomainDialogComponent } from './add-domain-dialog.component';
 
@@ -6,7 +6,7 @@ describe('WarnDialogComponent', () => {
     let component: AddDomainDialogComponent;
     let fixture: ComponentFixture<AddDomainDialogComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [AddDomainDialogComponent],
         })

console/src/app/pages/orgs/org-detail/domain-verification/domain-verification.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { DomainVerificationComponent } from './domain-verification.component';
 
@@ -6,7 +6,7 @@ describe('DomainVerificationComponent', () => {
     let component: DomainVerificationComponent;
     let fixture: ComponentFixture<DomainVerificationComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [DomainVerificationComponent],
         })

console/src/app/pages/orgs/org-detail/org-detail.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { OrgDetailComponent } from './org-detail.component';
 
@@ -6,7 +6,7 @@ describe('OrgDetailComponent', () => {
   let component: OrgDetailComponent;
   let fixture: ComponentFixture<OrgDetailComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [OrgDetailComponent],
     })

console/src/app/pages/orgs/org-list/org-list.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { OrgListComponent } from './org-list.component';
 
@@ -6,7 +6,7 @@ describe('OrgListComponent', () => {
     let component: OrgListComponent;
     let fixture: ComponentFixture<OrgListComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [OrgListComponent],
         })

console/src/app/pages/orgs/org-member-roles-autocomplete/org-member-roles-autocomplete.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { OrgMemberRolesAutocompleteComponent } from './org-member-roles-autocomplete.component';
 
@@ -6,7 +6,7 @@ describe('OrgMemberRolesAutocompleteComponent', () => {
     let component: OrgMemberRolesAutocompleteComponent;
     let fixture: ComponentFixture<OrgMemberRolesAutocompleteComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [OrgMemberRolesAutocompleteComponent],
         })

console/src/app/pages/orgs/org-members/org-members.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
@@ -10,7 +10,7 @@ describe('OrgMembersComponent', () => {
     let component: OrgMembersComponent;
     let fixture: ComponentFixture<OrgMembersComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [OrgMembersComponent],
             imports: [

console/src/app/pages/projects/apps/app-create/app-create.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { AppCreateComponent } from './app-create.component';
 
@@ -6,7 +6,7 @@ describe('AppCreateComponent', () => {
   let component: AppCreateComponent;
   let fixture: ComponentFixture<AppCreateComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [AppCreateComponent],
     })

console/src/app/pages/projects/apps/app-detail/app-detail.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { AppDetailComponent } from './app-detail.component';
 
@@ -6,7 +6,7 @@ describe('AppDetailComponent', () => {
   let component: AppDetailComponent;
   let fixture: ComponentFixture<AppDetailComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [AppDetailComponent],
     })

console/src/app/pages/projects/apps/app-secret-dialog/app-secret-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 { AppSecretDialogComponent } from './app-secret-dialog.component';
 
@@ -6,7 +6,7 @@ describe('AppSecretDialogComponent', () => {
     let component: AppSecretDialogComponent;
     let fixture: ComponentFixture<AppSecretDialogComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [AppSecretDialogComponent],
         })

console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { GrantedProjectDetailComponent } from './granted-project-detail.component';
 
@@ -6,7 +6,7 @@ describe('GrantedProjectDetailComponent', () => {
     let component: GrantedProjectDetailComponent;
     let fixture: ComponentFixture<GrantedProjectDetailComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [GrantedProjectDetailComponent],
         })

console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { GrantedProjectGridComponent } from './granted-project-grid.component';
 
@@ -6,7 +6,7 @@ describe('GridComponent', () => {
     let component: GrantedProjectGridComponent;
     let fixture: ComponentFixture<GrantedProjectGridComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [GrantedProjectGridComponent],
         })

console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { GrantedProjectListComponent } from './granted-project-list.component';
 
@@ -6,7 +6,7 @@ describe('ProjectListComponent', () => {
     let component: GrantedProjectListComponent;
     let fixture: ComponentFixture<GrantedProjectListComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [GrantedProjectListComponent],
         })

console/src/app/pages/projects/granted-projects/granted-projects.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { GrantedProjectsComponent } from './granted-projects.component';
 
@@ -6,7 +6,7 @@ describe('GrantedProjectsComponent', () => {
     let component: GrantedProjectsComponent;
     let fixture: ComponentFixture<GrantedProjectsComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [GrantedProjectsComponent],
         })

console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ApplicationGridComponent } from './application-grid.component';
 
@@ -6,7 +6,7 @@ describe('AppGridComponent', () => {
     let component: ApplicationGridComponent;
     let fixture: ComponentFixture<ApplicationGridComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [ApplicationGridComponent],
         })

console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
@@ -10,7 +10,7 @@ describe('ProjectApplicationsComponent', () => {
     let component: ApplicationsComponent;
     let fixture: ComponentFixture<ApplicationsComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [ApplicationsComponent],
             imports: [

console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { OwnedProjectDetailComponent } from './owned-project-detail.component';
 
@@ -7,7 +7,7 @@ describe('ProjectDetailComponent', () => {
     let component: OwnedProjectDetailComponent;
     let fixture: ComponentFixture<OwnedProjectDetailComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [OwnedProjectDetailComponent],
         })

console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ProjectGrantsComponent } from './project-grants.component';
 
@@ -6,7 +6,7 @@ describe('ProjectGrantsComponent', () => {
     let component: ProjectGrantsComponent;
     let fixture: ComponentFixture<ProjectGrantsComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [ProjectGrantsComponent],
         })

console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { OwnedProjectGridComponent } from './owned-project-grid.component';
 
@@ -6,7 +6,7 @@ describe('GridComponent', () => {
     let component: OwnedProjectGridComponent;
     let fixture: ComponentFixture<OwnedProjectGridComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [OwnedProjectGridComponent],
         })

console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { GrantedProjectListComponent } from './granted-project-list.component';
 
@@ -6,7 +6,7 @@ describe('ProjectListComponent', () => {
     let component: GrantedProjectListComponent;
     let fixture: ComponentFixture<GrantedProjectListComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [GrantedProjectListComponent],
         })

console/src/app/pages/projects/owned-projects/owned-projects.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { OwnedProjectsComponent } from './owned-projects.component';
 
@@ -6,7 +6,7 @@ describe('OwnedProjectComponent', () => {
     let component: OwnedProjectsComponent;
     let fixture: ComponentFixture<OwnedProjectsComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [OwnedProjectsComponent],
         })

console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ProjectGrantDetailComponent } from './project-grant-detail.component';
 
@@ -6,7 +6,7 @@ describe('GrantComponent', () => {
     let component: ProjectGrantDetailComponent;
     let fixture: ComponentFixture<ProjectGrantDetailComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [ProjectGrantDetailComponent],
         })

console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members-create-dialog/project-grant-members-create-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 { ProjectGrantMembersCreateDialogComponent } from './project-grant-members-create-dialog.component';
 
@@ -6,7 +6,7 @@ describe('ProjectGrantMembersCreateDialogComponent', () => {
     let component: ProjectGrantMembersCreateDialogComponent;
     let fixture: ComponentFixture<ProjectGrantMembersCreateDialogComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [ProjectGrantMembersCreateDialogComponent],
         })

console/src/app/pages/projects/project-create/project-create.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ProjectCreateComponent } from './project-create.component';
 
@@ -6,7 +6,7 @@ describe('ProjectCreateComponent', () => {
   let component: ProjectCreateComponent;
   let fixture: ComponentFixture<ProjectCreateComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ProjectCreateComponent],
     })

console/src/app/pages/projects/project-grant-create/project-grant-create.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ProjectGrantCreateComponent } from './project-grant-create.component';
 
@@ -6,7 +6,7 @@ describe('GrantCreateComponent', () => {
     let component: ProjectGrantCreateComponent;
     let fixture: ComponentFixture<ProjectGrantCreateComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [ProjectGrantCreateComponent],
         })

console/src/app/pages/projects/project-role-create/project-role-create.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ProjectRoleCreateComponent } from './project-role-create.component';
 
@@ -6,7 +6,7 @@ describe('ProjectRoleCreateComponent', () => {
   let component: ProjectRoleCreateComponent;
   let fixture: ComponentFixture<ProjectRoleCreateComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ProjectRoleCreateComponent],
     })

console/src/app/pages/signedout/signedout.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SignedoutComponent } from './signedout.component';
 
@@ -6,7 +6,7 @@ describe('SignedoutComponent', () => {
     let component: SignedoutComponent;
     let fixture: ComponentFixture<SignedoutComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [SignedoutComponent],
         })

console/src/app/pages/user-grant-create/user-grant-create.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { UserGrantCreateComponent } from './user-grant-create.component';
 
@@ -6,7 +6,7 @@ describe('UserGrantCreateComponent', () => {
     let component: UserGrantCreateComponent;
     let fixture: ComponentFixture<UserGrantCreateComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [UserGrantCreateComponent],
         })

console/src/app/pages/users/user-create-machine/user-create-machine.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { UserCreateMachineComponent } from './user-create-machine.component';
 
@@ -6,7 +6,7 @@ describe('UserCreateMachineComponent', () => {
     let component: UserCreateMachineComponent;
     let fixture: ComponentFixture<UserCreateMachineComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [UserCreateMachineComponent],
         })

console/src/app/pages/users/user-create/user-create.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { UserCreateComponent } from './user-create.component';
 
@@ -6,7 +6,7 @@ describe('UserCreateComponent', () => {
   let component: UserCreateComponent;
   let fixture: ComponentFixture<UserCreateComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [UserCreateComponent],
     })

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { AuthUserDetailComponent } from './auth-user-detail.component';
 
@@ -6,7 +6,7 @@ describe('AuthUserDetailComponent', () => {
   let component: AuthUserDetailComponent;
   let fixture: ComponentFixture<AuthUserDetailComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [AuthUserDetailComponent],
     })

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { AuthUserMfaComponent } from './auth-user-mfa.component';
 
@@ -6,7 +6,7 @@ describe('AuthUserMfaComponent', () => {
     let component: AuthUserMfaComponent;
     let fixture: ComponentFixture<AuthUserMfaComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [AuthUserMfaComponent],
         })

console/src/app/pages/users/user-detail/auth-user-detail/code-dialog/code-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 { CodeDialogComponent } from './code-dialog.component';
 
@@ -6,7 +6,7 @@ describe('CodeDialogComponent', () => {
     let component: CodeDialogComponent;
     let fixture: ComponentFixture<CodeDialogComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [CodeDialogComponent],
         })

console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-setting.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ThemeSettingComponent } from './theme-setting.component';
 
@@ -6,7 +6,7 @@ describe('ThemeSettingComponent', () => {
     let component: ThemeSettingComponent;
     let fixture: ComponentFixture<ThemeSettingComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [ThemeSettingComponent],
         })

console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { DetailFormComponent } from './detail-form.component';
 
@@ -6,7 +6,7 @@ describe('DetailFormComponent', () => {
   let component: DetailFormComponent;
   let fixture: ComponentFixture<DetailFormComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [DetailFormComponent],
     })

console/src/app/pages/users/user-detail/detail-form/detail-form.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { DetailFormComponent } from './detail-form.component';
 
@@ -6,7 +6,7 @@ describe('DetailFormComponent', () => {
   let component: DetailFormComponent;
   let fixture: ComponentFixture<DetailFormComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [DetailFormComponent],
     })

console/src/app/pages/users/user-detail/external-idps/external-idps.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ExternalIdpsComponent } from './external-idps.component';
 
@@ -6,7 +6,7 @@ describe('ExternalIdpsComponent', () => {
   let component: ExternalIdpsComponent;
   let fixture: ComponentFixture<ExternalIdpsComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ExternalIdpsComponent ],
     })

console/src/app/pages/users/user-detail/machine-keys/add-key-dialog/add-key-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 { AddKeyDialogComponent } from './add-key-dialog.component';
 
@@ -6,7 +6,7 @@ describe('AddKeyDialogComponent', () => {
     let component: AddKeyDialogComponent;
     let fixture: ComponentFixture<AddKeyDialogComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [AddKeyDialogComponent],
         })

console/src/app/pages/users/user-detail/machine-keys/add-key-dialog/add-key-dialog.component.ts

@@ -1,5 +1,6 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Moment } from 'moment';
 import { MachineKeyType } from 'src/app/proto/generated/management_pb';
 
 @Component({
@@ -7,11 +8,11 @@ import { MachineKeyType } from 'src/app/proto/generated/management_pb';
     templateUrl: './add-key-dialog.component.html',
     styleUrls: ['./add-key-dialog.component.scss'],
 })
-export class AddKeyDialogComponent implements OnInit {
+export class AddKeyDialogComponent {
     types: MachineKeyType[] = [
         MachineKeyType.MACHINEKEY_JSON,
     ];
-    date: any;
+    date!: Moment;
     public type: MachineKeyType = MachineKeyType.MACHINEKEY_JSON;
 
     constructor(
@@ -19,9 +20,6 @@ export class AddKeyDialogComponent implements OnInit {
         @Inject(MAT_DIALOG_DATA) public data: any,
     ) { }
 
-    ngOnInit(): void {
-    }
-
     public closeDialog(): void {
         this.dialogRef.close(false);
     }

console/src/app/pages/users/user-detail/machine-keys/add-key-dialog/add-key-dialog.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -23,6 +24,7 @@ import { AddKeyDialogComponent } from './add-key-dialog.component';
         MatIconModule,
         FormsModule,
         MatDatepickerModule,
+        MatMomentDateModule,
     ],
 })
 export class AddKeyDialogModule { }

console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { MachineKeysComponent } from './machine-keys.component';
 
@@ -6,7 +6,7 @@ describe('MachineKeysComponent', () => {
     let component: MachineKeysComponent;
     let fixture: ComponentFixture<MachineKeysComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [MachineKeysComponent],
         })

console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.ts

@@ -5,6 +5,7 @@ import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { TranslateService } from '@ngx-translate/core';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
+import { Moment } from 'moment';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { MachineKeySearchResponse, MachineKeyType, MachineKeyView } from 'src/app/proto/generated/management_pb';
 import { ManagementService } from 'src/app/services/mgmt.service';
@@ -84,10 +85,10 @@ export class MachineKeysComponent implements OnInit {
 
                 let date: Timestamp | undefined;
 
-                if (resp.date as Date) {
+                if (resp.date as Moment) {
                     const ts = new Timestamp();
-
+                    console.log(resp.date.toDate().getTime());
-                    const milliseconds = resp.date.getTime();
+                    const milliseconds = resp.date.toDate().getTime();
                     const seconds = Math.abs(milliseconds / 1000);
                     const nanos = (milliseconds - seconds * 1000) * 1000 * 1000;
                     ts.setSeconds(seconds);

console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-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 { ShowKeyDialogComponent } from './show-key-dialog.component';
 
@@ -6,7 +6,7 @@ describe('ShowKeyDialogComponent', () => {
     let component: ShowKeyDialogComponent;
     let fixture: ComponentFixture<ShowKeyDialogComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [ShowKeyDialogComponent],
         })

console/src/app/pages/users/user-detail/membership-detail/membership-detail.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { MembershipDetailComponent } from './membership-detail.component';
 
@@ -6,7 +6,7 @@ describe('MembershipDetailComponent', () => {
     let component: MembershipDetailComponent;
     let fixture: ComponentFixture<MembershipDetailComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [MembershipDetailComponent],
         })

console/src/app/pages/users/user-detail/memberships/memberships.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { MembershipsComponent } from './memberships.component';
 
@@ -6,7 +6,7 @@ describe('MembershipsComponent', () => {
     let component: MembershipsComponent;
     let fixture: ComponentFixture<MembershipsComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [MembershipsComponent],
         })

console/src/app/pages/users/user-detail/password/password.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { PasswordComponent } from './password.component';
 
@@ -6,7 +6,7 @@ describe('PasswordComponent', () => {
     let component: PasswordComponent;
     let fixture: ComponentFixture<PasswordComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [PasswordComponent],
         }).compileComponents();

console/src/app/pages/users/user-detail/user-detail/user-detail.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { UserDetailComponent } from './user-detail.component';
 
@@ -6,7 +6,7 @@ describe('UserDetailComponent', () => {
     let component: UserDetailComponent;
     let fixture: ComponentFixture<UserDetailComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [UserDetailComponent],
         }).compileComponents();

console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { UserMfaComponent } from './user-mfa.component';
 
@@ -6,7 +6,7 @@ describe('UserMfaComponent', () => {
     let component: UserMfaComponent;
     let fixture: ComponentFixture<UserMfaComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [UserMfaComponent],
         })

console/src/app/pages/users/user-list/user-list.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { UserListComponent } from './user-list.component';
 
@@ -6,7 +6,7 @@ describe('UserListComponent', () => {
   let component: UserListComponent;
   let fixture: ComponentFixture<UserListComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [UserListComponent],
     })

console/src/app/pages/users/user-list/user-table/user-table.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { UserTableComponent } from './user-table.component';
 
@@ -6,7 +6,7 @@ describe('UserTableComponent', () => {
     let component: UserTableComponent;
     let fixture: ComponentFixture<UserTableComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [UserTableComponent],
         })

console/src/app/pipes/localized-date-pipe/localized-date-pipe.module.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MomentModule } from 'ngx-moment';
 
 import { LocalizedDatePipe } from './localized-date.pipe';
 
@@ -11,7 +10,6 @@ import { LocalizedDatePipe } from './localized-date.pipe';
     ],
     imports: [
         CommonModule,
-        MomentModule,
     ],
     exports: [
         LocalizedDatePipe,