UI: Add new decorator TbInject

ui-ngx/extra-webpack.config.js

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

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

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

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

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

ui-ngx/src/app/shared/decorators/tb-inject.ts

@@ -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);
+  };
+}