Upgrade to Angular 10 (#1137)

The TypeScript version is too old which is introducing errors. 
This commit upgrades Angular from v9 to v10. 

Typescript has been updated to TypeScript 4.0.8
Updated test coverage command to include 
--source-map=false flag due to Chrome timeout issue

.github/workflows/coverage-report.yml

@@ -23,7 +23,7 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm install
-      - run: npm run test -- "--code-coverage"
+      - run: npm run test -- "--code-coverage" "--source-map=false"
       - uses: codecov/codecov-action@v3
         with:
           directory: ./tests/coverage

package.json

@@ -40,16 +40,17 @@
     }
   },
   "dependencies": {
-    "@angular/animations": "^9.1.13",
-    "@angular/cdk": "^9.2.4",
-    "@angular/common": "^9.1.13",
-    "@angular/compiler": "^9.1.13",
-    "@angular/core": "^9.1.13",
-    "@angular/forms": "^9.1.13",
-    "@angular/material": "^9.2.4",
-    "@angular/platform-browser": "^9.1.13",
-    "@angular/platform-browser-dynamic": "^9.1.13",
-    "@angular/router": "^9.1.13",
+    "@angular/animations": "^10.2.5",
+    "@angular/cdk": "^10.2.7",
+    "@angular/common": "^10.2.5",
+    "@angular/compiler": "^10.2.5",
+    "@angular/core": "^10.2.5",
+    "@angular/forms": "^10.2.5",
+    "@angular/localize": "^10.2.5",
+    "@angular/material": "^10.2.7",
+    "@angular/platform-browser": "^10.2.5",
+    "@angular/platform-browser-dynamic": "^10.2.5",
+    "@angular/router": "^10.2.5",
     "@github/markdown-toolbar-element": "^2.1.1",
     "@octokit/rest": "^16.37.0",
     "ajv": "^6.11.0",
@@ -72,15 +73,15 @@
     "ngx-mat-select-search": "^3.3.3",
     "node-fetch": "^2.6.8",
     "rxjs": "6.6.7",
-    "tslib": "^1.10.0",
+    "tslib": "^2.0.0",
     "uuid": "7.0.3",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.15",
-    "@angular/cli": "^9.1.15",
-    "@angular/compiler-cli": "^9.1.13",
-    "@angular/language-service": "^9.1.13",
+    "@angular-devkit/build-angular": "~0.1002.4",
+    "@angular/cli": "^10.2.4",
+    "@angular/compiler-cli": "^10.2.5",
+    "@angular/language-service": "^10.2.5",
     "@graphql-codegen/cli": "^2.6.4",
     "@graphql-codegen/typescript": "1.17.7",
     "@graphql-codegen/typescript-document-nodes": "1.17.7",
@@ -99,23 +100,23 @@
     "graphql-codegen-fragment-matcher": "^0.18.2",
     "husky": "^4.2.5",
     "jasmine": "^3.9.0",
-    "jasmine-core": "3.5.0",
-    "jasmine-spec-reporter": "4.2.1",
-    "karma": "^4.4.1",
-    "karma-chrome-launcher": "3.1.1",
-    "karma-coverage-istanbul-reporter": "2.1.1",
+    "jasmine-core": "~3.5.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-firefox-launcher": "^2.1.1",
-    "karma-jasmine": "3.1.0",
-    "karma-jasmine-html-reporter": "1.5.1",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
     "npm-run-all": "4.1.5",
     "prettier": "2.2.1",
     "pretty-quick": "^3.1.1",
-    "protractor": "5.4.2",
+    "protractor": "~7.0.0",
     "scuri": "^0.9.4",
     "ts-node": "^7.0.1",
-    "tslint": "5.20.1",
+    "tslint": "~6.1.0",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "3.8.3",
+    "typescript": "4.0.8",
     "wait-on": "3.3.0",
     "webdriver-manager": "12.1.7"
   }

src/app/app.module.ts

@@ -94,8 +94,7 @@ import { SharedModule } from './shared/shared.module';
       useClass: ErrorHandlingService
     }
   ],
