build: upgrade angular core to 16

package.json

@@ -97,7 +97,7 @@
     "int:find": "ngx-translate-extract --input ./src --output ./src/assets/i18n/*.json  --sort --format namespaced-json --marker _",
     "int:clean": "ngx-translate-extract --input ./src --output ./src/assets/i18n/*.json --clean --sort --format namespaced-json --marker _",
     "int:test": "node ./tools/test-lng-files.js",
-    "postinstall": "cross-env-shell node ./tools/is-skip-postinstall.js --env.SKIP_POST_INSTALL=$SKIP_POST_INSTALL || ngcc --tsconfig src/tsconfig.app.json"
+    "postinstall": "cross-env-shell node ./tools/is-skip-postinstall.js --env.SKIP_POST_INSTALL=$SKIP_POST_INSTALL || echo ''jooo"
   },
   "publish": [
     {
@@ -116,27 +116,27 @@
     "node-fetch": "^2.7.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.2.11",
+    "@angular-devkit/build-angular": "^16.2.14",
     "@angular-eslint/builder": "^14.0.0",
     "@angular-eslint/eslint-plugin": "^14.1.2",
     "@angular-eslint/eslint-plugin-template": "^14.0.2",
     "@angular-eslint/template-parser": "^16.1.1",
-    "@angular/animations": "^15.2.10",
+    "@angular/animations": "^16.2.12",
     "@angular/cdk": "^15.2.9",
-    "@angular/cli": "^15.2.11",
-    "@angular/common": "^15.2.10",
-    "@angular/compiler": "^15.2.10",
-    "@angular/compiler-cli": "^15.2.10",
-    "@angular/core": "^15.2.10",
-    "@angular/forms": "^15.2.10",
-    "@angular/language-service": "^15.2.10",
+    "@angular/cli": "^16.2.14",
+    "@angular/common": "^16.2.12",
+    "@angular/compiler": "^16.2.12",
+    "@angular/compiler-cli": "^16.2.12",
+    "@angular/core": "^16.2.12",
+    "@angular/forms": "^16.2.12",
+    "@angular/language-service": "^16.2.12",
     "@angular/material": "^15.2.9",
     "@angular/material-moment-adapter": "^15.2.9",
-    "@angular/platform-browser": "^15.2.10",
-    "@angular/platform-browser-dynamic": "^15.2.10",
-    "@angular/platform-server": "^15.2.10",
-    "@angular/router": "^15.2.10",
-    "@angular/service-worker": "^15.2.10",
+    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^16.2.12",
+    "@angular/platform-server": "^16.2.12",
+    "@angular/router": "^16.2.12",
+    "@angular/service-worker": "^16.2.12",
     "@biesbjerg/ngx-translate-extract": "^7.0.4",
     "@electron/notarize": "^2.3.2",
     "@fontsource/roboto": "^4.5.8",
@@ -147,8 +147,8 @@
     "@ngrx/schematics": "^15.4.0",
     "@ngrx/store": "15.4.0",
     "@ngrx/store-devtools": "^15.4.0",
-    "@ngx-formly/core": "5.12.7",
-    "@ngx-formly/material": "5.12.7",
+    "@ngx-formly/core": "6.3.4",
+    "@ngx-formly/material": "6.3.4",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
     "@schematics/angular": "^14.1.3",
@@ -166,9 +166,8 @@
     "@typescript-eslint/eslint-plugin": "5.8.1",
     "@typescript-eslint/parser": "5.62.0",
     "angular-material-css-vars": "^4.2.3",
-    "angular2-promise-buttons": "^5.0.3",
     "axios": "^1.6.0",
-    "chart.js": "^2.8.0",
+    "chart.js": "^4.4.3",
     "chromedriver": "^125.0.2",
     "chrono-node": "^2.6.2",
     "clipboard": "^2.0.8",
@@ -176,6 +175,7 @@
     "conventional-changelog-cli": "^4.1.0",
     "cross-env": "^7.0.3",
     "detect-it": "^4.0.1",
+    "dragula": "^3.7.3",
     "electron": "^29.4.2",
     "electron-builder": "^24.13.3",
     "eslint": "^8.23.0",
@@ -208,9 +208,8 @@
     "moment-duration-format": "^2.2.2",
     "nanoid": "^4.0.0",
     "new-github-issue-url": "^0.2.1",
-    "ng2-charts": "^2.3.0",
-    "ng2-charts-schematics": "^0.1.7",
-    "ng2-dragula": "^2.1.1",
+    "ng2-charts": "^6.0.1",
+    "ng2-dragula": "^5.1.0",
     "ngx-date-time-picker-schedule": "^9.4.17",
     "ngx-markdown": "^14.0.1",
     "nightwatch": "^1.7.13",
@@ -228,7 +227,7 @@
     "typescript": "~4.9.5",
     "utils-decorators": "^2.0.3",
     "webdav": "~4.3.0",
-    "zone.js": "~0.11.8"
+    "zone.js": "~0.13.3"
   },
   "resolutions": {
     "sass": "1.32.6"

src/app/app.guard.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import {
   ActivatedRouteSnapshot,
-  CanActivate,
   Router,
   RouterStateSnapshot,
   UrlTree,
@@ -17,7 +16,7 @@ import { Store } from '@ngrx/store';
 import { selectIsFocusOverlayShown } from './features/focus-mode/store/focus-mode.selectors';
 
 @Injectable({ providedIn: 'root' })
-export class ActiveWorkContextGuard implements CanActivate {
+export class ActiveWorkContextGuard {
   constructor(private _workContextService: WorkContextService, private _router: Router) {}
 
   canActivate(
@@ -39,7 +38,7 @@ export class ActiveWorkContextGuard implements CanActivate {
 }
 
 @Injectable({ providedIn: 'root' })
-export class ValidTagIdGuard implements CanActivate {
+export class ValidTagIdGuard {
   constructor(
     private _tagService: TagService,
     private _dataInitService: DataInitService,
@@ -60,7 +59,7 @@ export class ValidTagIdGuard implements CanActivate {
 }
 
 @Injectable({ providedIn: 'root' })
-export class FocusOverlayOpenGuard implements CanActivate {
+export class FocusOverlayOpenGuard {
   constructor(private _store: Store) {}
 
   canActivate(
@@ -72,7 +71,7 @@ export class FocusOverlayOpenGuard implements CanActivate {
 }
 
 @Injectable({ providedIn: 'root' })
-export class ValidProjectIdGuard implements CanActivate {
+export class ValidProjectIdGuard {
   constructor(
     private _projectService: ProjectService,
     private _dataInitService: DataInitService,

src/app/core/persistence/database.service.ts

@@ -23,6 +23,8 @@ export class DatabaseService {
     private _indexedDbAdapterService: IndexedDBAdapterService,
     private _androidDbAdapterService: AndroidDbAdapterService,
   ) {
+    this._adapter = this._indexedDbAdapterService;
+    console.log(this._indexedDbAdapterService);
     this._init().then();
   }
 

src/app/core/persistence/indexed-db-adapter.service.ts

@@ -28,7 +28,7 @@ export class IndexedDBAdapterService implements DBAdapter {
 
   constructor() {}
 
-  async init(): Promise<IDBPDatabase<MyDb>> {
+  public async init(): Promise<IDBPDatabase<MyDb>> {
     try {
       this._db = await openDB<MyDb>(DB_NAME, VERSION, {
         // upgrade(db: IDBPDatabase<MyDb>, oldVersion: number, newVersion: number | null, transaction: IDBPTransaction<MyDb>) {

src/app/core/snack/snack.service.ts

@@ -20,9 +20,6 @@ import { debounce } from 'helpful-decorators';
 })
 export class SnackService {
   private _ref?: MatSnackBarRef<SnackCustomComponent | SimpleSnackBar>;
-  private _onWorkContextChange$: Observable<unknown> = this._actions$.pipe(
-    ofType(setActiveWorkContext),
-  );
 
   constructor(
     private _store$: Store<any>,
@@ -31,7 +28,10 @@ export class SnackService {
     private _matSnackBar: MatSnackBar,
     private _ngZone: NgZone,
   ) {
-    this._onWorkContextChange$.subscribe(() => {
+    const _onWorkContextChange$: Observable<unknown> = this._actions$.pipe(
+      ofType(setActiveWorkContext),
+    );
+    _onWorkContextChange$.subscribe(() => {
       this.close();
     });
   }

src/app/core/theme/global-theme.service.ts

@@ -16,6 +16,7 @@ import { combineLatest, fromEvent, Observable, of } from 'rxjs';
 import { IS_FIREFOX } from '../../util/is-firefox';
 import { ImexMetaService } from '../../imex/imex-meta/imex-meta.service';
 import { IS_MOUSE_PRIMARY, IS_TOUCH_PRIMARY } from '../../util/is-mouse-primary';
+import { ChartConfiguration } from 'chart.js';
 
 @Injectable({ providedIn: 'root' })
 export class GlobalThemeService {
@@ -60,7 +61,7 @@ export class GlobalThemeService {
   ) {}
 
   init(): void {
-    // This is here to make web page reloads on non work context pages at least usable
+    // This is here to make web page reloads on non-work-context pages at least usable
     this._setBackgroundGradient(true);
     this._initIcons();
     this._initHandlersForInitialBodyClasses();
@@ -193,11 +194,11 @@ export class GlobalThemeService {
   }
 
   private _setChartTheme(isDarkTheme: boolean): void {
-    const overrides = isDarkTheme
+    const overrides: ChartConfiguration['options'] = isDarkTheme
       ? {
-          legend: {
-            labels: { fontColor: 'white' },
-          },
+          // legend: {
+          //   labels: { fontColor: 'white' },
+          // },
           scales: {
             xAxes: [
               {
@@ -213,7 +214,7 @@ export class GlobalThemeService {
             ],
           },
         }
-      : {};
+      : ({} as any);
     this._chartThemeService.setColorschemesOptions(overrides);
   }
 }

src/app/features/config/global-config.service.ts

@@ -31,11 +31,7 @@ import { distinctUntilChangedObject } from '../../util/distinct-until-changed-ob
   providedIn: 'root',
 })
 export class GlobalConfigService {
-  cfg$: Observable<GlobalConfigState> = this._store.pipe(
-    select(selectConfigFeatureState),
-    distinctUntilChanged(distinctUntilChangedObject),
-    shareReplay(1),
-  );
+  cfg$: Observable<GlobalConfigState>;
 
   misc$: Observable<MiscConfig> = this._store.pipe(
     select(selectMiscConfig),
@@ -73,6 +69,11 @@ export class GlobalConfigService {
   cfg?: GlobalConfigState;
 
   constructor(private readonly _store: Store<any>) {
+    this.cfg$ = this._store.pipe(
+      select(selectConfigFeatureState),
+      distinctUntilChanged(distinctUntilChangedObject),
+      shareReplay(1),
+    );
     this.cfg$.subscribe((cfg) => (this.cfg = cfg));
   }
 

src/app/features/config/icon-input/icon-input.component.ts

@@ -21,7 +21,7 @@ export class IconInputComponent extends FieldType<FormlyFieldConfig> implements
     return this.to.type || 'text';
   }
 
-  override ngOnInit(): void {
+  ngOnInit(): void {
     this.filteredIcons$ = this.formControl.valueChanges.pipe(
       startWith(''),
       filter((searchTerm) => !!searchTerm),

src/app/features/issue/providers/jira/jira-view-components/jira-cfg/jira-cfg.component.html

@@ -110,7 +110,6 @@
       <div>
         <button
           (click)="loadCustomFields()"
-          [promiseBtn]="customFieldsPromise"
           mat-raised-button
           type="button"
         >

src/app/features/metric/metric.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ChartOptions, ChartType } from 'chart.js';
 import { MetricService } from './metric.service';
-import { Color } from 'ng2-charts';
+// import { Color } from 'ng2-charts';
 import { Observable } from 'rxjs';
 import { LineChartData } from './metric.model';
 import { fadeAnimation } from '../../ui/animations/fade.ani';
@@ -30,9 +30,9 @@ export class MetricComponent {
 
   pieChartOptions: ChartOptions = {
     responsive: true,
-    legend: {
-      position: 'top',
-    },
+    // legend: {
+    //   position: 'top',
+    // },
   };
   pieChartType: ChartType = 'pie';
   pieChartPlugins: any[] = [];
@@ -40,7 +40,7 @@ export class MetricComponent {
   lineChartOptions: ChartOptions = {
     responsive: true,
   };
-  lineChartColors: Color[] = [];
+  // lineChartColors: Color[] = [];
   lineChartLegend: boolean = true;
   lineChartType: ChartType = 'line';
   lineChartPlugins: any[] = [];

src/app/features/metric/metric.model.ts

@@ -1,6 +1,6 @@
 import { EntityState } from '@ngrx/entity';
-import { Label, SingleDataSet } from 'ng2-charts';
-import { ChartDataSets } from 'chart.js';
+// import { Label, SingleDataSet } from 'ng2-charts';
+// import { ChartDataset } from 'chart.js';
 import { MODEL_VERSION_KEY } from '../../app.constants';
 
 export interface MetricCopy {
@@ -22,13 +22,17 @@ export interface MetricState extends EntityState<Metric> {
 }
 
 export interface PieChartData {
-  labels: Label[];
-  data: SingleDataSet;
+  // labels: Label[];
+  // data: SingleDataSet;
+  labels: any[];
+  data: any;
 }
 
 export interface LineChartData {
-  labels: Label[];
-  data: ChartDataSets[];
+  // labels: Label[];
+  // data: ChartDataSets[];
+  labels: any[];
+  data: any;
 }
 
 export interface SimpleMetrics {

src/app/features/metric/metric.module.ts

@@ -11,17 +11,19 @@ import { EffectsModule } from '@ngrx/effects';
 import { MetricEffects } from './store/metric.effects';
 import { ObstructionModule } from './obstruction/obstruction.module';
 import { ImprovementModule } from './improvement/improvement.module';
-import { ChartsModule } from 'ng2-charts';
+// import { ChartsModule } from 'ng2-charts';
 import { RouterModule } from '@angular/router';
+import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
 
 @NgModule({
+  providers: [provideCharts(withDefaultRegisterables())],
   imports: [
     CommonModule,
     FormsModule,
     UiModule,
     ObstructionModule,
     ImprovementModule,
-    ChartsModule,
+    // ChartsModule,
     StoreModule.forFeature(METRIC_FEATURE_NAME, metricReducer),
     EffectsModule.forFeature([MetricEffects]),
     RouterModule,

src/app/ui/ui.module.ts

@@ -50,7 +50,6 @@ import { CollapsibleComponent } from './collapsible/collapsible.component';
 import { HelpSectionComponent } from './help-section/help-section.component';
 import { NumberToMonthPipe } from './pipes/number-to-month.pipe';
 import { SimpleDownloadDirective } from './simple-download/simple-download.directive';
-import { Angular2PromiseButtonModule } from 'angular2-promise-buttons';
 import { DialogConfirmComponent } from './dialog-confirm/dialog-confirm.component';
 import { InputDurationFormlyComponent } from './duration/input-duration-formly/input-duration-formly.component';
 import { EnlargeImgDirective } from './enlarge-img/enlarge-img.directive';
@@ -231,9 +230,6 @@ const OTHER_3RD_PARTY_MODS_WITHOUT_CFG = [
     }),
     FormlyMatToggleModule,
     FormlyMaterialModule,
-    Angular2PromiseButtonModule.forRoot({
-      // handleCurrentBtnOnly: true,
-    }),
     // fix https://stackoverflow.com/questions/62755093/angular-error-generic-type-modulewithproviderst-requires-1-type-arguments
     (DragulaModule as any).forRoot(),
 
@@ -246,7 +242,6 @@ const OTHER_3RD_PARTY_MODS_WITHOUT_CFG = [
     ...COMPONENT_AND_PIPES,
     ...MAT_MODULES,
     ...OTHER_3RD_PARTY_MODS_WITHOUT_CFG,
-    Angular2PromiseButtonModule,
     DragulaModule,
     FormlyMaterialModule,
     FormlyModule,

src/app/util/adjust-to-live-formly-form.ts

@@ -30,19 +30,20 @@ export const adjustToLiveFormlyForm = (
       };
     }
 
-    if (
-      item.type === 'repeat' &&
-      item?.fieldArray?.fieldGroup &&
-      isArray(item.fieldArray.fieldGroup)
-    ) {
-      return {
-        ...item,
-        fieldArray: {
-          ...item.fieldArray,
-          fieldGroup: adjustToLiveFormlyForm(item?.fieldArray?.fieldGroup),
-        },
-      };
-    }
+    // TODO check if not working
+    // if (
+    //   item.type === 'repeat' &&
+    //   item?.fieldArray?.fieldGroup &&
+    //   isArray(item.fieldArray.fieldGroup)
+    // ) {
+    //   return {
+    //     ...item,
+    //     fieldArray: {
+    //       ...item.fieldArray,
+    //       fieldGroup: adjustToLiveFormlyForm(item?.fieldArray?.fieldGroup),
+    //     },
+    //   };
+    // }
     return item;
   });
 };

tsconfig.base.json

@@ -16,10 +16,10 @@
     "noImplicitAny": false,
     "noImplicitOverride": true,
     "strictPropertyInitialization": true,
-    "target": "ES2015",
+    "target": "ES2022",
     "resolveJsonModule": true,
     "typeRoots": ["node_modules/@types"],
     "types": ["@types/moment-duration-format"],
-    "lib": ["es2017", "dom"]
+    "lib": ["es2022", "dom"]
   }
 }