Update angular to 11

ui-ngx/package.json

@@ -2,6 +2,7 @@
   "name": "thingsboard",
   "version": "3.3.0",
   "scripts": {
+    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
     "ng": "ng",
     "start": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng serve --host 0.0.0.0 --open",
     "build": "ng build",
@@ -12,68 +13,68 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^10.1.5",
+    "@angular/animations": "^11.2.14",
-    "@angular/cdk": "^10.2.4",
+    "@angular/cdk": "^11.2.13",
-    "@angular/common": "^10.1.5",
+    "@angular/common": "^11.2.14",
-    "@angular/compiler": "^10.1.5",
+    "@angular/compiler": "^11.2.14",
-    "@angular/core": "^10.1.5",
+    "@angular/core": "^11.2.14",
-    "@angular/flex-layout": "^10.0.0-beta.32",
+    "@angular/flex-layout": "^11.0.0-beta.33",
-    "@angular/forms": "^10.1.5",
+    "@angular/forms": "^11.2.14",
-    "@angular/material": "^10.2.4",
+    "@angular/material": "^11.2.13",
-    "@angular/platform-browser": "^10.1.5",
+    "@angular/platform-browser": "^11.2.14",
-    "@angular/platform-browser-dynamic": "^10.1.5",
+    "@angular/platform-browser-dynamic": "^11.2.14",
-    "@angular/router": "^10.1.5",
+    "@angular/router": "^11.2.14",
-    "@auth0/angular-jwt": "^5.0.1",
+    "@auth0/angular-jwt": "^5.0.2",
-    "@date-io/date-fns": "^2.6.1",
+    "@date-io/date-fns": "^2.10.11",
     "@flowjs/flow.js": "^2.14.1",
-    "@flowjs/ngx-flow": "^0.4.4",
+    "@flowjs/ngx-flow": "~0.4.6",
-    "@juggle/resize-observer": "^3.1.3",
+    "@juggle/resize-observer": "^3.3.1",
-    "@mat-datetimepicker/core": "^5.1.0",
+    "@mat-datetimepicker/core": "~6.0.2",
-    "@material-ui/core": "^4.11.0",
+    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.9.1",
+    "@material-ui/icons": "^4.11.2",
-    "@material-ui/pickers": "^3.2.10",
+    "@material-ui/pickers": "^3.3.10",
-    "@ngrx/effects": "^10.0.1",
+    "@ngrx/effects": "^11.1.1",
-    "@ngrx/store": "^10.0.1",
+    "@ngrx/store": "^11.1.1",
-    "@ngrx/store-devtools": "^10.0.1",
+    "@ngrx/store-devtools": "^11.1.1",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "ace-builds": "^1.4.12",
-    "angular-gridster2": "^10.1.6",
+    "angular-gridster2": "~11.2.0",
     "angular2-hotkeys": "^2.2.0",
     "canvas-gauges": "^2.1.7",
     "compass-sass-mixins": "^0.12.7",
-    "core-js": "^3.6.5",
+    "core-js": "^3.12.1",
-    "date-fns": "^2.15.0",
+    "date-fns": "^2.21.3",
     "flot": "git://github.com/thingsboard/flot.git#0.9-work",
     "flot.curvedlines": "git://github.com/MichaelZinsmaier/CurvedLines.git#master",
     "font-awesome": "^4.7.0",
     "html2canvas": "^1.0.0-rc.7",
     "jquery": "^3.5.1",
-    "jquery.terminal": "^2.18.3",
+    "jquery.terminal": "^2.24.0",
-    "js-beautify": "^1.13.0",
+    "js-beautify": "^1.13.13",
     "json-schema-defaults": "^0.4.0",
-    "jstree": "^3.3.10",
+    "jstree": "^3.3.11",
     "jstree-bootstrap-theme": "^1.0.1",
-    "jszip": "^3.5.0",
+    "jszip": "^3.6.0",
     "leaflet": "^1.7.1",
     "leaflet-editable": "^1.2.0",
     "leaflet-polylinedecorator": "^1.6.0",
-    "leaflet-providers": "^1.10.2",
+    "leaflet-providers": "^1.12.0",
-    "leaflet.gridlayer.googlemutant": "0.10.0",
+    "leaflet.gridlayer.googlemutant": "0.10.2",
-    "leaflet.markercluster": "^1.4.1",
+    "leaflet.markercluster": "^1.5.0",
     "material-design-icons": "^3.0.1",
     "messageformat": "^2.3.0",
     "moment": "^2.29.1",
-    "moment-timezone": "^0.5.31",
+    "moment-timezone": "^0.5.33",
     "mousetrap": "1.6.3",
-    "ngx-clipboard": "^13.0.1",
+    "ngx-clipboard": "^14.0.1",
-    "ngx-color-picker": "^10.1.0",
+    "ngx-color-picker": "^11.0.0",
     "ngx-daterangepicker-material": "^4.0.1",
     "ngx-drag-drop": "^2.0.0",
     "ngx-flowchart": "git://github.com/thingsboard/ngx-flowchart.git#master",
     "ngx-hm-carousel": "^2.0.0-rc.1",
-    "ngx-sharebuttons": "^8.0.1",
+    "ngx-sharebuttons": "^8.0.5",
-    "ngx-translate-messageformat-compiler": "^4.8.0",
+    "ngx-translate-messageformat-compiler": "^4.9.0",
     "objectpath": "^2.0.0",
     "prettier": "^2.1.2",
     "prop-types": "^15.7.2",
@@ -84,58 +85,58 @@
     "react-dom": "^16.13.1",
     "react-dropzone": "^11.2.0",
     "reactcss": "^1.2.3",
-    "rxjs": "^6.6.3",
+    "rxjs": "~6.6.7",
-    "schema-inspector": "^1.7.0",
+    "schema-inspector": "^2.0.1",
-    "screenfull": "^5.0.2",
+    "screenfull": "^5.1.0",
-    "split.js": "^1.6.2",
+    "split.js": "^1.6.4",
     "systemjs": "0.21.5",
     "tinycolor2": "^1.4.2",
     "tooltipster": "^4.2.8",
-    "tslib": "^2.0.2",
+    "tslib": "^2.2.0",
     "tv4": "^1.3.0",
     "typeface-roboto": "^1.1.13",
-    "zone.js": "~0.10.3"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^10.0.1",
+    "@angular-builders/custom-webpack": "~11.1.1",
-    "@angular-devkit/build-angular": "^0.1001.5",
+    "@angular-devkit/build-angular": "^0.1102.13",
-    "@angular/cli": "^10.1.5",
+    "@angular/cli": "^11.2.13",
-    "@angular/compiler-cli": "^10.1.5",
+    "@angular/compiler-cli": "^11.2.14",
-    "@angular/language-service": "^10.1.5",
+    "@angular/language-service": "^11.2.14",
-    "@ngtools/webpack": "10.1.5",
+    "@ngtools/webpack": "~11.2.13",
     "@types/canvas-gauges": "^2.1.2",
     "@types/flot": "^0.0.31",
-    "@types/jasmine": "^3.5.12",
+    "@types/jasmine": "~3.7.4",
-    "@types/jasminewd2": "^2.0.8",
+    "@types/jasminewd2": "^2.0.9",
     "@types/jquery": "^3.5.2",
-    "@types/js-beautify": "^1.11.0",
+    "@types/js-beautify": "^1.13.1",
     "@types/jstree": "^3.3.40",
-    "@types/leaflet": "^1.5.17",
+    "@types/leaflet": "1.5.17",
     "@types/leaflet-polylinedecorator": "^1.6.0",
-    "@types/leaflet.markercluster": "^1.4.3",
+    "@types/leaflet.markercluster": "^1.4.4",
-    "@types/lodash": "^4.14.161",
+    "@types/lodash": "^4.14.170",
     "@types/moment-timezone": "^0.5.30",
     "@types/mousetrap": "1.6.3",
-    "@types/raphael": "^2.3.0",
+    "@types/raphael": "^2.3.1",
     "@types/react": "^16.9.51",
     "@types/react-dom": "^16.9.8",
     "@types/tinycolor2": "^1.4.2",
     "@types/tooltipster": "^0.0.30",
-    "codelyzer": "^6.0.1",
+    "codelyzer": "^6.0.2",
-    "compression-webpack-plugin": "^6.0.2",
+    "compression-webpack-plugin": "^6.1.1",
     "directory-tree": "^2.2.4",
-    "jasmine-core": "~3.6.0",
+    "jasmine-core": "~3.7.1",
-    "jasmine-spec-reporter": "~5.0.2",
+    "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~5.1.1",
+    "karma": "~6.3.2",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~4.0.1",
+    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.4",
+    "karma-jasmine-html-reporter": "^1.5.0",
     "ngrx-store-freeze": "^0.2.4",
     "protractor": "~7.0.0",
     "ts-node": "^9.0.0",
     "tslint": "~6.1.3",
     "typescript": "~4.0.3",
-    "webpack": "^4.44.2"
+    "webpack": "^4.46.0"
   }
 }

