⬆️ upgrade to hslayers-ng@9

- known issue: Loader dialog not spawned

angular.json

@@ -39,12 +39,7 @@
               "./node_modules/hslayers-ng/css/hslayers-ng.css"
             ],
             "scripts": [],
-            "vendorChunk": true,
-            "extractLicenses": false,
-            "buildOptimizer": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true
+            "sourceMap": true
           },
           "configurations": {
             "development": {

package.json

@@ -27,25 +27,22 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "csvtojson": "^2.0.10",
-    "hslayers-ng": "^7.1.0",
+    "hslayers-ng": "^9.2.0",
     "hsv2rgb": "^1.1.0"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^12.1.3",
-    "@angular-devkit/build-angular": "^12.2.13",
-    "@angular-eslint/builder": "^13.0.1",
-    "@angular-eslint/eslint-plugin": "^13.0.1",
-    "@angular-eslint/eslint-plugin-template": "^13.0.1",
-    "@angular-eslint/template-parser": "^13.0.1",
-    "@angular/cli": "^12.2.13",
-    "@types/karma-jasmine": "^4.0.2",
+    "@angular-builders/custom-webpack": "^13.1.0",
+    "@angular-devkit/build-angular": "^13.3.9",
+    "@angular-eslint/builder": "^13.5.0",
+    "@angular-eslint/eslint-plugin": "^13.5.0",
+    "@angular-eslint/eslint-plugin-template": "^13.5.0",
+    "@angular-eslint/template-parser": "^13.5.0",
+    "@angular/cli": "~13.3.9",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
-    "eslint": "^8.4.1",
+    "eslint": "^8.20.0",
     "eslint-config-openlayers": "14.0.0",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-tsdoc": "^0.2.14",
     "file-loader": "^6.2.0",
+    "http-server": "^0.12.3",
     "karma-jasmine": "^4.0.1"
   }
 }

src/adjuster/adjuster-advanced-panel/adjuster-advanced-panel.component.html

@@ -1,61 +1,61 @@
 <div [hidden]="!isVisible()" class="card mainpanel">
-  <hs-panel-header name="adjuster" [title]="'ADJUSTER.adjustFactors' | translate"></hs-panel-header>
+  <hs-panel-header name="adjuster" [title]="'ADJUSTER.adjustFactors' | translateHs: {app: 'default'} "></hs-panel-header>
   <div class="card-body">
     <div class="p-2 center-block">
       <div class="d-flex flex-row">
         <div>
           <button type="button" class="btn btn-primary btn-lg" (click)="adjusterService.apply()"
-            [disabled]="adjusterService.isInProcess() || noDataSelected() || noOperationSelected() ">{{'ADJUSTER.calculate' | translate}}</button>
+            [disabled]="adjusterService.isInProcess() || noDataSelected() || noOperationSelected() ">{{'ADJUSTER.calculate' | translateHs: {app: 'default'} }}</button>
         </div>
         <div>
           <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
             [ngClass]="adjusterService.allowIndex ? 'hs-checkmark' : 'hs-uncheckmark'"
             (click)="adjusterService.allowIndex = !adjusterService.allowIndex; $event.stopPropagation()"></button>
           <label class="pl-2 text-secondary" [ngClass]="adjusterService.allowIndex ? 'fw-bold' : 'fw-normal'">
-            {{'ADJUSTER.index' | translate}}
+            {{'ADJUSTER.index' | translateHs: {app: 'default'} }}
           </label>
-          <p class="text-secondary text-justify fst-italic">{{'ADJUSTER.indexDescription' | translate}}</p>
+          <p class="text-secondary text-justify fst-italic">{{'ADJUSTER.indexDescription' | translateHs: {app: 'default'} }}</p>
         </div>
         <div>
           <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
             [ngClass]="adjusterService.allowClusters ? 'hs-checkmark' : 'hs-uncheckmark'"
             (click)="adjusterService.allowClusters = !adjusterService.allowClusters; $event.stopPropagation()"></button>
           <label class="pl-2 text-secondary" [ngClass]="adjusterService.allowClusters ? 'fw-bold' : 'fw-normal'">
