⚡️♻️⬆️ upgrade HSL to 3.0

angular.json

@@ -0,0 +1,127 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "attractiveness": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "sass"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "",
+      "architect": {
+        "build": {
+          "builder": "@angular-builders/custom-webpack:browser",
+          "options": {
+            "customWebpackConfig": {
+              "path": "./webpack.config.js"
+            },
+            "outputPath": "build",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "aot": true,
+            "assets": [
+              "src/images/cropped-favicon-32x32.png",
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "./node_modules/hslayers-ng/src/assets",
+                "output": "./assets/hslayers-ng/"
+              }
+            ],
+            "preserveSymlinks": true,
+            "styles": [
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "environments/environment.ts",
+                  "with": "environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": true,
+              "extractCss": true,
+              "namedChunks": false,
+              "statsJson": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "3mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-builders/custom-webpack:dev-server",
+          "options": {
+            "port": 8080,
+            "browserTarget": "attractiveness:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "attractiveness:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "attractiveness:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "test.ts",
+            "polyfills": "polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "favicon.ico"
+            ],
+            "styles": [
+            ],
+            "scripts": []
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "attractiveness:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "attractiveness:serve:production"
+            }
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "attractiveness",
+  "cli": {
+    "analytics": false
+  }
+}

browserslist

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

environments/environment.ts

@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

package.json

@@ -4,11 +4,12 @@
   "description": "Rural attractiveness aplication",
   "main": "build/index.html",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack --config ./webpack.prod.js --progress",
-    "build-dev": "webpack --config ./webpack.dev.js --progress",
+    "build": "ng build --prod",
+    "build-dev": "ng build --aot",
+    "serve": "npm run start-dev",
     "start": "npx http-server ./build -p 8080",
-    "start-dev": "webpack-dev-server --config ./webpack.dev.js --watch"
+    "start-dev": "ng serve --aot --disable-host-check",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
@@ -24,45 +25,51 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "@angular/common": "^9.1.13",
+    "@angular/compiler": "^9.1.13",
+    "@angular/core": "^9.1.13",
+    "@angular/forms": "^9.1.13",
+    "@angular/localize": "^9.1.13",
+    "@angular/platform-browser": "^9.1.13",
+    "@angular/platform-browser-dynamic": "^9.1.13",
+    "@ng-bootstrap/ng-bootstrap": "^6.2.0",
+    "@ngx-translate/http-loader": "^5.0.0",
+    "bootstrap": "^4.5.3",
     "csvtojson": "^2.0.10",
-    "hslayers-ng": "^2.5.0",
+    "deepmerge": "^4.2.2",
+    "hslayers-ng": "^3.1.0",
     "hsv2rgb": "^1.1.0",
-    "http-server": "^0.12.3"
+    "http-server": "^0.12.3",
+    "moment": "^2.29.1",
+    "moment-interval": "^0.2.1",
+    "ngx-cookie-service": "^3.1.3",
+    "ol": "^6.5.0",
+    "ol-popup": "^4.0.0",
+    "proj4": "^2.6.3",
+    "rxjs": "^6.6.3",
+    "share-api-polyfill": "^1.0.20",
+    "ts-sync-request": "^1.4.1",
+    "tslib": "^1.10.0",
+    "xml-js": "^1.6.11",
+    "zone.js": "^0.10.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",
-    "css-loader": "^3.6.0",
+    "@angular-builders/custom-webpack": "~9.2.0",
+    "@angular-devkit/build-angular": "~0.901.13",
+    "@angular-devkit/build-ng-packagr": "~0.901.13",
+    "@angular/cli": "~9.1.13",
+    "@angular/compiler-cli": "~9.1.13",
+    "@angularclass/hmr": "^3.0.0",
+    "@ngx-translate/core": "^12.1.2",
     "eslint": "^7.10.0",
     "eslint-config-openlayers": "^14.0.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
-    "extract-loader": "^5.1.0",
-    "file-loader": "^6.1.0",
-    "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",
+    "ng-packagr": "^9.1.5",
     "sass": "^1.32.7",
-    "sass-loader": "^10.1.1",
-    "style-loader": "^1.3.0",
-    "ts-loader": "^8.0.3",
-    "typescript": "^3.9.8",
-    "url-loader": "^4.1.0",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.2",
-    "webpack-merge": "^5.1.4"
+    "typescript": "3.8",
+    "webpack": "^4.46.0",
+    "webpack-dev-server": "^3.11.2"
   }
 }

