refactor: upgrade to Ng9

Large kick-off of upgrade to HSL 2.x

.eslintrc.json

@@ -3,11 +3,26 @@
     "browser": true,
     "es6": true
   },
-  "extends": ["openlayers", "angular"],
+  "extends": [
+    "openlayers",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "angular"
+  ],
+  "plugins": ["@typescript-eslint"],
   "globals": {
     "angular": "readonly"
   },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion":  2018
+  },
   "rules": {
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {"js": "never", "ts": "never"}
+    ],
     "angular/no-service-method": [
       "warn"
     ],
@@ -16,7 +31,8 @@
     "angular/typecheck-function": "off",
     "angular/typecheck-number": "off",
     "angular/typecheck-object": "off",
-    "angular/typecheck-string": "off"
+    "angular/typecheck-string": "off",
+    "@typescript-eslint/no-empty-function": ["error", {"allow": ["constructors"]}]
   },
   "overrides": [
     {
@@ -27,6 +43,21 @@
         "jasmine": true,
         "angular/mocks": true
       }
+    },
+    {
+      "files": [
+        "**/webpack.*.js"
+      ],
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off"
+      }
+    }
+  ],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".ts"]
+      }
     }
-  ]
+  }
 }

package.json

@@ -25,13 +25,15 @@
   "license": "MIT",
   "dependencies": {
     "csvtojson": "^2.0.10",
-    "hslayers-ng": "^1.24.2",
+    "hslayers-ng": "^2.3.0",
     "hsv2rgb": "^1.1.0",
     "http-server": "^0.12.3"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@typescript-eslint/eslint-plugin": "^3.10.0",
+    "@typescript-eslint/parser": "^3.10.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-angularjs-annotate": "^0.10.0",
     "clean-webpack-plugin": "^3.0.0",
@@ -48,12 +50,15 @@
     "html-loader": "^1.3.1",
     "html-webpack-plugin": "^4.5.0",
     "mini-css-extract-plugin": "^0.11.3",
+    "ng-annotate-loader": "^0.7.0",
     "ng-cache-loader": "0.0.26",
     "npm-run-all": "^4.1.5",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
     "postcss": "^8.1.1",
     "postcss-prefix-selector": "^1.7.1",
     "style-loader": "^1.3.0",
+    "ts-loader": "^8.0.3",
+    "typescript": "^4.0.2",
     "url-loader": "^4.1.0",
     "webpack": "^4.44.2",
     "webpack-cli": "^3.3.12",

polyfills.ts

@@ -0,0 +1,2 @@
+(window as any).__Zone_disable_requestAnimationFrame = true;
+(window as any).__Zone_disable_setTimeout = true;

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

@@ -1,4 +1,6 @@
 //Currently unused and replaced by a simple directive
+import * as angular from 'angular';
+
 export const AdjusterLoaderComponent = {
   template: require('./adjuster-loader.directive.html'),
   bindings: {},

src/adjuster/adjuster.component.js

@@ -1,40 +0,0 @@
-export const AdjusterComponent = {
-  template: require('./adjuster.directive.html'),
-  controller: function (
-    $scope,
-    //HsCore,
-    //HsConfig,
-    PraAdjusterService,
-    HsUtilsService
-  ) {
-    'ngInject';
-    //$scope.loading = false;
-    //$scope.HsUtilsService = HsUtilsService;
-    $scope.descriptionVisible = false;
-
-    angular.extend($scope, {
-      //HsCore,
-      PraAdjusterService,
-      noDataSelected,
-    });
-
-    //$scope.$emit('scope_loaded', 'adjuster');
-
-    function noDataSelected() {
-      if (PraAdjusterService.factors.length === 0) {
-        return true;
-      }
-      let datasetsEffectivelyTurnedOn = [];
-      for (const factor of PraAdjusterService.factors) {
-        if (factor.weight === 0) {
-          continue;
-        }
-        datasetsEffectivelyTurnedOn = [
-          ...datasetsEffectivelyTurnedOn,
-          ...factor.datasets.filter((ds) => ds.included),
-        ];
-      }
-      return datasetsEffectivelyTurnedOn.length === 0;
-    }
-  },
-};

src/adjuster/adjuster.component.ts

@@ -0,0 +1,40 @@
+import {Component, OnInit} from '@angular/core';
+
+import {AdjusterService} from './adjuster.service';
+import {HsUtilsService} from 'hslayers-ng/components/utils/utils.service';
+
+@Component({
+  selector: 'pra-adjuster',
+  template: require('./adjuster.directive.html'),
+})
+export class AdjusterComponent {
+  descriptionVisible: boolean;
+
+  constructor(
+    private adjusterService: AdjusterService,
+    private hsUtilsService: HsUtilsService
+  ) {
+    //$scope.loading = false;
+    //$scope.HsUtilsService = HsUtilsService;
+    this.descriptionVisible = false;
+
+    //$scope.$emit('scope_loaded', 'adjuster');
+  }
+
+  noDataSelected(): boolean {
+    if (this.adjusterService.factors.length === 0) {
+      return true;
+    }
+    let datasetsEffectivelyTurnedOn = [];
+    for (const factor of this.adjusterService.factors) {
+      if (factor.weight === 0) {
+        continue;
+      }
+      datasetsEffectivelyTurnedOn = [
+        ...datasetsEffectivelyTurnedOn,
+        ...factor.datasets.filter((ds) => ds.included),
+      ];
+    }
+    return datasetsEffectivelyTurnedOn.length === 0;
+  }
+}

src/adjuster/adjuster.directive.html

@@ -1,32 +1,32 @@
 <div class="card card-default mainpanel">
-  <hs.layout.panel-header panel-name="adjuster" panel-title="'Adjust factors'||translate"></hs.layout.panel-header>
+  <hs-panel-header panel-name="adjuster" panel-title="'Adjust factors'"></hs-panel-header>
   <div class="card-body">
     <div class="p-2 center-block">
-      <button type="button" class="btn btn-primary" ng-click="PraAdjusterService.apply()"
-        ng-disabled="PraAdjusterService.isClusteringInProcess() || noDataSelected()">Calculate clusters</button>
-      <div class="text-warning pt-2" ng-show="noDataSelected()">Select at least one dataset and set at least one factor's weight to a non-zero value.</div>
+      <button type="button" class="btn btn-primary" (click)="PraAdjusterService.apply()"
+        [disabled]="PraAdjusterService.isClusteringInProcess() || noDataSelected()">Calculate clusters</button>
+      <div class="text-warning pt-2" [hidden]="!noDataSelected()">Select at least one dataset and set at least one factor's weight to a non-zero value.</div>
     </div>
-    <div ng-repeat="factor in PraAdjusterService.factors">
+    <div *ngFor="let factor of PraAdjusterService.factors">
       <div class="d-flex flex-row">
         <div class="p-2 flex-grow-1">
           <span class="glyphicon cursor-pointer"
-            ng-class="datasetlistVisible ? 'icon-chevron-down' : 'icon-chevron-right'"
-            ng-click="datasetlistVisible = !datasetlistVisible"></span>
-          <label class="cursor-pointer" ng-click="datasetlistVisible = !datasetlistVisible">{{factor.name}}</label>
+            [ngClass]="datasetlistVisible ? 'icon-chevron-down' : 'icon-chevron-right'"
+            (click)="datasetlistVisible = !datasetlistVisible"></span>
+          <label class="cursor-pointer" (click)="datasetlistVisible = !datasetlistVisible">{{factor.name}}</label>
         </div>
         <div class="p-2">{{(factor.weight * 100).toFixed(0)}}&nbsp;%</div>
       </div>
-      <input type="range" class="custom-range" ng-model="factor.weight" min="0" max="1.0" step="0.05">
-      <div ng-init="datasetlistVisible = false" ng-show="datasetlistVisible">
-        <div ng-repeat="dataset in factor.datasets">
+      <input type="range" class="custom-range" [(ngModel)]="factor.weight" min="0" max="1.0" step="0.05">
+      <div ng-init="datasetlistVisible = false" [hidden]="!datasetlistVisible">
+        <div *ngFor="let dataset of factor.datasets">
           <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
-            ng-class="dataset.included ? 'hs-checkmark' : 'hs-uncheckmark'"
-            ng-click="dataset.included = !dataset.included;$event.stopPropagation()"></button>
+            [ngClass]="dataset.included ? 'hs-checkmark' : 'hs-uncheckmark'"
+            (click)="dataset.included = !dataset.included;$event.stopPropagation()"></button>
           <span class="glyphicon cursor-pointer text-secondary"
-            ng-class="descriptionVisible ? 'icon-chevron-down' : 'icon-chevron-right'"
-            ng-click="descriptionVisible = !descriptionVisible"></span>
-          <label class="pl-2 cursor-pointer text-secondary" ng-click="descriptionVisible = !descriptionVisible">{{dataset.name}}</label>
-          <div class="p-2 mb-2 text-justify text-info" ng-show="descriptionVisible">
+            [ngClass]="descriptionVisible ? 'icon-chevron-down' : 'icon-chevron-right'"
+            (click)="descriptionVisible = !descriptionVisible"></span>
+          <label class="pl-2 cursor-pointer text-secondary" (click)="descriptionVisible = !descriptionVisible">{{dataset.name}}</label>
+          <div class="p-2 mb-2 text-justify text-info" [hidden]="!descriptionVisible">
             {{dataset.desc}}
           </div>
         </div>

src/adjuster/adjuster.module.js

@@ -1,17 +0,0 @@
-import {AdjusterComponent} from './adjuster.component.js';
-import {AdjusterService} from './adjuster.service.js';
-
-export const AdjusterModule = angular
-  .module('pra.adjuster', ['hs.core', 'hs.map'])
-  .directive('praAdjusterSidebarBtn', function () {
-    return {
-      template: require('./adjuster-sidebar-btn.directive.html'),
-    };
-  })
-  .service('PraAdjusterService', AdjusterService)
-  .component('praAdjuster', AdjusterComponent)
-  .directive('praAdjusterLoader', () => {
-    return {
-      template: require('./adjuster-loader.directive.html'),
-    };
-  }).name;

src/adjuster/adjuster.module.ts

@@ -0,0 +1,18 @@
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+
+import {HsPanelHelpersModule} from 'hslayers-ng/components/layout/panels/panel-helpers.module';
+
+import {AdjusterComponent} from './adjuster.component';
+import {AdjusterService} from './adjuster.service';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [CommonModule, FormsModule, HsPanelHelpersModule, NgbModule],
+  exports: [AdjusterComponent],
+  declarations: [AdjusterComponent],
+  providers: [AdjusterService],
+})
+export class AdjusterModule {}