-            {{'ADJUSTER.clusters' | translate}}
+            {{'ADJUSTER.clusters' | translateHs: {app: 'default'} }}
           </label>
-          <p class="text-secondary text-justify fst-italic">{{'ADJUSTER.clustersDescription' | translate}}</p>
+          <p class="text-secondary text-justify fst-italic">{{'ADJUSTER.clustersDescription' | translateHs: {app: 'default'} }}</p>
         </div>
       </div>
-      <div class="text-warning pt-2" [hidden]="!noDataSelected() || errorMsg">{{'ADJUSTER.noDataSelectedMsg' | translate}}</div>
-      <div class="text-danger pt-2" [hidden]="!errorMsg">{{'ADJUSTER.serverError' | translate}}: {{errorMsg}}</div>
+      <div class="text-warning pt-2" [hidden]="!noDataSelected() || errorMsg">{{'ADJUSTER.noDataSelectedMsg' | translateHs: {app: 'default'} }}</div>
+      <div class="text-danger pt-2" [hidden]="!errorMsg">{{'ADJUSTER.serverError' | translateHs: {app: 'default'} }}: {{errorMsg}}</div>
     </div>
     <div class="p-2 center-block" [hidden]="!adjusterService.allowClusters">
-      <div class="pt-2 text-secondary">{{'ADJUSTER.numberOfClusters' | translate}}: {{adjusterService.numberOfClusters}}</div>
+      <div class="pt-2 text-secondary">{{'ADJUSTER.numberOfClusters' | translateHs: {app: 'default'} }}: {{adjusterService.numberOfClusters}}</div>
       <input type="range" class="form-range" [(ngModel)]="adjusterService.numberOfClusters" min="5" max="15" step="1">
     </div>
     <div class="p-2 center-block">
-      {{'ADJUSTER.myRoleIs' | translate}}:&emsp;
+      {{'ADJUSTER.myRoleIs' | translateHs: {app: 'default'} }}:&emsp;
       <select class="form-select" [(ngModel)]="adjusterPresetsService.activeRole" (ngModelChange)="adjusterPresetsService.pickProblem($event)">
         <option *ngFor="let role of adjusterPresetsService.roles" [ngValue]="role">{{getLabelInCurrentLang(role.labels)}}</option>
       </select>
-      {{'ADJUSTER.myProblemIs' | translate}}:&emsp;
+      {{'ADJUSTER.myProblemIs' | translateHs: {app: 'default'} }}:&emsp;
       <select class="form-select" [(ngModel)]="adjusterPresetsService.activeProblem" (ngModelChange)="adjusterPresetsService.applyProblem($event)">
         <option *ngFor="let problem of adjusterPresetsService.getActiveRoleProblems()" [ngValue]="problem">{{getLabelInCurrentLang(problem.labels)}}</option>
       </select>
     </div>
     <div class="pt-3 center-block">
       <button type="button" class="btn btn-primary btn-sm" [disabled]="adjusterService.isInProcess()"
-        (click)="hsLayoutService.setMainPanel('adjuster-simple');$event.preventDefault();">
+        (click)="hsLayoutService.setMainPanel('adjuster-simple', 'default');$event.preventDefault();">
         <span class="glyphicon cursor-pointer" class="icon-chevron-left"></span>
-        {{'ADJUSTER.simple' | translate}}
+        {{'ADJUSTER.simple' | translateHs: {app: 'default'} }}
       </button>
     </div>
     <!--button class="btn btn-light btn-sm" aria-expanded="false" aria-controls="advancedOptions" (click)="showAdvancedOptions = !showAdvancedOptions">
       <span class="glyphicon cursor-pointer" [ngClass]="showAdvancedOptions ? 'icon-chevron-down' : 'icon-chevron-right'"></span>
-      {{'ADJUSTER.moreOpts' | translate}}
+      {{'ADJUSTER.moreOpts' | translateHs: {app: 'default'} }}
     </button-->
     <div class="p-2 center-block">