polyfills.ts

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

src/adjuster/adjuster-loader.component.scss

@@ -0,0 +1,39 @@
+@import "~bootstrap/scss/_functions";
+@import "~bootstrap/scss/_variables";
+@import "~bootstrap/scss/_mixins";
+@import "~bootstrap/scss/spinners";
+
+.loader-splash {
+  font-family: Arial, Helvetica, sans-serif; /* temporary workaround for HSL 2.x */
+  height: 100vh;
+  width: 100vw;
+  position: absolute;
+  z-index: 1010;
+  top: 0;
+  left: 0;
+  background-color: rgba(65,65,65,.66);
+}
+
+.loader-splash > div {
+  position: relative;
+  margin-top: 20%;
+}
+
+.loader-splash h1 {
+  color: #77bbff;
+}
+
+.loader-splash .spinner {
+  width: 10vh;
+  height: 10vh;
+  color: #77bbff;
+}
+
+.center-block {
+  text-align: center;
+  margin-bottom: 1em;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}

src/adjuster/adjuster-loader.component.ts

@@ -1,14 +1,15 @@
 import {AfterViewInit, Component, Input, ViewRef} from '@angular/core';
 
-import {HsDialogComponent} from 'hslayers-ng/components/layout/dialogs/dialog-component.interface';
-import {HsDialogContainerService} from 'hslayers-ng/components/layout/dialogs/dialog-container.service';
+import {HsDialogComponent} from 'hslayers-ng';
+import {HsDialogContainerService} from 'hslayers-ng';
 
 import {AdjusterEventService} from './adjuster-event.service';
 import {AdjusterService} from './adjuster.service';
 
 @Component({
   selector: 'pra-adjuster-loader',
-  template: require('./adjuster-loader.directive.html'),
+  templateUrl: './adjuster-loader.directive.html',
+  styleUrls: ['./adjuster-loader.component.scss'],
 })
 export class AdjusterLoaderComponent
   implements HsDialogComponent, AfterViewInit {

src/adjuster/adjuster.component.scss

@@ -0,0 +1,13 @@
+@import "~bootstrap/scss/_functions";
+@import "~bootstrap/scss/_variables";
+@import "~bootstrap/scss/_mixins";
+@import "~bootstrap/scss/custom-forms";
+
+.center-block {
+  text-align: center;
+  margin-bottom: 1em;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}

src/adjuster/adjuster.component.ts

@@ -1,8 +1,8 @@
 import {Component, OnInit, ViewRef} from '@angular/core';
 
-import {HsDialogContainerService} from 'hslayers-ng/components/layout/dialogs/dialog-container.service';
-import {HsLayoutService} from 'hslayers-ng/components/layout/layout.service';
-import {HsPanelComponent} from 'hslayers-ng/components/layout/panels/panel-component.interface';
+import {HsDialogContainerService} from 'hslayers-ng';
+import {HsLayoutService} from 'hslayers-ng';
+import {HsPanelComponent} from 'hslayers-ng';
 
 //import {AdjusterEventService} from './adjuster-event.service';
 import {AdjusterLoaderComponent} from './adjuster-loader.component';
@@ -10,7 +10,8 @@ import {AdjusterService} from './adjuster.service';
 
 @Component({
   selector: 'pra-adjuster',
-  template: require('./adjuster.directive.html'),
+  templateUrl: './adjuster.directive.html',
+  styleUrls: ['./adjuster.component.scss'],
 })
 export class AdjusterComponent implements HsPanelComponent, OnInit {
   data: any;

src/adjuster/adjuster.directive.html

@@ -28,34 +28,7 @@
       <input type="range" class="custom-range" [(ngModel)]="adjusterService.numberOfClusters" min="5" max="15" step="1">
     </div>
     <div *ngFor="let factor of adjusterService.factors; let datasetlistVisible = false">
-      <div class="d-flex flex-row">
-        <div class="p-2 flex-grow-1">
-          <span class="glyphicon cursor-pointer"
-            [ngClass]="datasetlistVisible ? 'icon-chevron-down' : 'icon-chevron-right'"
-            (click)="datasetlistVisible = !datasetlistVisible"></span>
-          <label class="pl-2 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" [(ngModel)]="factor.weight" min="0"
-        max="1.0" step="0.05">
-      <div [hidden]="!datasetlistVisible">
-        <div *ngFor="let dataset of factor.datasets; let descriptionVisible = false">
-          <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
-            [ngClass]="dataset.included ? 'hs-checkmark' : 'hs-uncheckmark'"
-            (click)="dataset.included = !dataset.included;$event.stopPropagation()"></button>
-          <!-- commented because we do not have descriptions yet -->
-          <!--span class="glyphicon cursor-pointer text-secondary"
-            [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-->
-            <label class="pl-2 text-secondary">{{dataset.name}}</label>
-          <div class="p-2 mb-2 text-justify text-info" [hidden]="!descriptionVisible">
-            {{dataset.desc}}
-          </div>
-        </div>
-      </div>
+      <pra-dataset-list [factor]="factor"></pra-dataset-list>
     </div>
     <hr>
     <div class="pt-3 center-block" [hidden]="!adjusterService.clustersLoaded()">

src/adjuster/adjuster.module.ts

@@ -4,12 +4,13 @@ import {FormsModule} from '@angular/forms';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 import {TranslateModule} from '@ngx-translate/core';
 
-import {HsPanelHelpersModule} from 'hslayers-ng/components/layout/panels/panel-helpers.module';
+import {HsPanelHelpersModule} from 'hslayers-ng';
 
 import {AdjusterComponent} from './adjuster.component';
 import {AdjusterEventService} from './adjuster-event.service';
 import {AdjusterLoaderComponent} from './adjuster-loader.component';
 import {AdjusterService} from './adjuster.service';
+import {DatasetListComponent} from './dataset-list.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -21,8 +22,8 @@ import {AdjusterService} from './adjuster.service';
     TranslateModule,
   ],
   exports: [AdjusterComponent],
-  declarations: [AdjusterComponent, AdjusterLoaderComponent],
-  entryComponents: [AdjusterComponent, AdjusterLoaderComponent],
+  declarations: [AdjusterComponent, AdjusterLoaderComponent, DatasetListComponent],
+  entryComponents: [AdjusterComponent, AdjusterLoaderComponent, DatasetListComponent],
   providers: [AdjusterService, AdjusterEventService],
 })
 export class AdjusterModule {}