-  bootstrap: [AppComponent],
-  entryComponents: [UserConfirmationComponent, SessionFixConfirmationComponent, LabelDefinitionPopupComponent]
+  bootstrap: [AppComponent]
 })
 export class AppModule {
   constructor(

src/app/auth/auth.module.ts

@@ -10,7 +10,6 @@ import { SessionSelectionComponent } from './session-selection/session-selection
 
 @NgModule({
   imports: [AuthRoutingModule, SharedModule, CommonModule],
-  declarations: [AuthComponent, ProfilesComponent, JsonParseErrorDialogComponent, ConfirmLoginComponent, SessionSelectionComponent],
-  entryComponents: [JsonParseErrorDialogComponent]
+  declarations: [AuthComponent, ProfilesComponent, JsonParseErrorDialogComponent, ConfirmLoginComponent, SessionSelectionComponent]
 })
 export class AuthModule {}

src/app/core/guards/user-confirmation/user-confirmation.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { CanDeactivateIssueGuard } from '../can-deactivate-issue-guard.service';
 
 /**

src/app/core/services/session-fix-confirmation/session-fix-confirmation.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 export interface RepositoryData {
   user: string;

src/app/shared/action-toasters/action-toasters.module.ts

@@ -6,7 +6,6 @@ import { UndoActionComponent } from './undo-action/undo-action.component';
 @NgModule({
   imports: [CommonModule, MaterialModule],
   declarations: [UndoActionComponent],
-  exports: [UndoActionComponent],
-  entryComponents: [UndoActionComponent]
+  exports: [UndoActionComponent]
 })
 export class ActionToasterModule {}

src/app/shared/action-toasters/undo-action/undo-action.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
+import { MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-undo-action',

src/app/shared/error-toasters/error-toaster.module.ts

@@ -9,7 +9,6 @@ import { ToasterComponent } from './toaster/toaster.component';
 @NgModule({
   imports: [CommonModule, MaterialModule],
   declarations: [GeneralMessageErrorComponent, FormErrorComponent, InvalidCredentialsErrorComponent, ToasterComponent],
-  exports: [GeneralMessageErrorComponent, FormErrorComponent, InvalidCredentialsErrorComponent],
-  entryComponents: [GeneralMessageErrorComponent, FormErrorComponent, InvalidCredentialsErrorComponent]
+  exports: [GeneralMessageErrorComponent, FormErrorComponent, InvalidCredentialsErrorComponent]
 })
 export class ErrorToasterModule {}

src/app/shared/error-toasters/invalid-credentials-error/invalid-credentials-error.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
+import { MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-form-error',

src/app/shared/issue/conflict-dialog/conflict-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatTabChangeEvent } from '@angular/material/tabs';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { Conflict } from '../../../core/models/conflict/conflict.model';

src/app/shared/issue/issue-components.module.ts

@@ -34,7 +34,6 @@ import { UnsureCheckboxComponent } from './unsure-checkbox/unsure-checkbox.compo
     DuplicatedIssuesComponent,
     UnsureCheckboxComponent,
     ConflictDialogComponent
-  ],
-  entryComponents: [ConflictDialogComponent]
+  ]
 })
 export class IssueComponentsModule {}

src/app/shared/label-definition-popup/label-definition-popup.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { DomSanitizer } from '@angular/platform-browser';
 
 /**

src/app/shared/view-issue/new-team-response/conflict-dialog/conflict-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatTabChangeEvent } from '@angular/material/tabs';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { Issue } from '../../../../core/models/issue.model';

src/app/shared/view-issue/new-team-response/new-team-response.module.ts

@@ -20,7 +20,6 @@ import { NewTeamResponseComponent } from './new-team-response.component';
     LabelDropdownModule,
     MarkdownModule.forChild(),
     NgxMatSelectSearchModule
-  ],
-  entryComponents: [ConflictDialogComponent]
+  ]
 })
 export class NewTeamResponseModule {}

src/app/shared/view-issue/tester-response/conflict-dialog/conflict-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { Conflict } from '../../../../core/models/conflict/conflict.model';
 import { TesterResponse } from '../../../../core/models/tester-response.model';

src/app/shared/view-issue/tester-response/tester-response.module.ts

@@ -11,7 +11,6 @@ import { TesterResponseComponent } from './tester-response.component';
 @NgModule({
   exports: [TesterResponseComponent],
   declarations: [TesterResponseComponent, ConflictDialogComponent],
-  entryComponents: [ConflictDialogComponent],
   imports: [CommonModule, CommentEditorModule, SharedModule, IssueComponentsModule, LabelDropdownModule, MarkdownModule.forChild()]
 })
 export class TesterResponseModule {}

src/polyfills.ts

@@ -1,3 +1,7 @@
+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+import '@angular/localize/init';
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.

tests/constants/label.constants.ts

@@ -1,5 +1,5 @@
 import { Label } from '../../src/app/core/models/label.model';
-import { LABEL_DEFINITIONS, LabelService } from '../../src/app/core/services/label.service';
+import { LabelService, LABEL_DEFINITIONS } from '../../src/app/core/services/label.service';
 
 // Label name constants
 export const SEVERITY_VERY_LOW = 'Very Low';

tests/services/label.service.spec.ts

@@ -1,7 +1,7 @@
 import { of } from 'rxjs';
 import { GithubLabel } from '../../src/app/core/models/github/github-label.model';
 import { Label } from '../../src/app/core/models/label.model';
-import { LABEL_DEFINITIONS, LabelService } from '../../src/app/core/services/label.service';
+import { LabelService, LABEL_DEFINITIONS } from '../../src/app/core/services/label.service';
 import * as GithubLabelConstant from '../constants/githublabel.constants';
 import * as LabelConstant from '../constants/label.constants';
 

tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "incremental": true,
     "downlevelIteration": true,
-    "module": "esnext",
+    "module": "es2020",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,