Angular 18 migration

ui-ngx/angular.json

@@ -236,23 +236,6 @@
             "buildTarget": "thingsboard:build"
           }
         },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
-            "karmaConfig": "src/karma.conf.js",
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": [],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ]
-          }
-        },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {

ui-ngx/package.json

@@ -25,33 +25,33 @@
     "@angular/platform-browser": "^18.2.6",
     "@angular/platform-browser-dynamic": "^18.2.6",
     "@angular/router": "^18.2.6",
-    "@auth0/angular-jwt": "^5.1.2",
+    "@auth0/angular-jwt": "^5.2.0",
     "@date-io/core": "1.3.7",
     "@date-io/date-fns": "1.3.7",
     "@flowjs/flow.js": "^2.14.1",
     "@flowjs/ngx-flow": "~0.8.1",
     "@geoman-io/leaflet-geoman-free": "2.14.2",
-    "@iplab/ngx-color-picker": "^17.2.2",
+    "@iplab/ngx-color-picker": "^18.0.1",
     "@mat-datetimepicker/core": "~14.0.0",
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "4.11.2",
     "@material-ui/pickers": "3.3.10",
-    "@mdi/svg": "^7.2.96",
+    "@mdi/svg": "^7.4.47",
-    "@messageformat/core": "^3.1.0",
+    "@messageformat/core": "^3.3.0",
-    "@ngrx/effects": "^17.2.0",
+    "@ngrx/effects": "^18.0.2",
-    "@ngrx/store": "^17.2.0",
+    "@ngrx/store": "^18.0.2",
-    "@ngrx/store-devtools": "^17.2.0",
+    "@ngrx/store-devtools": "^18.0.2",
-    "@ngx-translate/core": "^14.0.0",
+    "@ngx-translate/core": "^15.0.0",
     "@svgdotjs/svg.filter.js": "^3.0.8",
-    "@svgdotjs/svg.js": "^3.2.0",
+    "@svgdotjs/svg.js": "^3.2.4",
     "@svgdotjs/svg.panzoom.js": "^2.1.2",
     "@tinymce/tinymce-angular": "^7.0.0",
-    "ace-builds": "1.4.13",
+    "ace-builds": "1.36.2",
     "ace-diff": "^3.0.3",
-    "angular-gridster2": "~17.0.0",
+    "angular-gridster2": "~18.0.1",
-    "angular2-hotkeys": "^13.1.0",
+    "angular2-hotkeys": "^16.0.1",
     "canvas-gauges": "^2.1.7",
-    "core-js": "^3.29.1",
+    "core-js": "^3.38.1",
     "date-fns": "2.0.0-alpha.27",
     "dayjs": "1.11.4",
     "echarts": "https://github.com/thingsboard/echarts/archive/5.5.0-TB.tar.gz",
@@ -61,9 +61,9 @@
     "html2canvas": "^1.4.1",
     "jquery": "^3.7.1",
     "jquery.terminal": "^2.35.3",
-    "js-beautify": "1.14.7",
+    "js-beautify": "1.15.1",
     "json-schema-defaults": "^0.4.0",
-    "jstree": "^3.3.15",
+    "jstree": "^3.3.17",
     "jstree-bootstrap-theme": "^1.0.1",
     "jszip": "^3.10.1",
     "leaflet": "1.8.0",
@@ -71,22 +71,22 @@
     "leaflet-providers": "1.13.0",
     "leaflet.gridlayer.googlemutant": "0.14.1",
     "leaflet.markercluster": "1.5.3",
-    "libphonenumber-js": "^1.10.4",
+    "libphonenumber-js": "^1.11.9",
-    "marked": "^12.0.2",
+    "marked": "~12.0.2",
-    "moment": "^2.29.4",
+    "moment": "^2.30.1",
-    "moment-timezone": "^0.5.42",
+    "moment-timezone": "^0.5.45",
-    "ngx-clipboard": "^15.1.0",
+    "ngx-clipboard": "^16.0.0",
     "ngx-daterangepicker-material": "^6.0.4",
-    "ngx-drag-drop": "^17.0.0",
+    "ngx-drag-drop": "^18.0.2",
     "ngx-flowchart": "https://github.com/thingsboard/ngx-flowchart.git#release/2.0.0",
-    "ngx-hm-carousel": "^3.0.0",
+    "ngx-hm-carousel": "^18.0.0",
-    "ngx-markdown": "^17.2.1",
+    "ngx-markdown": "^18.0.0",
-    "ngx-sharebuttons": "^12.0.0",
+    "ngx-sharebuttons": "^15.0.3",
-    "ngx-translate-messageformat-compiler": "^6.2.0",
+    "ngx-translate-messageformat-compiler": "^7.0.0",
     "objectpath": "^2.0.0",
     "prettier": "^2.8.3",
     "prop-types": "^15.8.1",
-    "qrcode": "^1.5.1",
+    "qrcode": "^1.5.4",
     "raphael": "^2.3.0",
     "rc-select": "13.2.1",
     "react": "17.0.2",
@@ -94,8 +94,8 @@
     "react-dom": "17.0.2",
     "react-dropzone": "^11.4.2",
     "reactcss": "^1.2.3",
-    "rxjs": "~7.8.0",
+    "rxjs": "~7.8.1",
-    "schema-inspector": "^2.0.2",
+    "schema-inspector": "^2.1.0",
     "screenfull": "^6.0.2",
     "sorted-btree": "^1.8.1",
     "split.js": "^1.6.5",
@@ -104,13 +104,13 @@
     "tinymce": "~5.10.7",
     "tooltipster": "^4.2.8",
     "ts-transformer-keys": "^0.4.4",
-    "tslib": "^2.5.0",
+    "tslib": "^2.7.0",
     "tv4": "^1.3.0",
     "typeface-roboto": "^1.1.13",
-    "zone.js": "~0.14.0"
+    "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "~17.0.2",
+    "@angular-builders/custom-webpack": "~18.0.0",
     "@angular-devkit/build-angular": "^18.2.6",
     "@angular-devkit/core": "^18.2.6",
     "@angular-devkit/schematics": "^18.2.6",
@@ -130,52 +130,40 @@
     "@types/jasmine": "~3.10.2",
     "@types/jasminewd2": "^2.0.10",
     "@types/jquery": "^3.5.30",
-    "@types/js-beautify": "^1.13.3",
+    "@types/js-beautify": "^1.14.3",
     "@types/leaflet": "1.8.0",
     "@types/leaflet-polylinedecorator": "1.6.4",
     "@types/leaflet-providers": "1.2.4",
     "@types/leaflet.gridlayer.googlemutant": "0.4.9",
     "@types/leaflet.markercluster": "1.5.4",
-    "@types/lodash": "^4.14.192",
+    "@types/lodash": "^4.17.9",
-    "@types/marked": "^4.0.8",
     "@types/node": "~18.15.11",
     "@types/raphael": "^2.3.2",
     "@types/react": "17.0.37",
     "@types/react-dom": "17.0.11",
     "@types/systemjs": "6.13.1",
-    "@types/tinycolor2": "^1.4.3",
+    "@types/tinycolor2": "^1.4.6",
-    "@types/tooltipster": "^0.0.31",
+    "@types/tooltipster": "^0.0.35",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
-    "@typescript-eslint/parser": "^7.2.0",
+    "@typescript-eslint/parser": "^8.7.0",
     "@typescript-eslint/utils": "^8.7.0",
-    "compression-webpack-plugin": "^10.0.0",
+    "compression-webpack-plugin": "^11.1.0",
-    "directory-tree": "^3.5.1",
+    "directory-tree": "^3.5.2",
-    "eslint": "^8.57.0",
+    "eslint": "^9.11.1",
     "eslint-plugin-import": "latest",
     "eslint-plugin-jsdoc": "latest",
     "eslint-plugin-prefer-arrow": "latest",
-    "jasmine-core": "~3.10.1",
-    "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.3.9",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~4.0.1",
-    "karma-jasmine-html-reporter": "^1.7.0",
     "ngrx-store-freeze": "^0.2.4",
-    "patch-package": "^6.5.1",
+    "patch-package": "^8.0.0",
     "postinstall-prepare": "^2.0.0",
-    "protractor": "~7.0.0",
     "raw-loader": "^4.0.2",
-    "ts-node": "^10.9.1",
+    "ts-node": "^10.9.2",
     "typescript": "~5.5.4",
-    "webpack": "5.77.0"
+    "webpack": "5.95.0"
   },
   "resolutions": {
     "@types/react": "17.0.37",
-    "ace-builds": "1.4.13",
     "@date-io/core": "1.3.7",
-    "rc-virtual-list": "3.4.13",
+    "rc-virtual-list": "3.4.13"
-    "read-package-json": "6.0.0",
-    "cacache": "17.0.4"
   }
 }