src/adjuster/adjuster.service.ts

@@ -3,11 +3,11 @@ import {Injectable} from '@angular/core';
 import {Vector as VectorLayer} from 'ol/layer';
 import {forkJoin} from 'rxjs';
 
-import {HsConfig} from 'hslayers-ng/config.service';
-import {HsEventBusService} from 'hslayers-ng/components/core/event-bus.service';
-import {HsLayerManagerMetadataService} from 'hslayers-ng/components/layermanager/layermanager-metadata.service';
-import {HsLayerManagerService} from 'hslayers-ng/components/layermanager';
-import {HsUtilsService} from 'hslayers-ng/components/utils/utils.service';
+import {HsConfig} from 'hslayers-ng';
+import {HsEventBusService} from 'hslayers-ng';
+//import {HsLayerManagerMetadataService} from 'hslayers-ng/components/layermanager/layermanager-metadata.service';
+import {HsLayerManagerService} from 'hslayers-ng';
+import {HsUtilsService} from 'hslayers-ng';
 
 import attractivenessConfig from '../attractiveness.config.json';
 import clusteringMethods from '../data/clustering_methods.json';
@@ -43,7 +43,7 @@ export class AdjusterService {
     public adjusterLegendService: AdjusterLegendService,
     public hsConfig: HsConfig,
     public hsEventBus: HsEventBusService,
-    public hsLayerMetadataService: HsLayerManagerMetadataService,
+    //public hsLayerMetadataService: HsLayerManagerMetadataService,
     public hsLayerManagerService: HsLayerManagerService,
     public hsUtilsService: HsUtilsService,
     public $http: HttpClient

src/adjuster/dataset-list.component.html

@@ -0,0 +1,28 @@
+<div class="d-flex flex-row">
+  <div class="p-2 flex-grow-1">
+    <span class="glyphicon cursor-pointer"
+      [ngClass]="datasetlistVisible ? 'icon-chevron-down' : 'icon-chevron-right'"
+      (click)="datasetlistVisible = !datasetlistVisible"></span>
+    <label class="pl-2 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" [(ngModel)]="factor.weight" min="0"
+  max="1.0" step="0.05">
+<div [hidden]="!datasetlistVisible">
+  <div *ngFor="let dataset of factor.datasets; let descriptionVisible = false">
+    <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
+      [ngClass]="dataset.included ? 'hs-checkmark' : 'hs-uncheckmark'"
+      (click)="dataset.included = !dataset.included;$event.stopPropagation()"></button>
+    <!-- commented because we do not have descriptions yet -->
+    <!--span class="glyphicon cursor-pointer text-secondary"
+      [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-->
+      <label class="pl-2 text-secondary">{{dataset.name}}</label>
+    <div class="p-2 mb-2 text-justify text-info" [hidden]="!descriptionVisible">
+      {{dataset.desc}}
+    </div>
+  </div>
+</div>

src/adjuster/dataset-list.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'pra-dataset-list',
+  templateUrl: './dataset-list.component.html',
+  styleUrls: ['./adjuster.component.scss'],
+})
+
+export class DatasetListComponent implements OnInit {
+  @Input() factor;
+  datasetlistVisible = false;
+  constructor() { }
+
+  ngOnInit() { }
+}

