NAS-121827: Updating to Angular 16

package.json

@@ -45,17 +45,17 @@
     "filesize": "~6.3.0"
   },
   "dependencies": {
-    "@angular/animations": "^15.1.0",
-    "@angular/cdk": "^15.1.0",
-    "@angular/common": "^15.1.0",
-    "@angular/compiler": "^15.1.0",
-    "@angular/core": "^15.1.0",
+    "@angular/animations": "^16.0.3",
+    "@angular/cdk": "^16.0.2",
+    "@angular/common": "^16.0.3",
+    "@angular/compiler": "^16.0.3",
+    "@angular/core": "^16.0.3",
     "@angular/flex-layout": "^14.0.0-beta.41",
-    "@angular/forms": "^15.1.0",
-    "@angular/material": "^15.1.0",
-    "@angular/platform-browser": "^15.1.0",
-    "@angular/platform-browser-dynamic": "^15.1.0",
-    "@angular/router": "^15.1.0",
+    "@angular/forms": "^16.0.3",
+    "@angular/material": "^16.0.2",
+    "@angular/platform-browser": "^16.0.3",
+    "@angular/platform-browser-dynamic": "^16.0.3",
+    "@angular/router": "^16.0.3",
     "@biesbjerg/ngx-translate-extract-marker": "~1.0.0",
     "@circlon/angular-tree-component": "~11.0.4",
     "@material-design-icons/font": "~0.11.7",
@@ -77,7 +77,7 @@
     "@sentry/angular": "5.30.0",
     "@sentry/utils": "~7.42.0",
     "@shopify/eslint-plugin": "~42.0.1",
-    "@swimlane/ngx-datatable": "~19.0.0",
+    "@swimlane/ngx-datatable": "~20.1.0",
     "@testing-library/dom": "~8.1.0",
     "@types/dygraphs": "^2.1.2",
     "@types/fontfaceobserver": "^0.0.6",
@@ -90,7 +90,7 @@
     "angular-resize-event": "^3.2.0",
     "angular2-qrcode": "~2.0.3",
     "angular2-uuid": "~1.1.1",
-    "chart.js": "~2.9.4",
+    "chart.js": "~4.1.1",
     "core-js": "~3.6.4",
     "cron-parser": "~4.2.1",
     "croner": "~4.2.3",
@@ -124,9 +124,9 @@
     "ng-gallery": "~8.0.4",
     "ng-lazyload-image": "~9.1.3",
     "ng-mocks": "~14.5.2",
-    "ng2-charts": "~2.4.1",
+    "ng2-charts": "~4.1.1",
     "ng2-dragula": "~2.1.1",
-    "ngx-color-picker": "~11.0.0",
+    "ngx-color-picker": "~14.0.0",
     "ngx-drag-drop": "~15.0.1",
     "ngx-filesize": "~3.0.1",
     "ngx-img-fallback": "^2.0.0",
@@ -146,20 +146,19 @@
     "utility-types": "~3.10.0",
     "xterm": "~4.9.0",
     "xterm-addon-fit": "~0.4.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.13.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.1.1",
-    "@angular-devkit/core": "^15.1.1",
+    "@angular-devkit/build-angular": "^16.0.3",
+    "@angular-devkit/core": "^16.0.3",
     "@angular-eslint/builder": "~15.2.0",
     "@angular-eslint/eslint-plugin": "~15.2.0",
     "@angular-eslint/eslint-plugin-template": "~15.2.0",
     "@angular-eslint/template-parser": "~15.2.0",
-    "@angular/cli": "^15.1.1",
-    "@angular/compiler-cli": "^15.1.0",
+    "@angular/cli": "^16.0.3",
+    "@angular/compiler-cli": "^16.0.3",
     "@bartholomej/ngx-translate-extract": "~8.0.1",
     "@commitlint/cli": "~13.1.0",
-    "@types/chart.js": "^2.9.37",
     "@types/d3": "~5.16.0",
     "@types/figlet": "~1.5.5",
     "@types/inquirer": "^8.0.0",
@@ -181,7 +180,7 @@
     "figlet": "~1.6.0",
     "husky": "^7.0.4",
     "inquirer": "^8.0.0",
-    "jest": "~28.1.3",
+    "jest": "~29.5.0",
     "jest-canvas-mock": "^2.5.0",
     "jira-prepare-commit-msg": "^1.6.1",
     "lint-staged": "^11.1.2",
@@ -191,7 +190,7 @@
     "stylelint-config-standard": "^26.0.0",
     "ts-jest": "~28.0.8",
     "ts-node": "~8.6.2",
-    "typescript": "~4.8.4"
+    "typescript": "~5.0.4"
   },
   "lint-staged": {
     "*.{ts,html}": "eslint --cache --fix",

src/app/core/classes/theme-utils/theme-utils.ts

@@ -134,6 +134,8 @@ export class ThemeUtils {
     return this.adjustLightness(value, pc, 'lighten');
   }
 
+  rgbToHsl(param: string | number[], inputString: boolean, outputString: false): [number, number, number];
+  rgbToHsl(param: string | number[], inputString: boolean, outputString: true): string;
   rgbToHsl(param: string | number[], inputString = true, outputString = true): number[] | string {
     const value: number[] = inputString ? this.forceRgb(param as string) : param as number[];
 

src/app/core/components/directives/text-limiter/text-limiter.directive.ts

@@ -70,7 +70,7 @@ export class TextLimiterDirective implements AfterViewInit, OnChanges {
   }
 
   truncate(str: string): string {
-    if (str.length > this.threshold) {
+    if (str.length > Number(this.threshold)) {
       const truncated = str.substring(0, Number(this.threshold) - 3);
       return truncated + '...';
     }

src/app/core/guards/translations-loaded.guard.ts

 import { Injectable } from '@angular/core';
-import { CanActivate } from '@angular/router';
+
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Observable, of } from 'rxjs';
 import {
@@ -13,7 +13,7 @@ import { WebsocketConnectionService } from 'app/services/websocket-connection.se
  */
 @UntilDestroy()
 @Injectable({ providedIn: 'root' })
-export class TranslationsLoadedGuard implements CanActivate {
+export class TranslationsLoadedGuard {
   // Bail on translations if it takes too much time to load.
   private readonly maxLanguageLoadingTime = 10 * 1000;
   isConnected = false;

src/app/modules/common/dual-list/dual-list.component.ts

@@ -32,7 +32,7 @@ export class DualListboxComponent<T extends { id: string | number; name?: string
   @Input() title1: string;
   @Input() title2: string;
 
-  @ContentChild('templateItem', { static: true }) templateItem: TemplateRef<void>;
+  @ContentChild('templateItem', { static: true }) templateItem: TemplateRef<{ $implicit: T }>;
   @ContentChild('templateArrowLeft', { static: true }) templateArrowLeft: TemplateRef<void>;
   @ContentChild('templateArrowRight', { static: true }) templateArrowRight: TemplateRef<void>;
 

src/app/modules/entity/entity.module.ts

@@ -42,7 +42,6 @@ import { TranslateModule } from '@ngx-translate/core';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { NgxFilesizeModule } from 'ngx-filesize';
-import { NgxUploaderModule } from 'ngx-uploader';
 import { CommonDirectivesModule } from 'app/directives/common/common-directives.module';
 import { CastModule } from 'app/modules/cast/cast.module';
 import { EntityEmptyComponent } from 'app/modules/entity/entity-empty/entity-empty.component';
@@ -106,7 +105,6 @@ import { AppLoaderService } from 'app/services';
     MatTabsModule,
     MatChipsModule,
     MatDatepickerModule,
-    NgxUploaderModule,
     FlexLayoutModule,
     TranslateModule,
     CdkTreeModule,

src/app/pages/apps/components/available-apps/available-apps.component.ts

@@ -45,7 +45,7 @@ export class AvailableAppsComponent implements AfterViewInit, OnInit {
   ngOnInit(): void {
     // For clicking the breadcrumbs link to this page
     this.router.events.pipe(
-      filter((event: RouterEvent) => event instanceof NavigationSkipped),
+      filter((event) => event instanceof NavigationSkipped),
       untilDestroyed(this),
     ).subscribe(() => {
       if (this.router.url.endsWith('/apps/available')) {

src/app/pages/datasets/datasets.module.ts

@@ -10,7 +10,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
-import { ChartsModule } from 'ng2-charts';
+import { NgChartsModule } from 'ng2-charts';
 import { NgxFilesizeModule } from 'ngx-filesize';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { CoreComponents } from 'app/core/core-components.module';
@@ -56,7 +56,7 @@ import { DatasetNodeComponent } from './components/dataset-node/dataset-node.com
   imports: [
     CommonModule,
     CommonDirectivesModule,
-    ChartsModule,
+    NgChartsModule,
     LayoutModule,
     routing,
     TranslateModule,

src/app/pages/directory-service/directory-service.module.ts

@@ -9,7 +9,6 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatListModule } from '@angular/material/list';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { TranslateModule } from '@ngx-translate/core';
-import { NgxUploaderModule } from 'ngx-uploader';
 import { EntityModule } from 'app/modules/entity/entity.module';
 import { IxFormsModule } from 'app/modules/ix-forms/ix-forms.module';
 import { IxTableModule } from 'app/modules/ix-tables/ix-table.module';
@@ -36,7 +35,6 @@ import { LdapComponent } from './components/ldap/ldap.component';
     EntityModule,
     ReactiveFormsModule,
     FlexLayoutModule,
-    NgxUploaderModule,
     routing,
     MatListModule,
     MatToolbarModule,

src/app/pages/network/network.module.ts

@@ -10,7 +10,6 @@ import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { NgxUploaderModule } from 'ngx-uploader';
 import { CommonDirectivesModule } from 'app/directives/common/common-directives.module';
 import { CastModule } from 'app/modules/cast/cast.module';
 import { NgxOrderedListboxModule } from 'app/modules/common/ordered-list/ordered-list.module';
@@ -43,7 +42,6 @@ import { routing } from './network.routing';
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
-    NgxUploaderModule,
     routing,
     MatCardModule,
     MatListModule,

src/app/pages/storage/components/dashboard-pool/pool-usage-card/gauge-chart/gauge-chart.component.ts

@@ -8,7 +8,7 @@ import {
   AfterViewInit,
 } from '@angular/core';
 import {
-  Chart, ChartDataSets, ChartOptions,
+  Chart, ChartOptions,
 } from 'chart.js';
 import { Theme } from 'app/interfaces/theme.interface';
 import { ThemeService } from 'app/services/theme/theme.service';

src/app/pages/storage/storage.module.ts

@@ -20,7 +20,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
-import { ChartsModule } from 'ng2-charts';
+import { NgChartsModule } from 'ng2-charts';
 import { NgxFilesizeModule } from 'ngx-filesize';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { CoreComponents } from 'app/core/core-components.module';
@@ -77,7 +77,7 @@ import { ZfsHealthCardComponent } from './components/dashboard-pool/zfs-health-c
     IxIconModule,
     MatProgressSpinnerModule,
     MatToolbarModule,
-    ChartsModule,
+    NgChartsModule,
     FlexLayoutModule,
     ReactiveFormsModule,
     LayoutModule,

src/app/pages/system/system.module.ts

@@ -19,7 +19,6 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { QRCodeModule } from 'angular2-qrcode';
 import { NgxFilesizeModule } from 'ngx-filesize';
-import { NgxUploaderModule } from 'ngx-uploader';
 import { CoreComponents } from 'app/core/core-components.module';
 import { CommonDirectivesModule } from 'app/directives/common/common-directives.module';
 import { CastModule } from 'app/modules/cast/cast.module';
@@ -157,7 +156,6 @@ import { routing } from './system.routing';
     MatToolbarModule,
     MatListModule,
     MatButtonModule,
-    NgxUploaderModule,
     QRCodeModule,
     ReactiveFormsModule,
     routing,

src/app/services/auth/auth-guard.service.ts

 import { Inject, Injectable } from '@angular/core';
-import {
-  CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router,
-} from '@angular/router';
+import { ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { WINDOW } from 'app/helpers/window.helper';
 import { AuthService } from 'app/services/auth/auth.service';
 
 @UntilDestroy()
 @Injectable()
-export class AuthGuardService implements CanActivate {
+export class AuthGuardService {
   isAuthenticated = false;
   constructor(
     private router: Router,