Upgrade angular to 10

ui-ngx/e2e/tsconfig.e2e.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "module": "commonjs",

ui-ngx/package.json

@@ -13,17 +13,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^9.1.7",
+    "@angular/animations": "^10.0.9",
     "@angular/cdk": "^9.2.4",
-    "@angular/common": "^9.1.7",
-    "@angular/compiler": "^9.1.7",
-    "@angular/core": "^9.1.7",
+    "@angular/common": "^10.0.9",
+    "@angular/compiler": "^10.0.9",
+    "@angular/core": "^10.0.9",
     "@angular/flex-layout": "^9.0.0-beta.31",
-    "@angular/forms": "^9.1.7",
+    "@angular/forms": "^10.0.9",
     "@angular/material": "^9.2.4",
-    "@angular/platform-browser": "^9.1.7",
-    "@angular/platform-browser-dynamic": "^9.1.7",
-    "@angular/router": "^9.1.7",
+    "@angular/platform-browser": "^10.0.9",
+    "@angular/platform-browser-dynamic": "^10.0.9",
+    "@angular/router": "^10.0.9",
     "@auth0/angular-jwt": "^4.0.0",
     "@date-io/date-fns": "^2.6.1",
     "@flowjs/flow.js": "^2.14.1",
@@ -88,17 +88,17 @@
     "systemjs": "0.21.5",
     "tinycolor2": "^1.4.1",
     "tooltipster": "^4.2.7",
-    "tslib": "^1.11.1",
+    "tslib": "^2.0.0",
     "tv4": "^1.3.0",
     "typeface-roboto": "^0.0.75",
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "^9.1.0",
-    "@angular-devkit/build-angular": "^0.901.6",
-    "@angular/cli": "^9.1.6",
-    "@angular/compiler-cli": "^9.1.7",
-    "@angular/language-service": "^9.1.7",
+    "@angular-devkit/build-angular": "^0.1000.5",
+    "@angular/cli": "^10.0.5",
+    "@angular/compiler-cli": "^10.0.9",
+    "@angular/language-service": "^10.0.9",
     "@types/canvas-gauges": "^2.1.2",
     "@types/flot": "^0.0.31",
     "@types/jasmine": "^3.5.10",
@@ -116,20 +116,20 @@
     "@types/react-dom": "^16.9.7",
     "@types/tinycolor2": "^1.4.2",
     "@types/tooltipster": "^0.0.29",
-    "codelyzer": "^5.2.2",
+    "codelyzer": "^6.0.0",
     "compression-webpack-plugin": "^3.1.0",
     "directory-tree": "^2.2.4",
-    "jasmine-core": "^3.5.0",
-    "jasmine-spec-reporter": "^5.0.1",
-    "karma": "^5.0.2",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-coverage-istanbul-reporter": "^2.1.1",
-    "karma-jasmine": "^3.1.1",
-    "karma-jasmine-html-reporter": "^1.5.4",
+    "jasmine-core": "~3.5.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~3.3.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
     "ngrx-store-freeze": "^0.2.4",
-    "protractor": "^5.4.4",
+    "protractor": "~7.0.0",
     "ts-node": "^8.9.0",
-    "tslint": "^6.1.1",
-    "typescript": "~3.7.5"
+    "tslint": "~6.1.0",
+    "typescript": "~3.9.7"
   }
 }

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';
 
