Angular 20 migration

ui-ngx/angular.json

@@ -217,5 +217,31 @@
     "schematicCollections": [
       "@angular-eslint/schematics"
     ]
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

ui-ngx/package.json

@@ -13,27 +13,27 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "19.2.18",
+    "@angular/animations": "20.3.16",
     "@angular/cdk": "19.2.19",
-    "@angular/common": "19.2.18",
-    "@angular/compiler": "19.2.18",
-    "@angular/core": "19.2.18",
-    "@angular/forms": "19.2.18",
+    "@angular/common": "20.3.16",
+    "@angular/compiler": "20.3.16",
+    "@angular/core": "20.3.16",
+    "@angular/forms": "20.3.16",
     "@angular/material": "19.2.19",
-    "@angular/platform-browser": "19.2.18",
-    "@angular/platform-browser-dynamic": "19.2.18",
-    "@angular/router": "19.2.18",
+    "@angular/platform-browser": "20.3.16",
+    "@angular/platform-browser-dynamic": "20.3.16",
+    "@angular/router": "20.3.16",
     "@auth0/angular-jwt": "^5.2.0",
     "@flowjs/flow.js": "^2.14.1",
-    "@flowjs/ngx-flow": "18.0.1",
+    "@flowjs/ngx-flow": "20.0.2",
     "@geoman-io/leaflet-geoman-free": "2.18.3",
-    "@iplab/ngx-color-picker": "^18.0.1",
+    "@iplab/ngx-color-picker": "^20.0.0",
     "@mat-datetimepicker/core": "~15.0.2",
     "@mdi/svg": "^7.4.47",
     "@messageformat/core": "^3.4.0",
-    "@ngrx/effects": "^18.1.1",
-    "@ngrx/store": "^18.1.1",
-    "@ngrx/store-devtools": "^18.1.1",
+    "@ngrx/effects": "^20.1.0",
+    "@ngrx/store": "^20.1.0",
+    "@ngrx/store-devtools": "^20.1.0",
     "@ngx-translate/core": "^15.0.0",
     "@svgdotjs/svg.filter.js": "^3.0.8",
     "@svgdotjs/svg.js": "^3.2.4",
@@ -41,7 +41,7 @@
     "@tinymce/tinymce-angular": "^8.0.1",
     "ace-builds": "1.36.5",
     "ace-diff": "^3.0.3",
-    "angular-gridster2": "~18.0.1",
+    "angular-gridster2": "~20.2.4",
     "angular2-hotkeys": "^16.0.1",
     "canvas-gauges": "^2.1.7",
     "core-js": "^3.39.0",
@@ -70,10 +70,10 @@
     "moment-timezone": "^0.5.45",
     "ngx-clipboard": "^16.0.0",
     "ngx-daterangepicker-material": "^6.0.4",
-    "ngx-drag-drop": "^18.0.2",
+    "ngx-drag-drop": "^20.0.1",
     "ngx-flowchart": "https://github.com/thingsboard/ngx-flowchart.git#release/3.0.0",
-    "ngx-hm-carousel": "^18.0.0",
-    "ngx-markdown": "^19.1.1",
+    "ngx-hm-carousel": "^19.0.0",
+    "ngx-markdown": "^20.1.0",
     "ngx-sharebuttons": "^15.0.6",
     "ngx-translate-messageformat-compiler": "^7.0.0",
     "objectpath": "^2.0.0",
@@ -93,14 +93,14 @@
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-builders/custom-esbuild": "18.0.0",
-    "@angular-devkit/build-angular": "19.2.19",
-    "@angular-devkit/core": "19.2.19",
-    "@angular-devkit/schematics": "19.2.19",
-    "@angular/build": "19.2.19",
-    "@angular/cli": "19.2.19",
-    "@angular/compiler-cli": "19.2.18",
-    "@angular/language-service": "19.2.18",
+    "@angular-builders/custom-esbuild": "20.0.0",
+    "@angular-devkit/build-angular": "20.3.15",
+    "@angular-devkit/core": "20.3.15",
+    "@angular-devkit/schematics": "20.3.15",
+    "@angular/build": "20.3.15",
+    "@angular/cli": "20.3.15",
+    "@angular/compiler-cli": "20.3.16",
+    "@angular/language-service": "20.3.16",
     "@types/ace-diff": "^2.1.4",
     "@types/canvas-gauges": "^2.1.8",
     "@types/flot": "^0.0.36",
@@ -132,8 +132,8 @@
     "postinstall-prepare": "^2.0.0",
     "tailwindcss": "^3.4.15",
     "ts-node": "^10.9.2",