ui-ngx/patches/@angular+core+18.2.6.patch

@@ -1,8 +1,8 @@
 diff --git a/node_modules/@angular/core/fesm2022/core.mjs b/node_modules/@angular/core/fesm2022/core.mjs
-index 4eaa990..50f34b2 100755
+index 0fa881f..b844dfa 100755
 --- a/node_modules/@angular/core/fesm2022/core.mjs
 +++ b/node_modules/@angular/core/fesm2022/core.mjs
-@@ -11963,13 +11963,13 @@ function findDirectiveDefMatches(tView, tNode) {
+@@ -12868,13 +12868,13 @@ function findDirectiveDefMatches(tView, tNode) {
              if (isNodeMatchingSelectorList(tNode, def.selectors, /* isProjectionMode */ false)) {
                  matches || (matches = []);
                  if (isComponentDef(def)) {

ui-ngx/patches/@mat-datetimepicker+core+14.0.0.patch

@@ -1,5 +1,5 @@
 diff --git a/node_modules/@mat-datetimepicker/core/esm2022/datetimepicker/clock.mjs b/node_modules/@mat-datetimepicker/core/esm2022/datetimepicker/clock.mjs
-index b3f4d2f..b3e7abb 100644
+index 7ecfae7..08363d3 100644
 --- a/node_modules/@mat-datetimepicker/core/esm2022/datetimepicker/clock.mjs
 +++ b/node_modules/@mat-datetimepicker/core/esm2022/datetimepicker/clock.mjs
 @@ -259,9 +259,9 @@ export class MatDatetimepickerClockComponent {
@@ -16,7 +16,7 @@ index b3f4d2f..b3e7abb 100644
          }
          this._timeChanged = true;
 diff --git a/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs b/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs
-index 92a3fea..b630091 100644
+index 00f4a52..df688e3 100644
 --- a/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs
 +++ b/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs
 @@ -946,9 +946,9 @@ class MatDatetimepickerClockComponent {

ui-ngx/patches/angular-gridster2+18.0.1.patch

@@ -1,5 +1,5 @@
 diff --git a/node_modules/angular-gridster2/fesm2022/angular-gridster2.mjs b/node_modules/angular-gridster2/fesm2022/angular-gridster2.mjs
-index 3e682eb..097ede4 100644
+index 0dcd873..e99b602 100644
 --- a/node_modules/angular-gridster2/fesm2022/angular-gridster2.mjs
 +++ b/node_modules/angular-gridster2/fesm2022/angular-gridster2.mjs
 @@ -666,8 +666,8 @@ class GridsterRenderer {

ui-ngx/src/karma.conf.js

@@ -1,47 +0,0 @@
-/*
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function(config) {
-  config.set({
-    basePath: "",
-    frameworks: ["jasmine", "@angular-devkit/build-angular"],
-    plugins: [
-      require("karma-jasmine"),
-      require("karma-chrome-launcher"),
-      require("karma-jasmine-html-reporter"),
-      require("karma-coverage-istanbul-reporter"),
-      require("@angular-devkit/build-angular/plugins/karma"),
-    ],
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require("path").join(__dirname, "../coverage/tb-license-server"),
-      reports: ["html", "lcovonly", "text-summary"],
-      fixWebpackSourcePaths: true,
-    },
-    reporters: ["progress", "kjhtml"],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ["Chrome"],
-    singleRun: false,
-    restartOnFileChange: true,
-  });
-};

ui-ngx/src/test.ts

@@ -1,32 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(), {
-    teardown: { destroyAfterEach: false }
-}
-);

ui-ngx/src/tsconfig.spec.json

@@ -1,18 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/spec",
-    "types": [
-      "jasmine",
-      "node"
-    ]
-  },
-  "files": [
-    "test.ts",
-    "polyfills.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}

ui-ngx/src/tslint.json

@@ -1,17 +0,0 @@
-{
-  "extends": "../tslint.json",
-  "rules": {
-    "directive-selector": [
-      true,
-      "attribute",
-      "tb",
-      "kebab-case"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "tb",
-      "kebab-case"
-    ]
-  }
-}