-      {{'ADJUSTER.classifyBySchema' | translate}}:&emsp;
+      {{'ADJUSTER.classifyBySchema' | translateHs: {app: 'default'} }}:&emsp;
       <select class="form-select" [(ngModel)]="adjusterPresetsService.activeSchema" (ngModelChange)="adjusterPresetsService.changeSchema($event)">
         <option *ngFor="let schema of adjusterPresetsService.schemas" [ngValue]="schema">{{getLabelInCurrentLang(schema.labels)}}</option>
       </select>
@@ -82,8 +82,8 @@
     </form-->
     <hr>
     <div class="pt-3 center-block" [hidden]="adjusterService.isInProcess()">
-      {{'ADJUSTER.layerManagerLink1' | translate}}<br>
-      {{'ADJUSTER.layerManagerLink2' | translate}} <a href="" (click)="hsLayoutService.setMainPanel('layermanager');$event.preventDefault();">{{'ADJUSTER.layerManagerLinkLMName' | translate}}</a>
+      {{'ADJUSTER.layerManagerLink1' | translateHs: {app: 'default'} }}<br>
+      {{'ADJUSTER.layerManagerLink2' | translateHs: {app: 'default'} }} <a href="" (click)="hsLayoutService.setMainPanel('layermanager', 'default');$event.preventDefault();">{{'ADJUSTER.layerManagerLinkLMName' | translateHs: {app: 'default'} }}</a>
     </div>
   </div>
 </div>

src/adjuster/adjuster-advanced-panel/adjuster-advanced-panel.component.ts

@@ -1,7 +1,6 @@
 import {Component, ViewRef} from '@angular/core';
 
-import {HsLayoutService} from 'hslayers-ng';
-import {HsPanelComponent} from 'hslayers-ng';
+import {HsLayoutService, HsPanelBaseComponent} from 'hslayers-ng';
 
 import {AdjusterPresetsService} from '../adjuster-presets.service';
 import {AdjusterService} from '../adjuster.service';
@@ -11,7 +10,7 @@ import {AdjusterService} from '../adjuster.service';
   templateUrl: './adjuster-advanced-panel.component.html',
   styleUrls: ['./adjuster-advanced-panel.component.scss'],
 })