ui-ngx/src/.browserslistrc

@@ -8,4 +8,4 @@
 last 2 versions
 Firefox ESR
 not dead
-IE 10-11
+IE 11

ui-ngx/src/app/app-routing.module.ts

@@ -30,7 +30,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

ui-ngx/src/app/core/services/dynamic-component-factory.service.ts

@@ -28,6 +28,7 @@ import {
 import { Observable, ReplaySubject } from 'rxjs';
 import { CommonModule } from '@angular/common';
 
+@Injectable()
 @NgModule()
 export abstract class DynamicComponentModule implements OnDestroy {
 
@@ -41,11 +42,9 @@ interface DynamicComponentModuleData {
   moduleType: Type<DynamicComponentModule>;
 }
 
-@Injectable(
+@Injectable({
-  {
     providedIn: 'root'
-  }
+})
-)
 export class DynamicComponentFactoryService {
 
   private dynamicComponentModulesMap = new Map<ComponentFactory<any>, DynamicComponentModuleData>();

ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.ts

@@ -74,9 +74,9 @@ export class DateRangeNavigatorWidgetComponent extends PageComponent implements
   private firstUpdate = true;
   private dashboardTimewindowChangedSubscription: Subscription;
 
-  originalOrder = (a: KeyValue<number,DateIntervalEntry>, b: KeyValue<number,DateIntervalEntry>): number => {
+  originalOrder = (a: KeyValue<string, DateIntervalEntry>, b: KeyValue<string, DateIntervalEntry>): number => {
     return 0;
-  };
+  }
 
   constructor(private utils: UtilsService,
               private overlay: Overlay,

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -412,6 +412,7 @@
         "import": "Import assets",
         "asset-file": "Asset file",
         "label": "Label",
+        "search": "Search assets",
         "assign-asset-to-edge": "Assign Asset(s) To Edge",
         "unassign-asset-from-edge": "Unassign asset",
         "unassign-asset-from-edge-title": "Are you sure you want to unassign the asset '{{assetName}}'?",