-    "typescript": "~5.5.4",
-    "typescript-eslint": "^8.18.1"
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.54.0"
   },
   "resolutions": {
     "ace-builds": "1.36.5",

ui-ngx/src/app/core/services/resources.service.ts

@@ -24,9 +24,10 @@ import {
   ɵCssSelectorList,
   ɵNG_COMP_DEF,
   ɵNG_MOD_DEF,
-  ɵNgModuleDef
+  ɵNgModuleDef,
+  DOCUMENT
 } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
+
 import { forkJoin, from, Observable, ReplaySubject, throwError } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { IModulesMap } from '@modules/common/modules-map.models';

ui-ngx/src/app/core/services/utils.service.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Inject, Injectable, NgZone, Renderer2 } from '@angular/core';
+import { Inject, Injectable, NgZone, Renderer2, DOCUMENT } from '@angular/core';
 import { WINDOW } from '@core/services/window.service';
 import { ExceptionData, parseException } from '@app/shared/models/error.models';
 import {
@@ -45,7 +45,7 @@ import { publishReplay, refCount } from 'rxjs/operators';
 import { WidgetContext } from '@app/modules/home/models/widget-component.models';
 import { AttributeData, LatestTelemetry, TelemetryType } from '@shared/models/telemetry/telemetry.models';
 import { EntityId } from '@shared/models/id/entity-id';
-import { DatePipe, DOCUMENT } from '@angular/common';
+import { DatePipe } from '@angular/common';
 import { entityTypeTranslations } from '@shared/models/entity-type.models';
 import cssjs from '@core/css/css';
 import { isNotEmptyTbFunction } from '@shared/models/js-function.models';

ui-ngx/src/app/core/settings/settings.effects.ts

@@ -15,7 +15,7 @@
 ///
 
 import { ActivationEnd, Router } from '@angular/router';
-import { Inject, Injectable } from '@angular/core';
+import { Inject, Injectable, DOCUMENT } from '@angular/core';
 import { select, Store } from '@ngrx/store';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { TranslateService } from '@ngx-translate/core';
@@ -31,7 +31,7 @@ import { updateUserLang } from '@app/core/settings/settings.utils';
 import { UtilsService } from '@core/services/utils.service';
 import { getCurrentAuthUser } from '@core/auth/auth.selectors';
 import { ActionAuthUpdateLastPublicDashboardId } from '../auth/auth.actions';
-import { DOCUMENT } from '@angular/common';
+
 
 export const SETTINGS_KEY = 'SETTINGS';
 

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@@ -33,7 +33,8 @@ import {
   StaticProvider,
   ViewChild,
   ViewContainerRef,
-  ViewEncapsulation
+  ViewEncapsulation,
+  DOCUMENT
 } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
@@ -143,7 +144,7 @@ import {
 } from '@home/components/dashboard-page/dashboard-image-dialog.component';
 import { SafeUrl } from '@angular/platform-browser';
 import cssjs from '@core/css/css';
-import { DOCUMENT } from '@angular/common';
+
 import { IAliasController } from '@core/api/widget-api.models';
 import { MatButton } from '@angular/material/button';
 import { VersionControlComponent } from '@home/components/vc/version-control.component';

ui-ngx/src/app/shared/components/dashboard-select.component.ts

@@ -24,7 +24,8 @@ import {
   OnInit,
   StaticProvider,
   ViewChild,
-  ViewContainerRef
+  ViewContainerRef,
+  DOCUMENT
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, of } from 'rxjs';
@@ -41,7 +42,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { TooltipPosition } from '@angular/material/tooltip';
 import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { BreakpointObserver } from '@angular/cdk/layout';
-import { DOCUMENT } from '@angular/common';
+
 import { WINDOW } from '@core/services/window.service';
 import { ComponentPortal } from '@angular/cdk/portal';
 import {

ui-ngx/src/app/shared/components/dialog/dynamic/dynamic-overlay.ts

@@ -19,9 +19,9 @@ import {
   ScrollStrategyOptions,
   OverlayKeyboardDispatcher, OverlayOutsideClickDispatcher, OverlayPositionBuilder
 } from '@angular/cdk/overlay';
-import { ComponentFactoryResolver, Inject, Injectable, Injector, NgZone } from '@angular/core';
+import { ComponentFactoryResolver, Inject, Injectable, Injector, NgZone, DOCUMENT } from '@angular/core';
 import { DynamicOverlayContainer } from './dynamic-overlay-container';
-import { DOCUMENT, Location } from '@angular/common';
+import { Location } from '@angular/common';
 import { Directionality } from '@angular/cdk/bidi';
 
 @Injectable()

ui-ngx/src/app/shared/components/marked-options.service.ts

@@ -15,9 +15,9 @@
 ///
 
 import { MarkedOptions, MarkedRenderer } from 'ngx-markdown';
-import { Inject, Injectable } from '@angular/core';
+import { Inject, Injectable, DOCUMENT } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { DOCUMENT } from '@angular/common';
+
 import { WINDOW } from '@core/services/window.service';
 import { Tokens, marked, TokenizerObject } from 'marked';
 import { Clipboard } from '@angular/cdk/clipboard';

ui-ngx/src/app/shared/import-export/import-export.service.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Inject, Injectable } from '@angular/core';
+import { Inject, Injectable, DOCUMENT } from '@angular/core';
 import { DashboardService } from '@core/http/dashboard.service';
 import { TranslateService } from '@ngx-translate/core';
 import { select, Store } from '@ngrx/store';
@@ -22,7 +22,7 @@ import { AppState } from '@core/core.state';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
 import { BreakpointId, Dashboard, DashboardLayoutId } from '@shared/models/dashboard.models';
 import { deepClone, guid, isDefined, isNotEmptyStr, isObject, isString, isUndefined } from '@core/utils';
-import { DOCUMENT } from '@angular/common';
+
 import {
   AliasesInfo,
   AliasFilterType,

ui-ngx/tsconfig.json

@@ -9,7 +9,7 @@
     "esModuleInterop": true,
     "declaration": false,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
     "module": "es2020",