+@NgModule()
 export abstract class DynamicComponentModule implements OnDestroy {
 
   ngOnDestroy(): void {

ui-ngx/src/app/modules/home/components/entity/contact-based.component.ts

@@ -18,12 +18,13 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { ContactBased } from '@shared/models/contact-based.model';
-import { AfterViewInit } from '@angular/core';
+import { AfterViewInit, Directive } from '@angular/core';
 import { POSTAL_CODE_PATTERNS } from '@home/models/contact.models';
 import { HasId } from '@shared/models/base-data';
 import { EntityComponent } from './entity.component';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 
+@Directive()
 export abstract class ContactBasedComponent<T extends ContactBased<HasId>> extends EntityComponent<T> implements AfterViewInit {
 
   protected constructor(protected store: Store<AppState>,

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 } from '@angular/core';
+import { Inject, Injector, OnDestroy, OnInit, Directive } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { IDynamicWidgetComponent, WidgetContext } from '@home/models/widget-component.models';
@@ -42,6 +42,7 @@ import { DatePipe } from '@angular/common';
 import { TranslateService } from '@ngx-translate/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
+@Directive()
 export class DynamicWidgetComponent extends PageComponent implements IDynamicWidgetComponent, OnInit, OnDestroy {
 
   executingRpcRequest: boolean;

ui-ngx/src/app/modules/home/pages/dashboard/states/state-controller.component.ts

@@ -18,12 +18,13 @@ import { IStateControllerComponent, StateControllerState } from '@home/pages/das
 import { IDashboardController } from '../dashboard-page.models';
 import { DashboardState } from '@app/shared/models/dashboard.models';
 import { Subscription } from 'rxjs';
-import { NgZone, OnDestroy, OnInit } from '@angular/core';
+import { NgZone, OnDestroy, OnInit, Directive } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { StatesControllerService } from '@home/pages/dashboard/states/states-controller.service';
 import { EntityId } from '@app/shared/models/id/entity-id';
 import { StateObject, StateParams } from '@app/core/api/widget-api.models';
 
+@Directive()
 export abstract class StateControllerComponent implements IStateControllerComponent, OnInit, OnDestroy {
 
   stateObject: StateControllerState = [];

ui-ngx/src/app/shared/components/dialog.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { OnDestroy } from '@angular/core';
+import { Directive, OnDestroy } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -23,6 +23,7 @@ import { NavigationStart, Router, RouterEvent } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 
+@Directive()
 export abstract class DialogComponent<T, R = any> extends PageComponent implements OnDestroy {
 
   routerSubscription: Subscription;

ui-ngx/src/app/shared/components/page.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { OnDestroy } from '@angular/core';
+import { Directive, OnDestroy } from '@angular/core';
 import { select, Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Observable, Subscription } from 'rxjs';
@@ -22,6 +22,7 @@ import { selectIsLoading } from '@core/interceptors/load.selectors';
 import { delay, share } from 'rxjs/operators';
 import { AbstractControl } from '@angular/forms';
 
+@Directive()
 export abstract class PageComponent implements OnDestroy {
 
   isLoading$: Observable<boolean>;

ui-ngx/src/app/shared/models/rule-node.models.ts

@@ -21,7 +21,7 @@ import { ComponentDescriptor } from '@shared/models/component-descriptor.models'
 import { FcEdge, FcNode } from 'ngx-flowchart/dist/ngx-flowchart';
 import { Observable } from 'rxjs';
 import { PageComponent } from '@shared/components/page.component';
-import { AfterViewInit, EventEmitter, Inject, OnInit } from '@angular/core';
+import { AfterViewInit, EventEmitter, Inject, OnInit, Directive } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { AbstractControl, FormGroup } from '@angular/forms';
@@ -72,6 +72,7 @@ export interface IRuleNodeConfigurationComponent {
   [key: string]: any;
 }
 
+@Directive()
 export abstract class RuleNodeConfigurationComponent extends PageComponent implements
   IRuleNodeConfigurationComponent, OnInit, AfterViewInit {
 

ui-ngx/src/tsconfig.app.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "types": ["node", "jquery", "flot", "tooltipster", "tinycolor2", "js-beautify",

ui-ngx/src/tsconfig.spec.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
     "types": [

ui-ngx/tsconfig.base.json

@@ -0,0 +1,45 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "module": "es2020",
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "importHelpers": true,
+    "target": "es5",
+    "jsx": "react",
+    "typeRoots": [
+      "node_modules/@types",
+      "src/typings/rawloader.typings.d.ts",
+      "src/typings/jquery.typings.d.ts",
+      "src/typings/jquery.flot.typings.d.ts",
+      "src/typings/jquery.jstree.typings.d.ts",
+      "src/typings/split.js.typings.d.ts",
+      "src/typings/add-marker.d.ts",
+      "src/typings/leaflet-editable.d.ts"
+    ],
+    "paths": {
+      "@app/*": ["src/app/*"],
+      "@env/*": [
+        "src/environments/*"
+      ],
+      "@core/*": ["src/app/core/*"],
+      "@modules/*": ["src/app/modules/*"],
+      "@shared/*": ["src/app/shared/*"],
+      "@home/*": ["src/app/modules/home/*"],
+      "jszip": [
+        "node_modules/jszip/dist/jszip.min.js"
+      ]
+    },
+    "lib": [
+      "es2018",
+      "es2019",
+      "dom"
+    ]
+  }
+}

ui-ngx/tsconfig.json

@@ -1,45 +1,20 @@
+/*
+  This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
+  It is not intended to be used to perform a compilation.
+
+  To learn more about this file see: https://angular.io/config/solution-tsconfig.
+*/
 {
-  "compileOnSave": false,
-  "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
-    "sourceMap": true,
-    "declaration": false,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
-    "importHelpers": true,
-    "target": "es5",
-    "jsx": "react",
-    "typeRoots": [
-      "node_modules/@types",
-      "src/typings/rawloader.typings.d.ts",
-      "src/typings/jquery.typings.d.ts",
-      "src/typings/jquery.flot.typings.d.ts",
-      "src/typings/jquery.jstree.typings.d.ts",
-      "src/typings/split.js.typings.d.ts",
-      "src/typings/add-marker.d.ts",
-      "src/typings/leaflet-editable.d.ts"
-    ],
-    "paths": {
-      "@app/*": ["src/app/*"],
-      "@env/*": [
-        "src/environments/*"
-      ],
-      "@core/*": ["src/app/core/*"],
-      "@modules/*": ["src/app/modules/*"],
-      "@shared/*": ["src/app/shared/*"],
-      "@home/*": ["src/app/modules/home/*"],
-      "jszip": [
-        "node_modules/jszip/dist/jszip.min.js"
-      ]
+  "files": [],
+  "references": [
+    {
+      "path": "./src/tsconfig.app.json"
     },
-    "lib": [
-      "es2018",
-      "es2019",
-      "dom"
-    ]
-  }
-}
+    {
+      "path": "./src/tsconfig.spec.json"
+    },
+    {
+      "path": "./e2e/tsconfig.e2e.json"
+    }
+  ]
+}

ui-ngx/tslint.json

@@ -4,16 +4,31 @@
     "codelyzer"
   ],
   "rules": {
+    "align": {
+      "options": [
+        "parameters",
+        "statements"
+      ]
+    },
     "array-type": false,
     "arrow-parens": false,
+    "arrow-return-shorthand": true,
+    "curly": true,
     "deprecation": {
       "severity": "warn"
     },
+    "eofline": true,
     "import-blacklist": [
       true,
       "rxjs/Rx",
       "^.*/public-api$"
     ],
+    "import-spacing": true,
+    "indent": {
+      "options": [
+        "spaces"
+      ]
+    },
     "interface-name": false,
     "max-classes-per-file": false,
     "max-line-length": [
@@ -49,7 +64,6 @@
     "no-non-null-assertion": true,
     "no-redundant-jsdoc": true,
     "no-switch-case-fall-through": true,
-    "no-use-before-declare": true,
     "no-var-requires": false,
     "object-literal-key-quotes": [
       true,
@@ -61,8 +75,40 @@
       true,
       "single"
     ],
+    "semicolon": {
+      "options": [
+        "always"
+      ]
+    },
+    "space-before-function-paren": {
+      "options": {
+        "anonymous": "never",
+        "asyncArrow": "always",
+        "constructor": "never",
+        "method": "never",
+        "named": "never"
+      }
+    },
     "trailing-comma": false,
     "no-output-on-prefix": true,
+    "typedef-whitespace": {
+      "options": [
+        {
+          "call-signature": "nospace",
+          "index-signature": "nospace",
+          "parameter": "nospace",
+          "property-declaration": "nospace",
+          "variable-declaration": "nospace"
+        },
+        {
+          "call-signature": "onespace",
+          "index-signature": "onespace",
+          "parameter": "onespace",
+          "property-declaration": "onespace",
+          "variable-declaration": "onespace"
+        }
+      ]
+    },
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,
     "use-host-property-decorator": true,
@@ -72,5 +118,22 @@
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
     "directive-class-suffix": true
-  }
+  ,    "variable-name": {
+      "options": [
+        "ban-keywords",
+        "check-format",
+        "allow-pascal-case"
+      ]
+    },
+    "whitespace": {
+      "options": [
+        "check-branch",
+        "check-decl",
+        "check-operator",
+        "check-separator",
+        "check-type",
+        "check-typecast"
+      ]
+    }
+}
 }