dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #4637 from vvlladd28/update/angular/11

Browse Source 
UI: Update to Angular 11
This commit is contained in:
Igor Kulikov 2021-05-27 16:41:24 +03:00 committed by GitHub
commit df0d6ea0cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 2898 additions and 2707 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
rule-engine/rule-engine-components/src/main/resources/public/static/rulenode/rulenode-core-config.js
View File

File diff suppressed because one or more lines are too long

2
ui-ngx/angular.json
View File

@ -132,7 +132,6 @@
"optimization": true, "optimization": true,
"outputHashing": "all", "outputHashing": "all",
"sourceMap": false, "sourceMap": false,
"extractCss": true,
"namedChunks": false, "namedChunks": false,
"extractLicenses": true, "extractLicenses": true,
"vendorChunk": false, "vendorChunk": false,
@ -150,7 +149,6 @@
"serve": { "serve": {
"builder": "@angular-builders/custom-webpack:dev-server", "builder": "@angular-builders/custom-webpack:dev-server",
"options": { "options": {
"aot": true,
"browserTarget": "thingsboard:build", "browserTarget": "thingsboard:build",
"proxyConfig": "proxy.conf.js" "proxyConfig": "proxy.conf.js"
}, },

8
ui-ngx/extra-webpack.config.js
View File

@ -17,7 +17,7 @@ const CompressionPlugin = require("compression-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin"); const TerserPlugin = require("terser-webpack-plugin");
const webpack = require("webpack"); const webpack = require("webpack");
const dirTree = require("directory-tree"); const dirTree = require("directory-tree");
const AngularCompilerPlugin = require('@ngtools/webpack'); const ngWebpack = require('@ngtools/webpack');
var langs = []; var langs = [];
@ -56,12 +56,12 @@ module.exports = (config, options) => {
); );
if (config.mode === 'production') { if (config.mode === 'production') {
const index = config.plugins.findIndex(p => p instanceof AngularCompilerPlugin.AngularCompilerPlugin); const index = config.plugins.findIndex(p => p instanceof ngWebpack.ivy.AngularWebpackPlugin);
const angularCompilerOptions = config.plugins[index]._options; const angularCompilerOptions = config.plugins[index].pluginOptions;
angularCompilerOptions.emitClassMetadata = true; angularCompilerOptions.emitClassMetadata = true;
angularCompilerOptions.emitNgModuleScope = true; angularCompilerOptions.emitNgModuleScope = true;
config.plugins.splice(index, 1); config.plugins.splice(index, 1);
config.plugins.push(new AngularCompilerPlugin.AngularCompilerPlugin(angularCompilerOptions)); config.plugins.push(new ngWebpack.ivy.AngularWebpackPlugin(angularCompilerOptions));
const terserPluginOptions = config.optimization.minimizer[1].options; const terserPluginOptions = config.optimization.minimizer[1].options;
delete terserPluginOptions.terserOptions.compress.global_defs.ngJitMode; delete terserPluginOptions.terserOptions.compress.global_defs.ngJitMode;
terserPluginOptions.terserOptions.compress.side_effects = false; terserPluginOptions.terserOptions.compress.side_effects = false;

128
ui-ngx/package.json
View File

@ -12,68 +12,68 @@
}, },
"private": true, "private": true,
"dependencies": { "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/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": "^10.1.2",
"@ngrx/store": "^10.0.1", "@ngrx/store": "^10.1.2",
"@ngrx/store-devtools": "^10.0.1", "@ngrx/store-devtools": "^10.1.2",
"@ngx-translate/core": "^13.0.0", "@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0", "@ngx-translate/http-loader": "^6.0.0",
"ace-builds": "^1.4.12", "ace-builds": "^1.4.12",
"angular-gridster2": "^10.1.6", "angular-gridster2": "~11.2.0",
"angular2-hotkeys": "^2.2.0", "angular2-hotkeys": "^2.2.0",
"canvas-gauges": "^2.1.7", "canvas-gauges": "^2.1.7",
"compass-sass-mixins": "^0.12.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": "git://github.com/thingsboard/flot.git#0.9-work",
"flot.curvedlines": "git://github.com/MichaelZinsmaier/CurvedLines.git#master", "flot.curvedlines": "git://github.com/MichaelZinsmaier/CurvedLines.git#master",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"html2canvas": "^1.0.0-rc.7", "html2canvas": "^1.0.0-rc.7",
"jquery": "^3.5.1", "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", "json-schema-defaults": "^0.4.0",
"jstree": "^3.3.10", "jstree": "^3.3.11",
"jstree-bootstrap-theme": "^1.0.1", "jstree-bootstrap-theme": "^1.0.1",
"jszip": "^3.5.0", "jszip": "^3.6.0",
"leaflet": "^1.7.1", "leaflet": "^1.7.1",
"leaflet-editable": "^1.2.0", "leaflet-editable": "^1.2.0",
"leaflet-polylinedecorator": "^1.6.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", "material-design-icons": "^3.0.1",
"messageformat": "^2.3.0", "messageformat": "^2.3.0",
"moment": "^2.29.1", "moment": "^2.29.1",
"moment-timezone": "^0.5.31", "moment-timezone": "^0.5.33",
"mousetrap": "1.6.3", "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-daterangepicker-material": "^4.0.1",
"ngx-drag-drop": "^2.0.0", "ngx-drag-drop": "^2.0.0",
"ngx-flowchart": "git://github.com/thingsboard/ngx-flowchart.git#master", "ngx-flowchart": "git://github.com/thingsboard/ngx-flowchart.git#master",
"ngx-hm-carousel": "^2.0.0-rc.1", "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", "objectpath": "^2.0.0",
"prettier": "^2.1.2", "prettier": "^2.1.2",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
@ -84,58 +84,58 @@
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-dropzone": "^11.2.0", "react-dropzone": "^11.2.0",
"reactcss": "^1.2.3", "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", "systemjs": "0.21.5",
"tinycolor2": "^1.4.2", "tinycolor2": "^1.4.2",
"tooltipster": "^4.2.8", "tooltipster": "^4.2.8",
"tslib": "^2.0.2", "tslib": "^2.2.0",
"tv4": "^1.3.0", "tv4": "^1.3.0",
"typeface-roboto": "^1.1.13", "typeface-roboto": "^1.1.13",
"zone.js": "~0.10.3" "zone.js": "~0.11.4"
}, },
"devDependencies": { "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/canvas-gauges": "^2.1.2",
"@types/flot": "^0.0.31", "@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/jquery": "^3.5.2",
"@types/js-beautify": "^1.11.0", "@types/js-beautify": "^1.13.1",
"@types/jstree": "^3.3.40", "@types/jstree": "^3.3.40",
"@types/leaflet": "^1.5.17", "@types/leaflet": "1.5.17",
"@types/leaflet-polylinedecorator": "^1.6.0", "@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/moment-timezone": "^0.5.30",
"@types/mousetrap": "1.6.3", "@types/mousetrap": "1.6.3",
"@types/raphael": "^2.3.0", "@types/raphael": "^2.3.1",
"@types/react": "^16.9.51", "@types/react": "^16.9.51",
"@types/react-dom": "^16.9.8", "@types/react-dom": "^16.9.8",
"@types/tinycolor2": "^1.4.2", "@types/tinycolor2": "^1.4.2",
"@types/tooltipster": "^0.0.30", "@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", "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-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.3", "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", "ngrx-store-freeze": "^0.2.4",
"protractor": "~7.0.0", "protractor": "~7.0.0",
"ts-node": "^9.0.0", "ts-node": "^9.0.0",
"tslint": "~6.1.3", "tslint": "~6.1.3",
"typescript": "~4.0.3", "typescript": "~4.0.3",
"webpack": "^4.44.2" "webpack": "^4.46.0"
} }
} }