src/adjuster/index.ts

@@ -1,23 +1,6 @@
-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 {AdjusterLoaderComponent} from './adjuster-loader.component';
 import {AdjusterModule} from './adjuster.module';
 import {AdjusterService} from './adjuster.service';
 
-export const downgradedModule = downgrade(AdjusterModule);
-
-angular
-  .module(downgradedModule, ['hs.core', 'hs.map'])
-  .service('AdjusterService', downgradeInjectable(AdjusterService))
-  .directive('praAdjuster', downgradeComponent({component: AdjusterComponent}));
-/*.directive(
-    'praAdjusterLoader',
-    downgradeComponent({component: AdjusterLoaderComponent})
-  );*/
-
-angular.module('pra.adjuster', [downgradedModule]);
-
 export {AdjusterModule} from './adjuster.module';

src/app.component.html

@@ -0,0 +1,12 @@
+<style>
+    hslayers {
+      position: relative; 
+      height: 100vh
+    }
+    @media only screen and (max-width: 600px) {
+    hslayers {
+      height: calc(100vh - 96px)
+    }
+  }
+</style>
+<hslayers></hslayers>

src/app.component.ts

@@ -1,19 +1,20 @@
-export const AppComponent = {
-  template: (HsCore) => {
-    'ngInject';
-    return HsCore.hslayersNgTemplate;
-  },
-  bindings: {},
-  controllerAs: 'vm',
-  controller: class AppComponent {
-    constructor(HsLayoutService, AdjusterService, AppService) {
-      'ngInject';
-      const vm = this;
-      //$scope.Core = Core;
-      //$scope.panelVisible = layoutService.panelVisible;
-      //layoutService.sidebarRight = false;
-      // layoutService.sidebarToggleable = false;
-      //Core.singleDatasources = true;
-    }
-  },
-};
+import {Component} from '@angular/core';
+
+import {HsConfig, HsLanguageService} from 'hslayers-ng';
+import {AppConfig} from './app.config';
+import {AppService} from './app.service';
+
+@Component({
+  selector: 'app-component',
+  templateUrl: './app.component.html',
+  styleUrls: ['./custom.scss'],
+})
+export class AppComponent {
+  constructor(
+    public appService: AppService,
+    //public hsConfig: HsConfig,
+    public hsLangService: HsLanguageService
+  ) {
+    //this.hsConfig.update(AppConfig);
+  }
+}

src/app.config.ts

@@ -296,6 +296,7 @@ export const krajeLayer = new VectorLayer({
 });
 
 export const AppConfig = {
+  assetsPath: 'assets/hslayers-ng',
   useProxy: false,
   //proxyPrefix: '../8085/',
   geonamesUser: env.geonamesUser,

src/app.module.ts

@@ -1,56 +1,16 @@
-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 {TranslateModule} from '@ngx-translate/core';
-import {UpgradeModule} from '@angular/upgrade/static';
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
 
-import {BootstrapComponent} from 'hslayers-ng/bootstrap.component';
-import {HsCoreModule} from 'hslayers-ng/components/core/core.module';
+import {HslayersModule} from 'hslayers-ng';
 
+import {AppComponent} from './app.component';
 import {AdjusterModule} from './adjuster';
-import {AppService} from './app.service';
 
 @NgModule({
-  imports: [
-    BrowserModule,
-    UpgradeModule,
-    HsCoreModule,
-    AdjusterModule,
-    TranslateModule,
-  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [BrowserModule, HslayersModule, AdjusterModule],
+  declarations: [AppComponent],
   exports: [],
-  declarations: [],
-  providers: [
-    {
-      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}
-          );
-        };
-      },
-    },
-    AppService,
-  ],
+  bootstrap: [AppComponent],
 })