src/adjuster/adjuster.service.js → src/adjuster/adjuster.service.ts

@@ -1,16 +1,28 @@
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Subject} from 'rxjs';
+
+import {HsUtilsService} from 'hslayers-ng/components/utils/utils.service';
+
 // import attractivity from '../Attractivity.json';
-import nuts from '../nuts.js';
+import nuts from '../nuts';
 //import {factors} from './factors.js';
 
+@Injectable({providedIn: 'root'})
 export class AdjusterService {
-  constructor(HsCore, HsUtilsService, $rootScope, $http, $location) {
-    'ngInject';
-    //this.HsCore = HsCore;
-    this.HsUtilsService = HsUtilsService;
-    this.$rootScope = $rootScope;
-    this.$http = $http;
+  serviceBaseUrl: string;
+  factors;
+  clusters;
+  clustersLoaded: Subject<any> = new Subject();
+  method: string;
+  _clusteringInProcess: boolean;
+
+  constructor(
+    private hsUtilsService: HsUtilsService,
+    private httpClient: HttpClient
+  ) {
     this.serviceBaseUrl =
-      $location.host() === 'localhost'
+      window.location.hostname === 'localhost'
         ? 'https://jmacura.ml/ws/' // 'http://localhost:3000/'
         : 'https://publish.lesprojekt.cz/nodejs/';
     this.factors = [];
@@ -24,13 +36,11 @@ export class AdjusterService {
    * Sends a request to polirural-attractiveness-service
    * and applies the returned values
    */
-  apply() {
+  apply(): void {
     const f = () => {
       this._clusteringInProcess = true;
-      this.$http({
-        method: 'post',
-        url: this.serviceBaseUrl + 'clusters',
-        data: {
+      this.httpClient
+        .post(this.serviceBaseUrl + 'clusters', {
           factors: this.factors.map((f) => {
             return {
               factor: f.name,
@@ -40,11 +50,10 @@ export class AdjusterService {
                 .map((ds) => ds.name),
             };
           }),
-        },
-      })
-        .then((response) => {
-          const clusterData = response.data.response;
-          console.log(clusterData);
+        })
+        .toPromise()
+        .then((data: any) => {
+          const clusterData = data.response;
           /*let max = 0;
         this.clusters.forEach((a) => {
           if (a.aggregate > max) {
@@ -82,32 +91,31 @@ export class AdjusterService {
           }
           this.clusters = clusters;
           this._clusteringInProcess = false;
-          this.$rootScope.$broadcast('clusters_loaded');
+          this.clustersLoaded.next();
         })
         .catch((error) => {
-          console.error(
-            `Error obtaining data from ${this.serviceBaseUrl}: ${error}`
-          );
+          console.warn(`Error obtaining data from ${this.serviceBaseUrl}.`);
+          console.log(error);
           this._clusteringInProcess = false;
         });
     };
-    this.HsUtilsService.debounce(f, 300)();
+    this.hsUtilsService.debounce(f, 300, false, this)();
   }
 
-  init() {
-    this.$http({
-      url: this.serviceBaseUrl + 'datasets',
-    })
-      .then((response) => {
-        this.factors = response.data.map((dataset) => {
+  init(): void {
+    this.httpClient
+      .get(this.serviceBaseUrl + 'datasets')
+      .toPromise()
+      .then((data: any) => {
+        this.factors = data.map((dataset) => {
           return {name: dataset.Factor, weight: 1, datasets: []};
         });
-        this.factors = this.HsUtilsService.removeDuplicates(
+        this.factors = this.hsUtilsService.removeDuplicates(
           this.factors,
           'name'
         );
         this.factors.forEach((factor) => {
-          factor.datasets = response.data
+          factor.datasets = data
             .filter((ds) => ds.Factor === factor.name)
             .map((ds) => {
               return {
@@ -120,7 +128,8 @@ export class AdjusterService {
         this.apply();
       })
       .catch((error) => {
-        console.error(`Web service at ${this.serviceBaseUrl} unavailable!`);
+        console.warn(`Web service at ${this.serviceBaseUrl} unavailable!`);
+        console.log(error);
         this._clusteringInProcess = false;
       });
   }
@@ -128,7 +137,7 @@ export class AdjusterService {
   /**
    * @returns {boolean} true if clustering is in process, false otherwise
    */
-  isClusteringInProcess() {
+  isClusteringInProcess(): boolean {
     return this._clusteringInProcess;
   }
 }

src/adjuster/index.ts

@@ -0,0 +1,28 @@
+import * as angular from 'angular';
+import {downgrade} from 'hslayers-ng/common/downgrader';
+import {downgradeComponent, downgradeInjectable} from '@angular/upgrade/static';
+
+import {AdjusterComponent} from './adjuster.component';
+import {AdjusterModule} from './adjuster.module';
+import {AdjusterService} from './adjuster.service';
+
+export const downgradedModule = downgrade(AdjusterModule);
+
+angular
+  .module(downgradedModule, ['hs.core', 'hs.map'])
+  .directive('praAdjusterSidebarBtn', function () {
+    return {
+      template: require('./adjuster-sidebar-btn.directive.html'),
+    };
+  })
+  .service('PraAdjusterService', downgradeInjectable(AdjusterService))
+  .component('praAdjuster', downgradeComponent({component: AdjusterComponent}))
+  .directive('praAdjusterLoader', () => {
+    return {
+      template: require('./adjuster-loader.directive.html'),
+    };
+  });
+
+angular.module('pra.adjuster', [downgradedModule]);
+
+export {AdjusterModule} from './adjuster.module';

src/app.module.js → src/app-js.ts

@@ -1,26 +1,32 @@
 'use strict';
 import 'hslayers-ng/components/add-layers/add-layers.module';
-import 'hslayers-ng/components/core/core.module';
+import 'hslayers-ng/components/core';
 import 'hslayers-ng/components/datasource-selector/datasource-selector.module';
-import 'hslayers-ng/components/draw/draw.module';
+import 'hslayers-ng/components/draw';
 import 'hslayers-ng/components/info/info.module';
-import 'hslayers-ng/components/map/map.module';
-import 'hslayers-ng/components/measure/measure.module';
-import 'hslayers-ng/components/permalink/permalink.module';
-import 'hslayers-ng/components/print/print.module';
+import 'hslayers-ng/components/legend';
+//import 'hslayers-ng/components/map/map.module';
+import 'hslayers-ng/components/measure';
+import 'hslayers-ng/components/permalink';
+import 'hslayers-ng/components/print';
 import 'hslayers-ng/components/query/query.module';
-import 'hslayers-ng/components/search/search.module';
-import 'hslayers-ng/components/sidebar/sidebar.module';
-import 'hslayers-ng/components/toolbar/toolbar.module';
+import 'hslayers-ng/components/search';
+import 'hslayers-ng/components/sidebar';
+import 'hslayers-ng/components/toolbar';
 // hslayers-ng components must be loaded first, otherwise angular will be undefined
 // eslint-disable-next-line sort-imports-es6-autofix/sort-imports-es6
+import './adjuster';
 import './app.css';
+import * as angular from 'angular';
 import View from 'ol/View';
-import angular from 'angular';
-import {AdjusterModule} from './adjuster/adjuster.module.js';
-import {HsComponent, nuts2Layer, nuts3Layer} from './app.component.js';
 import {OSM} from 'ol/source';
 import {Tile} from 'ol/layer';
+import {downgradeInjectable} from '@angular/upgrade/static';
+
+import {AppModule} from './app.module';
+import {AppService} from './app.service';
+import {HsComponent, nuts2Layer, nuts3Layer} from './app.component';
+import {downgrade} from 'hslayers-ng/common/downgrader';
 
 function getHostname() {
   const url = window.location.href;
@@ -29,8 +35,13 @@ function getHostname() {
   return urlArr[0] + '//' + domain;
 }
 
-angular
+export const downgradedModule = downgrade(AppModule);
+
+//angular.module(downgradedModule, []);
+
+export default angular
   .module('hs', [
+    downgradedModule,
     'hs.addLayers',
     'hs.core',
     'hs.datasource_selector',
@@ -47,9 +58,9 @@ angular
     'hs.sidebar',
     'hs.toolbar',
     'gettext',
-    AdjusterModule,
   ])
   .value('HsConfig', {
+    useProxy: false,
     //proxyPrefix: '../8085/',
     default_layers: [
       new Tile({
@@ -101,4 +112,5 @@ angular
     },
     sizeMode: 'fullscreen',
   })
-  .component('hs', HsComponent);
+  .component('hs', HsComponent)
+  .service('AppService', downgradeInjectable(AppService));

src/app.component.js → src/app.component.ts

@@ -1,7 +1,8 @@
-import VectorLayer from 'ol/layer/Vector';
-import hsv2rgb from 'hsv2rgb';
-import nuts from './nuts.js';
+import * as hsv2rgb from 'hsv2rgb';
 import {Fill, Stroke, Style} from 'ol/style';
+import {Vector as VectorLayer} from 'ol/layer';
+
+import * as nuts from './nuts';
 
 export const HsComponent = {
   template: (HsCore) => {
@@ -17,27 +18,21 @@ export const HsComponent = {
     HsCore,
     HsLayoutService,
     HsSidebarService,
-    PraAdjusterService
+    PraAdjusterService,
+    AppService
   ) {
     'ngInject';
     const vm = this;
     vm.exists = HsCore.exists;
     vm.panelVisible = HsLayoutService.panelVisible;
     vm.PraAdjusterService = PraAdjusterService;
-    HsLayoutService.fullScreenMap($element, HsCore);
+    //HsLayoutService.fullScreenMap($element, HsCore);
     HsLayoutService.sidebarRight = false;
     // HsLayoutService.sidebarToggleable = false;
     // HsCore.singleDatasources = true;
     //HsLayoutService.sidebarButtons = true;
-    HsSidebarService.buttons.push({
-      panel: 'adjuster',
-      module: 'pra.adjuster',
-      order: '6',
-      title: 'Adjust factors',
-      description: '',
-      icon: 'icon-analytics-piechart',
-    });
-    $scope.$on('scope_loaded', function (event, args) {
+    AppService.init();
+    /*$scope.$on('scope_loaded', function (event, args) {
       if (args === 'Sidebar') {
         const el = angular.element(
           '<pra-adjuster hs.draggable ng-if="vm.exists(\'pra.adjuster\')" ng-show="vm.panelVisible(\'adjuster\', this)"></pra-adjuster>'
@@ -53,8 +48,8 @@ export const HsComponent = {
           .appendChild(loader);
         $compile(loader)(event.targetScope);
       }
-    });
-    $scope.$on('clusters_loaded', function (event, args) {
+    });*/
+    PraAdjusterService.clustersLoaded.subscribe(() => {
       colorPalette = generateRandomColorPalette(
         PraAdjusterService.clusters.length
       );

src/app.module.ts

@@ -0,0 +1,50 @@
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+import 'reflect-metadata';
+import 'zone.js';
+import app from './app-js';
+import {
+  APP_BOOTSTRAP_LISTENER,
+  ApplicationRef,
+  ComponentRef,
+  NgModule,
+} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {UpgradeModule} from '@angular/upgrade/static';
+
+import {BootstrapComponent} from 'hslayers-ng/bootstrap.component';
+import {HsCoreModule} from 'hslayers-ng/components/core/core.module';
+
+import {AdjusterModule} from './adjuster';
+import {AppService} from './app.service';
+
+@NgModule({
+  imports: [BrowserModule, UpgradeModule, HsCoreModule, AdjusterModule],
+  exports: [],
+  declarations: [/*MyCoolComponent, MyHotComponent*/],
+  entryComponents: [/*MyCoolComponent, MyHotComponent*/],
+  providers: [
+    AppService,
+    {
+      provide: APP_BOOTSTRAP_LISTENER,
+      multi: true,
+      useFactory: () => {
+        return (component: ComponentRef<BootstrapComponent>) => {
+          //When ng9 part is bootstrapped continue with AngularJs modules
+          component.instance.upgrade.bootstrap(
+            document.documentElement,
+            [app.name],
+            {strictDi: true}
+          );
+        };
+      },
+    },
+  ],
+})
+export class AppModule {
+  constructor() {}
+  ngDoBootstrap(appRef: ApplicationRef): void {
+    //First bootstrap Angular 9 app part on hs element
+    appRef.bootstrap(BootstrapComponent);
+  }
+}

src/app.service.ts

@@ -0,0 +1,42 @@
+import {Injectable} from '@angular/core';
+
+import {HsLayoutService} from 'hslayers-ng/components/layout/layout.service';
+import {HsPanelContainerService} from 'hslayers-ng/components/layout/panels/panel-container.service';
+import {HsSidebarService} from 'hslayers-ng/components/sidebar/sidebar.service';
+
+import {AdjusterComponent} from './adjuster/adjuster.component';
+//import {MyCoolComponent} from './cool.component';
+//import {MyHotComponent} from './hot.component';
+
+@Injectable({providedIn: 'root'})
+export class AppService {
+  constructor(
+    private hsLayoutService: HsLayoutService,
+    private hsSidebarService: HsSidebarService,
+    private hsPanelContainerService: HsPanelContainerService
+  ) {}
+
+  init(): void {
+    this.hsSidebarService.buttons.push(
+      {
+        panel: 'adjuster',
+        module: 'pra.adjuster',
+        order: 6,
+        title: 'Adjust factors',
+        description: 'Opens My Cool Panel',
+        icon: 'icon-analytics-piechart',
+      },
+      {
+        panel: 'hot',
+        module: 'my.hot',
+        order: 8,
+        title: 'My Hot Panel',
+        description: 'Opens My Hot Panel',
+        icon: 'icon-calcplus',
+      }
+    );
+    this.hsPanelContainerService.create(AdjusterComponent, {});
+    //this.hsPanelContainerService.create(MyHotComponent, {});
+    this.hsLayoutService.setDefaultPanel('adjuster');
+  }
+}

src/index.html

@@ -16,7 +16,7 @@
 </head>
 
 <body>
-  <hs ng-app="hs" id="hs-app" ng-strict-di></hs>
+  <hs id="hs-app" ng-strict-di></hs>
   <% for (var js in htmlWebpackPlugin.files.js) { %>
     <script type="application/javascript" src="<%= htmlWebpackPlugin.files.js[js] %>"></script>
   <% } %>

src/main.ts

@@ -0,0 +1,13 @@
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+import 'reflect-metadata';
+(window as any).__Zone_disable_requestAnimationFrame = true;
+(window as any).__Zone_disable_setTimeout = true;
+import 'zone.js';
+import * as angular from 'angular';
+import {AppModule} from './app.module';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {setAngularJSGlobal} from '@angular/upgrade/static';
+
+setAngularJSGlobal(angular);
+platformBrowserDynamic().bootstrapModule(AppModule);

tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+        "experimentalDecorators": true,
+        "allowJs": false,
+        "target": "es5",
+        "emitDecoratorMetadata": true,
+        "lib": ["esnext", "dom"],
+        "sourceMap": true
+    }
+}

webpack.common.js

@@ -12,25 +12,22 @@
 const path = require('path');
 const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const hslPaths = require(path.join(
-  __dirname,
-  './node_modules/hslayers-ng/common_paths'
-));
 
 module.exports = {
-  entry: {main: './src/app.module.js'},
+  entry: {main: './src/main.ts'},
   output: {
     // Path at which output assets will be served
     publicPath: '',
   },
   // Just for build speed improvement
   resolve: {
+    extensions: ['.ts', '.js'],
     symlinks: true,
     modules: [
-      path.join(__dirname),
-      path.join(__dirname, './node_modules'),
+      __dirname,
+      path.resolve(path.join(__dirname, './node_modules')),
       path.resolve(path.join(__dirname, './node_modules', 'hslayers-ng')),
-    ].concat(hslPaths.paths),
+    ],
   },
   plugins: [
     // Clean before build
@@ -46,6 +43,14 @@ module.exports = {
   ],
   module: {
     rules: [
+      {
+        test: /\.ts$/,
+        use: [
+          {loader: 'ng-annotate-loader'},
+          {loader: 'ts-loader', options: {allowTsInNodeModules: true}},
+        ],
+        exclude: /node_modules\/(?!(hslayers-ng)\/).*/,
+      },
       // Automatically generates $inject array for angularJS components annotated with:
       // 'ngInject';
       // or commented with /**@ngInject */

webpack.dev.js

@@ -65,11 +65,7 @@ module.exports = merge(common, {
       {
         test: /\.html$/,
         exclude: path.resolve(__dirname, './src/index.html'),
-        use: [
-          'ng-cache-loader?prefix=[dir]/[dir]',
-          'extract-loader',
-          'html-loader',
-        ],
+        use: ['html-loader'],
       },
       // Load images as URLs
       {

webpack.prod.js

@@ -119,11 +119,9 @@ module.exports = merge(common, {
         test: /\.html$/,
         exclude: path.resolve(__dirname, './src/index.html'),
         use: [
-          'ng-cache-loader?prefix=[dir]/[dir]',
-          'extract-loader',
           {
             loader: 'html-loader',
-            options: {minimize: true},
+            options: {minimize: true, caseSensitive: true},
           },
         ],
       },