2
ui-ngx/src/.browserslistrc
View File

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

2
ui-ngx/src/app/app-routing.module.ts
View File

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

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

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

14
ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.component.ts
View File

@ -15,13 +15,14 @@
/// ///
import { MatDialogRef } from '@angular/material/dialog'; import { MatDialogRef } from '@angular/material/dialog';
import { Directive, Inject, InjectionToken } from '@angular/core'; import { Directive, InjectionToken } from '@angular/core';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state'; import { AppState } from '@core/core.state';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { PageComponent } from '@shared/components/page.component'; import { PageComponent } from '@shared/components/page.component';
import { CustomDialogContainerComponent } from './custom-dialog-container.component'; import { CustomDialogContainerComponent } from './custom-dialog-container.component';
import { FormBuilder, Validators } from '@angular/forms'; import { FormBuilder, Validators } from '@angular/forms';
import { TbInject } from '@shared/decorators/tb-inject';
export const CUSTOM_DIALOG_DATA = new InjectionToken<any>('ConfigDialogData'); export const CUSTOM_DIALOG_DATA = new InjectionToken<any>('ConfigDialogData');
@ -31,15 +32,16 @@ export interface CustomDialogData {
} }
@Directive() @Directive()
// tslint:disable-next-line:directive-class-suffix
export class CustomDialogComponent extends PageComponent { export class CustomDialogComponent extends PageComponent {
[key: string]: any; [key: string]: any;
constructor(protected store: Store<AppState>, constructor(@TbInject(Store) protected store: Store<AppState>,
protected router: Router, @TbInject(Router) protected router: Router,
public dialogRef: MatDialogRef<CustomDialogContainerComponent>, @TbInject(MatDialogRef) public dialogRef: MatDialogRef<CustomDialogContainerComponent>,
public fb: FormBuilder, @TbInject(FormBuilder) public fb: FormBuilder,
@Inject(CUSTOM_DIALOG_DATA) public data: CustomDialogData) { @TbInject(CUSTOM_DIALOG_DATA) public data: CustomDialogData) {
super(store); super(store);
// @ts-ignore // @ts-ignore
this.validators = Validators; this.validators = Validators;

16
ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts
View File

@ -15,7 +15,7 @@
/// ///
import { PageComponent } from '@shared/components/page.component'; import { PageComponent } from '@shared/components/page.component';
import { Inject, Injector, OnDestroy, OnInit, Directive } from '@angular/core'; import { Directive, Injector, OnDestroy, OnInit } from '@angular/core';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state'; import { AppState } from '@core/core.state';
import { IDynamicWidgetComponent, WidgetContext } from '@home/models/widget-component.models'; import { IDynamicWidgetComponent, WidgetContext } from '@home/models/widget-component.models';
@ -42,8 +42,10 @@ import { DatePipe } from '@angular/common';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { DomSanitizer } from '@angular/platform-browser'; import { DomSanitizer } from '@angular/platform-browser';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { TbInject } from '@shared/decorators/tb-inject';
@Directive() @Directive()
// tslint:disable-next-line:directive-class-suffix
export class DynamicWidgetComponent extends PageComponent implements IDynamicWidgetComponent, OnInit, OnDestroy { export class DynamicWidgetComponent extends PageComponent implements IDynamicWidgetComponent, OnInit, OnDestroy {
executingRpcRequest: boolean; executingRpcRequest: boolean;
@ -55,12 +57,12 @@ export class DynamicWidgetComponent extends PageComponent implements IDynamicWid
validators = Validators; validators = Validators;
constructor(@Inject(RafService) public raf: RafService, constructor(@TbInject(RafService) public raf: RafService,
@Inject(Store) protected store: Store<AppState>, @TbInject(Store) protected store: Store<AppState>,
@Inject(FormBuilder) public fb: FormBuilder, @TbInject(FormBuilder) public fb: FormBuilder,
@Inject(Injector) public readonly $injector: Injector, @TbInject(Injector) public readonly $injector: Injector,
@Inject('widgetContext') public readonly ctx: WidgetContext, @TbInject('widgetContext') public readonly ctx: WidgetContext,
@Inject('errorMessages') public readonly errorMessages: string[]) { @TbInject('errorMessages') public readonly errorMessages: string[]) {
super(store); super(store);
this.ctx.$injector = $injector; this.ctx.$injector = $injector;
this.ctx.deviceService = $injector.get(DeviceService); this.ctx.deviceService = $injector.get(DeviceService);

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

@ -74,9 +74,9 @@ export class DateRangeNavigatorWidgetComponent extends PageComponent implements
private firstUpdate = true; private firstUpdate = true;
private dashboardTimewindowChangedSubscription: Subscription; 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; return 0;
}; }
constructor(private utils: UtilsService, constructor(private utils: UtilsService,
private overlay: Overlay, private overlay: Overlay,

23
ui-ngx/src/app/shared/decorators/tb-inject.ts Normal file
View File

@ -0,0 +1,23 @@
///
/// Copyright © 2016-2021 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.
///
import { Inject, Type } from '@angular/core';
export function TbInject<T>(token: any): (target: Type<T>, key: any, paramIndex: number) => void {
return (target: Type<T>, key: any, paramIndex: number) => {
Inject(token)(target, key, paramIndex);
};
}

1
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

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

5394
ui-ngx/yarn.lock
View File

File diff suppressed because it is too large Load Diff