-export class AppModule {
-  constructor() {}
-  ngDoBootstrap(appRef: ApplicationRef): void {
-    //First bootstrap Angular 9 app part on hs element
-    appRef.bootstrap(BootstrapComponent);
-  }
-}
+export class AppModule {}

src/app.service.ts

@@ -6,19 +6,19 @@ import {TopoJSON} from 'ol/format';
 import {Vector as VectorLayer} from 'ol/layer';
 import {Vector as VectorSource} from 'ol/source';
 
-import {HsConfig} from 'hslayers-ng/config.service';
-import {HsEventBusService} from 'hslayers-ng/components/core/event-bus.service';
-import {HsLanguageService} from 'hslayers-ng/components/language/language.service';
-import {HsLayerManagerService} from 'hslayers-ng/components/layermanager';
-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 {HsConfig} from 'hslayers-ng';
+import {HsEventBusService} from 'hslayers-ng';
+import {HsLanguageService} from 'hslayers-ng';
+import {HsLayerManagerService} from 'hslayers-ng';
+import {HsLayoutService} from 'hslayers-ng';
+import {HsPanelContainerService} from 'hslayers-ng';
+import {HsSidebarService} from 'hslayers-ng';
 
 import {AdjusterComponent} from './adjuster/adjuster.component';
 import {AdjusterEventService} from './adjuster/adjuster-event.service';
 import {AdjusterLegendService} from './adjuster/adjuster-legend.service';
 import {AdjusterService} from './adjuster/adjuster.service';