-export class AdjusterAdvancedPanelComponent implements HsPanelComponent {
+export class AdjusterAdvancedPanelComponent extends HsPanelBaseComponent {
   name = 'adjuster-advanced';
   data: any;
   errorMsg: string;
@@ -24,6 +23,7 @@ export class AdjusterAdvancedPanelComponent implements HsPanelComponent {
     public adjusterPresetsService: AdjusterPresetsService,
     public hsLayoutService: HsLayoutService
   ) {
+    super(hsLayoutService);
     //this.descriptionVisible = false;
     //this.method = this.adjusterService.method;
     /*this.adjusterEventService.loaded.subscribe(({success, err}) => {

src/adjuster/adjuster-loader/adjuster-loader.component.html

@@ -1,10 +1,10 @@
 <div class="loader-splash" *ngIf="adjusterService.isInProcess()">
   <div class="center-block">
-    <h1 [hidden]="!adjusterService.isLoading()">{{'ADJUSTER.loadingData' | translate}}</h1>
-    <h1 [hidden]="!adjusterService.isCalculatingRAI()">{{'ADJUSTER.calcAttractivity' | translate}}</h1>
-    <h1 [hidden]="!adjusterService.isClustering()">{{'ADJUSTER.calcClusters' | translate}}</h1>
+    <h1 [hidden]="!adjusterService.isLoading()">{{'ADJUSTER.loadingData' | translateHs: {app: 'default'} }}</h1>
+    <h1 [hidden]="!adjusterService.isCalculatingRAI()">{{'ADJUSTER.calcAttractivity' | translateHs: {app: 'default'} }}</h1>
+    <h1 [hidden]="!adjusterService.isClustering()">{{'ADJUSTER.calcClusters' | translateHs: {app: 'default'} }}</h1>
     <div class="spinner-border spinner" role="status">
-      <span class="visually-hidden">{{'ADJUSTER.loading' | translate}}...</span>
+      <span class="visually-hidden">{{'ADJUSTER.loading' | translateHs: {app: 'default'} }}...</span>
     </div>
   </div>
 </div>

src/adjuster/adjuster-loader/adjuster-loader.component.ts

@@ -21,12 +21,14 @@ export class AdjusterLoaderComponent
     public adjusterService: AdjusterService,
     public adjusterEventService: AdjusterEventService
   ) {
+    console.log('dialog constucted');
     /*this.adjusterEventService.loaded.subscribe(() => {
       this.hsDialogContainerService.destroy(this);
     });*/
   }
 
   ngAfterViewInit(): void {
+    console.log('dialog afterViewInit');
     // The next is necessary, otherwise the forkJoin() would hang up immediately
     this.adjusterEventService.loaderReady.next();
     this.adjusterEventService.loaderReady.complete();

src/adjuster/adjuster-presets.service.ts

@@ -147,7 +147,7 @@ export class AdjusterPresetsService {
   getLabelInCurrentLang(labels: Label[]) {
     return this.getLabelInLang(
       labels,
-      this.hsLanguageService.getCurrentLanguageCode()
+      this.hsLanguageService.getCurrentLanguageCode('default')
     );
   }
 

src/adjuster/adjuster-simple-panel/adjuster-simple-panel.component.html

@@ -1,44 +1,44 @@
 <div [hidden]="!isVisible()" class="card mainpanel">
-  <hs-panel-header name="adjuster" [title]="'ADJUSTER.adjustFactorsSimple' | translate"></hs-panel-header>
+  <hs-panel-header name="adjuster" [title]="'ADJUSTER.adjustFactorsSimple' | translateHs: {app: 'default'} "></hs-panel-header>
   <div class="card-body">
     <div class="p-2 center-block">
       <div class="d-flex flex-row">
         <div>
           <button type="button" class="btn btn-primary btn-lg" (click)="adjusterService.apply()"
-            [disabled]="adjusterService.isInProcess() || adjUIService.noDataSelected() || adjUIService.noOperationSelected() ">{{'ADJUSTER.calculate' | translate}}</button>
+            [disabled]="adjusterService.isInProcess() || adjUIService.noDataSelected() || adjUIService.noOperationSelected() ">{{'ADJUSTER.calculate' | translateHs: {app: 'default'} }}</button>
         </div>
         <div class="exclusive">
           <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
             [ngClass]="adjusterService.allowIndex ? 'hs-checkmark' : 'hs-uncheckmark'"
             (click)="selectIndex()"></button>
           <label class="pl-2 text-secondary" [ngClass]="adjusterService.allowIndex ? 'fw-bold' : 'fw-normal'">
-            {{'ADJUSTER.index' | translate}}
+            {{'ADJUSTER.index' | translateHs: {app: 'default'} }}
           </label>
-          <p class="text-secondary text-justify fst-italic">{{'ADJUSTER.indexDescription' | translate}}</p>
+          <p class="text-secondary text-justify fst-italic">{{'ADJUSTER.indexDescription' | translateHs: {app: 'default'} }}</p>
         </div>
         <div class="exclusive">
           <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
             [ngClass]="adjusterService.allowClusters ? 'hs-checkmark' : 'hs-uncheckmark'"
             (click)="selectClusters()"></button>
           <label class="pl-2 text-secondary" [ngClass]="adjusterService.allowClusters ? 'fw-bold' : 'fw-normal'">
-            {{'ADJUSTER.clusters' | translate}}
+            {{'ADJUSTER.clusters' | translateHs: {app: 'default'} }}
           </label>
-          <p class="text-secondary text-justify fst-italic">{{'ADJUSTER.clustersDescription' | translate}}</p>
+          <p class="text-secondary text-justify fst-italic">{{'ADJUSTER.clustersDescription' | translateHs: {app: 'default'} }}</p>
         </div>
       </div>
-      <div class="text-warning pt-2" [hidden]="!adjUIService.noDataSelected() || errorMsg">{{'ADJUSTER.noDataSelectedMsg' | translate}}</div>
-      <div class="text-danger pt-2" [hidden]="!errorMsg">{{'ADJUSTER.serverError' | translate}}: {{errorMsg}}</div>
+      <div class="text-warning pt-2" [hidden]="!adjUIService.noDataSelected() || errorMsg">{{'ADJUSTER.noDataSelectedMsg' | translateHs: {app: 'default'} }}</div>
+      <div class="text-danger pt-2" [hidden]="!errorMsg">{{'ADJUSTER.serverError' | translateHs: {app: 'default'} }}: {{errorMsg}}</div>
     </div>
     <div class="p-2 center-block" [hidden]="!adjusterService.allowClusters">
-      <div class="pt-2 text-secondary">{{'ADJUSTER.numberOfClusters' | translate}}: {{adjusterService.numberOfClusters}}</div>
+      <div class="pt-2 text-secondary">{{'ADJUSTER.numberOfClusters' | translateHs: {app: 'default'} }}: {{adjusterService.numberOfClusters}}</div>
       <input type="range" class="form-range" [(ngModel)]="adjusterService.numberOfClusters" min="5" max="15" step="1">
     </div>
     <div class="p-2 center-block">
-      {{'ADJUSTER.myRoleIs' | translate}}:&emsp;
+      {{'ADJUSTER.myRoleIs' | translateHs: {app: 'default'} }}:&emsp;
       <select class="form-select" [(ngModel)]="adjusterPresetsService.activeRole" (ngModelChange)="adjusterPresetsService.pickProblem($event)">
         <option *ngFor="let role of adjusterPresetsService.roles" [ngValue]="role">{{adjUIService.getLabelInCurrentLang(role.labels)}}</option>
       </select>
-      {{'ADJUSTER.myProblemIs' | translate}}:&emsp;
+      {{'ADJUSTER.myProblemIs' | translateHs: {app: 'default'} }}:&emsp;
       <select class="form-select" [(ngModel)]="adjusterPresetsService.activeProblem" (ngModelChange)="adjusterPresetsService.applyProblem($event)">
         <option *ngFor="let problem of adjusterPresetsService.getActiveRoleProblems()" [ngValue]="problem">{{adjUIService.getLabelInCurrentLang(problem.labels)}}</option>
       </select>
@@ -46,15 +46,15 @@
     <hr>
     <div class="pt-3 center-block">
       <button type="button" class="btn btn-primary btn-sm" [disabled]="adjusterService.isInProcess()"
-        (click)="hsLayoutService.setMainPanel('adjuster-advanced');$event.preventDefault();">
+        (click)="hsLayoutService.setMainPanel('adjuster-advanced', 'default');$event.preventDefault();">
         <span class="glyphicon cursor-pointer" class="icon-chevron-right"></span>
-        {{'ADJUSTER.advanced' | translate}}
+        {{'ADJUSTER.advanced' | translateHs: {app: 'default'} }}
       </button>
     </div>
     <hr>
     <div class="pt-3 center-block" [hidden]="adjusterService.isInProcess()">
-      {{'ADJUSTER.layerManagerLink1' | translate}}<br>
-      {{'ADJUSTER.layerManagerLink2' | translate}} <a href="" (click)="hsLayoutService.setMainPanel('layermanager');$event.preventDefault();">{{'ADJUSTER.layerManagerLinkLMName' | translate}}</a>
+      {{'ADJUSTER.layerManagerLink1' | translateHs: {app: 'default'} }}<br>
+      {{'ADJUSTER.layerManagerLink2' | translateHs: {app: 'default'} }} <a href="" (click)="hsLayoutService.setMainPanel('layermanager', 'default');$event.preventDefault();">{{'ADJUSTER.layerManagerLinkLMName' | translateHs: {app: 'default'} }}</a>
     </div>
   </div>
 </div>

src/adjuster/adjuster-simple-panel/adjuster-simple-panel.component.ts

@@ -1,7 +1,6 @@
 import {Component, ViewRef} from '@angular/core';
 
-import {HsLayoutService} from 'hslayers-ng';
-import {HsPanelComponent} from 'hslayers-ng';
+import {HsLayoutService, HsPanelBaseComponent} from 'hslayers-ng';
 
 import {AdjusterPresetsService} from '../adjuster-presets.service';
 import {AdjusterService} from '../adjuster.service';
@@ -13,7 +12,7 @@ import {nuts3IndexLayer} from '../../app.config';
   templateUrl: './adjuster-simple-panel.component.html',
   styleUrls: ['./adjuster-simple-panel.component.scss'],
 })
-export class AdjusterSimplePanelComponent implements HsPanelComponent {
+export class AdjusterSimplePanelComponent extends HsPanelBaseComponent {
   name = 'adjuster-simple';
   data: any;
   errorMsg: string;
@@ -25,7 +24,9 @@ export class AdjusterSimplePanelComponent implements HsPanelComponent {
     public adjusterPresetsService: AdjusterPresetsService,
     public adjusterService: AdjusterService,
     public hsLayoutService: HsLayoutService
-  ) {}
+  ) {
+    super(hsLayoutService);
+  }
 
   isVisible(): boolean {
     return this.hsLayoutService.panelVisible('adjuster-simple');

src/adjuster/adjuster-ui.service.ts

@@ -18,7 +18,13 @@ export class AdjusterUIService {
     public hsDialogContainerService: HsDialogContainerService,
     public hsLayoutService: HsLayoutService
   ) {
+    console.log('creating dialog...');
     this.hsDialogContainerService.create(AdjusterLoaderComponent, {});
+    console.log(
+      '🚀 ~ file: adjuster-ui.service.ts ~ line 24 ~ hsDialogContainerService',
+      hsDialogContainerService
+    );
+    console.log('dialog creation done?');
   }
 
   hasDatasets(factor): boolean {

src/adjuster/adjuster.module.ts

@@ -4,7 +4,7 @@ import {FormsModule} from '@angular/forms';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 import {TranslateModule} from '@ngx-translate/core';
 
-import {HsPanelHelpersModule} from 'hslayers-ng';
+import {HsLanguageModule, HsPanelHelpersModule} from 'hslayers-ng';
 
 import {AdjusterAdvancedPanelComponent} from './adjuster-advanced-panel/adjuster-advanced-panel.component';
 import {AdjusterEventService} from './adjuster-event.service';
@@ -23,6 +23,7 @@ import {MetadataDialogComponent} from './metadata-dialog/metadata-dialog.compone
   imports: [
     CommonModule,
     FormsModule,
+    HsLanguageModule,
     HsPanelHelpersModule,
     NgbModule,
     TranslateModule,

src/adjuster/adjuster.service.ts

@@ -77,6 +77,7 @@ export class AdjusterService {
       /* Layers for each method + layer for index are ready */
       if (this.layersReady.size == this.methods.length + 1) {
         this.adjusterEventService.layerReady.complete();
+        console.log('all layers ready!');
       }
     });
 

src/adjuster/metadata-dialog/metadata-dialog.component.html

@@ -6,37 +6,37 @@
           <span>{{ data.title }}</span>
         </h4>
         <button type="button" (click)="close()" class="btn-close" data-dismiss="modal">
-          <span aria-hidden="true">&times;</span><span class="visually-hidden">{{ "COMMON.close" | translate }}</span>
+          <span aria-hidden="true">&times;</span><span class="visually-hidden">{{ "COMMON.close" | translateHs: {app: 'default'} }}</span>
         </button>
       </div>
       <div class="modal-body" style="max-height: 600px; overflow-y: auto">
         <div class="row">
           <div class="col-md-3">
-            <b>{{ "METADATA.coverage" | translate }}</b>
+            <b>{{ "METADATA.coverage" | translateHs: {app: 'default'} }}</b>
           </div>
           <div class="col-md-9">{{data.coverage}}</div>
         </div>
         <div class="row">
           <div class="col-md-3">
-            <b>{{ "METADATA.LoD" | translate }}</b>
+            <b>{{ "METADATA.LoD" | translateHs: {app: 'default'} }}</b>
           </div>
           <div class="col-md-9">{{data.lod}}</div>
         </div>
         <div class="row">
           <div class="col-md-3">
-            <b>{{ "METADATA.update" | translate }}</b>
+            <b>{{ "METADATA.update" | translateHs: {app: 'default'} }}</b>
           </div>
           <div class="col-md-9">{{data.update}}</div>
         </div>
         <div class="row">
           <div class="col-md-3">
-            <b>{{ "METADATA.source" | translate }}</b>
+            <b>{{ "METADATA.source" | translateHs: {app: 'default'} }}</b>
           </div>
           <div class="col-md-9">{{data.source}}</div>
         </div>
         <div class="row">
           <div class="col-md-3">
-            <b>{{ "COMMON.url" | translate }}</b>
+            <b>{{ "COMMON.url" | translateHs: {app: 'default'} }}</b>
           </div>
           <div class="col-md-9"><a [href]="data.link" target="_blank">{{data.link}}</a></div>
         </div>
@@ -44,11 +44,11 @@
       <!--div class="modal-footer">
         <div class="btn-group" role="group">
           <button class="btn btn-secondary" (click)="shareOnSocial()">
-            <i class="icon-share-alt"></i> {{'COMMON.share' | translate}}
+            <i class="icon-share-alt"></i> {{'COMMON.share' | translateHs: {app: 'default'} }}
           </button>
         </div>
         <button type="button" class="btn btn-secondary" (click)="close()"
-          data-dismiss="modal">{{'COMMON.close' | translate}}</button>
+          data-dismiss="modal">{{'COMMON.close' | translateHs: {app: 'default'} }}</button>
       </div-->
     </div>
   </div>

src/app.service.ts

@@ -64,7 +64,7 @@ export class AppService {
     public hsSidebarService: HsSidebarService,
     public hsToastService: HsToastService
   ) {
-    this.hsSidebarService.buttons.push({
+    this.hsSidebarService.addButton({
       panel: 'adjuster-simple',
       module: 'pra.adjuster',
       order: 0,
@@ -77,7 +77,7 @@ export class AppService {
       icon: 'icon-analytics-piechart',
     });
     this.hsPanelContainerService.create(AdjusterSimplePanelComponent, {});
-    this.hsSidebarService.buttons.push({
+    this.hsSidebarService.addButton({
       panel: 'adjuster-advanced',
       module: 'pra.adjuster',
       order: 0,

tsconfig.app.json

@@ -3,11 +3,6 @@
   "compilerOptions": {
     "outDir": "./out-tsc/app",
     "types": ["node"],
-    "paths": {
-      "hslayers-ng": [
-        "./node_modules/hslayers-ng/src/public-api.ts"
-      ]
-    }
   },
   "files": [
     "src/main.ts",
@@ -15,7 +10,6 @@
   ],
   "include": [
     "./**/*.d.ts",
-    "./node_modules/hslayers-ng/src/**/*.ts"
   ],
   "exclude": [
     "./node_modules/hslayers-ng/src/**/*.spec.ts",

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "compileOnSave": false,
+  "compileOnSave": true,
   "compilerOptions": {
     "allowJs": false,
     "allowSyntheticDefaultImports": true,
@@ -11,11 +11,19 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "lib": ["es2018", "dom"],
+    "module": "es2020",
     "moduleResolution": "node",
+    "paths": {
+      "@angular/*": [ "node_modules/@angular/*" ],
+      "rxjs/*": [ "node_modules/rxjs/*" ],
+      "ol/*": ["node_modules/ol/*"],
+      "hslayers-ng/*": ["node_modules/hslayers/*"],
+      "@ngx-translate/*": ["node_modules/@ngx-translate/*"]
+    },
     "resolveJsonModule": true,
     "sourceMap": true,
     "skipLibCheck": true,
-    "target": "es5",
+    "target": "es2015",
   },
   "angularCompilerOptions": {
     "enableResourceInlining": true,