-import {krajeLayer, masLayer, obceIndexLayer, okresyLayer} from './app.config';
+import {AppConfig, krajeLayer, masLayer, obceIndexLayer, okresyLayer} from './app.config';
 
 @Injectable({providedIn: 'root'})
 export class AppService {
@@ -34,6 +34,16 @@ export class AppService {
     public hsPanelContainerService: HsPanelContainerService,
     public hsSidebarService: HsSidebarService
   ) {
+    this.hsSidebarService.buttons.push({
+      panel: 'adjuster',
+      module: 'pra.adjuster',
+      order: 0,
+      title: () =>
+        this.hsLanguageService.getTranslation('ADJUSTER.adjustFactors'),
+      description: 'Adjust factors for computation',
+      icon: 'icon-analytics-piechart',
+    });
+    this.hsPanelContainerService.create(AdjusterComponent, {});
     this.prepareLayers();
     this.adjusterEventService.loaded.subscribe(({success}) => {
       if (success) {
@@ -55,16 +65,6 @@ export class AppService {
 
   init(): void {
     this.hsLanguageService.setLanguage('cs');
-    this.hsSidebarService.buttons.push({
-      panel: 'adjuster',
-      module: 'pra.adjuster',
-      order: 0,
-      title: () =>
-        this.hsLanguageService.getTranslation('ADJUSTER.adjustFactors'),
-      description: 'Adjust factors for computation',
-      icon: 'icon-analytics-piechart',
-    });
-    this.hsPanelContainerService.create(AdjusterComponent, {});
     this.hsLayoutService.setDefaultPanel('adjuster');
   }
 
@@ -83,7 +83,7 @@ export class AppService {
         autoLegend: false,
         visible: true,
         style: this.generateStyle(method.codename),
-        title: `Obce ČR: ${method.name.replaceAll(/\((.+?)\)/g, '')} clusters`,
+        title: `Obce ČR: ${method.name.replace(/\((.+?)\)/g, '')} clusters`,
         attributions: ['CC-BY ČÚZK, 2021'],
         popUp: {
           attributes: [
@@ -99,20 +99,21 @@ export class AppService {
         .on('featuresloadend', () =>
           this.adjusterEventService.layerReady.next({name: method.codename})
         );
-      this.hsConfig.default_layers.push(method.layer);
+      AppConfig.default_layers.push(method.layer);
     }
     // obceIndexLayer, okresyLayer and krajeLayer must be pushed in this order
     // so they will display in correct order
-    this.hsConfig.default_layers.push(obceIndexLayer);
+    AppConfig.default_layers.push(obceIndexLayer);
     obceIndexLayer
       .getSource()
       .on('featuresloadend', () =>
         this.adjusterEventService.layerReady.next({name: 'index'})
       );
     obceIndexLayer.getSource().legend_categories = this.adjusterLegendService.createIndexLegend();
-    this.hsConfig.default_layers.push(masLayer);
-    this.hsConfig.default_layers.push(okresyLayer);
-    this.hsConfig.default_layers.push(krajeLayer);
+    AppConfig.default_layers.push(masLayer);
+    AppConfig.default_layers.push(okresyLayer);
+    AppConfig.default_layers.push(krajeLayer);
+    this.hsConfig.update(AppConfig);
   }
 
   /**

src/custom.scss

@@ -1,7 +1,6 @@
 @import "~bootstrap/scss/_functions";
 @import "~bootstrap/scss/_variables";
 @import "~bootstrap/scss/_mixins";
-@import "~bootstrap/scss/spinners";
 @import "~bootstrap/scss/custom-forms";
 
 
@@ -20,32 +19,6 @@ html, body {
   cursor: pointer;
 }
 
-.loader-splash {
-  font-family: Arial, Helvetica, sans-serif; /* temporary workaround for HSL 2.x */
-  height: 100vh;
-  width: 100vw;
-  position: absolute;
-  z-index: 1010;
-  top: 0;
-  left: 0;
-  background-color: rgba(65,65,65,.66);
-}
-
-.loader-splash > div {
-  position: relative;
-  margin-top: 20%;
-}
-
-.loader-splash h1 {
-  color: #77bbff;
-}
-
-.loader-splash .spinner {
-  width: 10vh;
-  height: 10vh;
-  color: #77bbff;
-}
-
 .center-block {
   text-align: center;
   margin-bottom: 1em;

src/index.html

@@ -5,19 +5,23 @@
   <title>Rural attractiveness of Czech municipalities</title>
   <meta name="description" content="Rural attractiveness calculation and visualization application. 2021">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
-  <link href="<%= htmlWebpackPlugin.files.favicon %>" rel="icon">
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-  <% for (var css in htmlWebpackPlugin.files.css) { %>
-    <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
-  <% } %>
+  <link rel="icon" type="image/x-icon" href="images/cropped-favicon-32x32.png">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <style>
+html, body {
+  margin: 0;
+  padding: 0;
+}
+#hs-app {
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+  </style>
 </head>
-
-<body>
-  <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>
-  <% } %>
+<body >
+  <app-component></app-component>
 </body>
-
+</html>
 </html>

src/main.ts

@@ -1,13 +1,16 @@
-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 './polyfills';
 import {AppModule} from './app.module';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
-import {setAngularJSGlobal} from '@angular/upgrade/static';
 
-setAngularJSGlobal(angular);
-platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .then((ref) => {
+    // Ensure Angular destroys itself on hot reloads.
+    if (window['ngRef']) {
+      window['ngRef'].destroy();
+    }
+    window['ngRef'] = ref;
+
+    // Otherwise, log the boot error
+  })
+  .catch((err) => console.error(err));

src/polyfills.ts

@@ -0,0 +1,73 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following to support `@angular/animation`. */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+/** Evergreen browsers require these. **/
+//import 'core-js/es/reflect';
+//import 'core-js/es7/reflect';
+
+
+/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.
+
+
+/**
+ * Angular localization polyfill
+ */
+import '@angular/localize/init';

tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": ["node"],
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "./**/*.d.ts",
+  ],
+}

tsconfig.json

@@ -1,12 +1,23 @@
 {
+  "compileOnSave": false,
   "compilerOptions": {
-      "experimentalDecorators": true,
-      "allowJs": false,
-      "target": "es5",
-      "emitDecoratorMetadata": true,
-      "lib": ["esnext", "dom"],
-      "sourceMap": true,
-      "esModuleInterop": true,
-      "resolveJsonModule": true,
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": "./",
+    "declaration": false,
+    "downlevelIteration": true,
+    "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "lib": ["es2018", "dom"],
+    "resolveJsonModule": true,
+    "sourceMap": true,
+    "target": "es5",
+  },
+  "angularCompilerOptions": {
+    "enableResourceInlining": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true
   }
 }

webpack.config.js

@@ -0,0 +1,19 @@
+const path = require("path");
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(geo|topo)json$/,
+        include: path.resolve(__dirname, "src/data"),
+        use: {
+          loader: "file-loader",
+          options: {
+            name: "[name].[ext]",
+            outputPath: "data",
+          },
+        },
+      },
+    ],
+  },
+};