♻️ move to federated module design

angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "hslayers-app": {
+    "fieldcalc": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -15,7 +15,7 @@
       "prefix": "",
       "architect": {
         "build": {
-          "builder": "@angular-builders/custom-webpack:browser",
+          "builder": "ngx-build-plus:browser",
           "options": {
             "sourceMap": true,
             "vendorChunk": true,
@@ -54,9 +54,7 @@
               "./src/styles.scss"
             ],
             "scripts": [],
-            "customWebpackConfig": {
-              "path": "custom-webpack.config.js"
-            }
+            "extraWebpackConfig": "custom-webpack.config.js"
           },
           "configurations": {
             "production": {
@@ -99,6 +97,22 @@
             }
           }
         },
+        "federated-serve": {
+          "builder": "ngx-build-plus:dev-server",
+          "options": {
+            "port": 5100,
+            "extraWebpackConfig": "./custom-webpack.config.js"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "app:build:production"
+            },
+            "development": {
+              "browserTarget": "app:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
@@ -135,7 +149,7 @@
       }
     }
   },
-  "defaultProject": "hslayers-app",
+  "defaultProject": "fieldcalc",
   "cli": {
     "analytics": false
   }

custom-webpack.config.js

@@ -1,6 +1,61 @@
-var webpack = require('webpack');
+//const webpack = require('webpack');
+const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');
 
-module.exports = {
+module.exports = withModuleFederationPlugin({
+  name: 'fieldcalc',
+
+  exposes: {
+    './FcCalculatorComponent': './src/app/calculator/calculator-panel.component.ts',
+  },
+
+  shared: {
+    "@angular/core": {
+      singleton: true,
+      strictVersion: false,
+      requiredVersion: "auto",
+    },
+    "@angular/common": {
+      singleton: true,
+      strictVersion: false,
+      requiredVersion: "auto",
+    },
+    "@angular/forms": {
+      singleton: true,
+      strictVersion: false,
+      requiredVersion: "auto",
+    },
+    "@angular/common/http": {
+      singleton: true,
+      strictVersion: false,
+      requiredVersion: "auto",
+    },
+    "@angular/router": {
+      singleton: true,
+      strictVersion: false,
+      requiredVersion: "auto",
+    },
+    "@ngx-translate/core": { singleton: true, strictVersion: false },
+    "@angular/localize/init": {
+      singleton: true,
+    },
+    'ol': {singleton: true, requiredVersion: '^7.1.0'},
+    'ol-ext': {singleton: true, requiredVersion: '^4.0.3'},
+    'ol/layer': {
+      singleton: true,
+    },
+    'ol/source': {
+      singleton: true,
+    },
+    'hslayers-ng': {
+      singleton: true,
+      strictVersion: true,
+      requiredVersion: '^10.0.0',
+      version: '10.0.0'
+    },
+  }
+
+})
+/*module.exports = {
   devtool: false,
   plugins: [
     new webpack.SourceMapDevToolPlugin({
@@ -8,4 +63,4 @@ module.exports = {
       exclude: ['vendor.js'],
     })
   ],
-};
+};*/

package.json

@@ -30,6 +30,7 @@
     "hslayers-ng": "10.0.0"
   },
   "devDependencies": {
+    "@angular-architects/module-federation": "^14.3.14",
     "@angular-builders/custom-webpack": "^14.0.0",
     "@angular-devkit/build-angular": "^14.0.0",
     "@angular-eslint/builder": "^14.0.0",
@@ -43,6 +44,7 @@
     "eslint-config-openlayers": "14.0.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-tsdoc": "^0.2.16",
-    "karma-jasmine": "~5.0.1"
+    "karma-jasmine": "~5.0.1",
+    "ngx-build-plus": "^15.0.0"
   }
 }

src/app/app.component.spec.ts

@@ -5,14 +5,12 @@ class HsConfigMock {
   constructor() {}
 }
 describe('AppComponent', () => {
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        declarations: [AppComponent],
-        providers: [{provide: HsConfig, useValue: new HsConfigMock()}],
-      }).compileComponents();
-    })
-  );
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [AppComponent],
+      providers: [{provide: HsConfig, useValue: new HsConfigMock()}],
+    }).compileComponents();
+  }));
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);

src/app/app.component.ts

@@ -11,7 +11,7 @@ import {
 } from 'hslayers-ng';
 
 import {AppService} from './app.service';
-import {CalculatorComponent} from './calculator/calculator.component';
+import {FcCalculatorComponent} from './calculator/calculator-panel.component';
 
 @Component({
   selector: 'application-root',
@@ -43,7 +43,7 @@ export class AppComponent {
       icon: 'icon-analytics-piechart',
     });
     /* Create new panel itself */
-    this.hsPanelContainerService.create(CalculatorComponent, {});
+    this.hsPanelContainerService.create(FcCalculatorComponent, {});
     /* Switch language to cs */
     this.hsEventBus.layoutLoads.subscribe(() => {
       this.hsLanguageService.setLanguage('en');

src/app/app.service.ts

@@ -20,7 +20,7 @@ import {
 } from 'hslayers-ng';
 
 import i18n from './translations.json';
-import {CalculatorService} from './calculator/calculator.service';
+import {FcCalculatorService} from './calculator/calculator.service';
 import {imageWmsTLayer} from './calculator/image-wms-t-layer';
 
 proj4.defs(
@@ -37,7 +37,7 @@ register(proj4);
 export class AppService {
   sjtskProjection = getProjection('EPSG:5514');
   constructor(
-    public calcService: CalculatorService,
+    public calcService: FcCalculatorService,
     public hsConfig: HsConfig,
     public hsEventBus: HsEventBusService,
     public hsLanguageService: HsLanguageService,
@@ -118,6 +118,90 @@ export class AppService {
       console.warn('error when loading LPIS layer');
       console.log(evt);
     });
+    /*const waterThematicLayers = [
+      new Tile({
+        properties: {
+          title:
+            'Vodní útvary povrchových vod karegorie "řeka" včetně silně ovlivněných vodních útvarů a umělých vodních útvarů: 2. plánovací cyklus',
+          //queryCapabilities: false,
+        },
+        source: new TileWMS({
+          url: 'https://heis.vuv.cz/data/webmap/wms.dll?SERVICE=WMS&VERSION=1.3.0&MU=CS&',
+          params: {
+            LAYERS: 'isvs_upovr',
+            INFO_FORMAT: 'text/html',
+            STYLES: 'inspire_common:DEFAULT',
+            FORMAT: 'image/png',
+          },
+          crossOrigin: 'anonymous',
+        }),
+      }),
+      new Tile({
+        properties: {
+          title:
+            'Vodní útvary povrchových vod karegorie "jezero" včetně silně ovlivněných vodních útvarů a umělých vodních útvarů: 2. plánovací cyklus',
+          //queryCapabilities: false,
+        },
+        source: new TileWMS({
+          url: 'https://heis.vuv.cz/data/webmap/wms.dll?SERVICE=WMS&VERSION=1.3.0&MU=CS&',
+          params: {
+            LAYERS: 'isvs_upovj',
+            INFO_FORMAT: 'text/html',
+            STYLES: 'inspire_common:DEFAULT',
+            FORMAT: 'image/png',
+          },
+          crossOrigin: 'anonymous',
+        }),
+      }),
+      new Tile({
+        properties: {
+          title: 'OPVZ - vodárenské nádrže',
+          //queryCapabilities: false,
+        },
+        source: new TileWMS({
+          url: 'https://eagri.cz/public/app/wms/public_zp.fcgi?language=eng&',
+          params: {
+            LAYERS: 'OPVZ_OPVN',
+            STYLES: 'default',
+            FORMAT: 'image/png; mode=8bit',
+            VERSION: '1.3.0',
+          },
+          crossOrigin: 'anonymous',
+        }),
+      }),
+      new Tile({
+        properties: {
+          title: 'OPVZ - podzemní nebo povrchové',
+          //queryCapabilities: false,
+        },
+        source: new TileWMS({
+          url: 'https://eagri.cz/public/app/wms/public_zp.fcgi?language=eng&',
+          params: {
+            LAYERS: 'VODSTVO_BUFF_25M',
+            STYLES: 'default',
+            FORMAT: 'image/png; mode=8bit',
+            VERSION: '1.3.0',
+          },
+          crossOrigin: 'anonymous',
+        }),
+      }),
+      new Tile({
+        properties: {
+          title: 'OPVZ - podzemní nebo povrchové',
+          //queryCapabilities: false,
+        },
+        source: new TileWMS({
+          url: 'https://eagri.cz/public/app/wms/public_zp.fcgi?language=eng&',
+          params: {
+            LAYERS: 'OPVZ_PODZ_POVRCH',
+            STYLES: 'default',
+            FORMAT: 'image/png; mode=8bit',
+            VERSION: '1.3.0',
+          },
+          crossOrigin: 'anonymous',
+        }),
+      }),
+    ];*/
     /* Define and update the HsConfig configuration object */
     this.hsConfig.update(
       {

src/app/calculator/calculator.component.scss → src/app/calculator/calculator-panel.component.scss

@@ -4,14 +4,14 @@
 @import "bootstrap/scss/spinners";
 
 .spinner {
-    width: 3rem;
-    height: 3rem;
-    color: #77bbff;
+  width: 3rem;
+  height: 3rem;
+  color: #77bbff;
 }
 
 .spinner-sm {
-    width: 1rem;
-    height: 1rem;
+  width: 1rem;
+  height: 1rem;
 }
 
 .custom-day {

src/app/calculator/calculator.component.ts → src/app/calculator/calculator-panel.component.ts

@@ -9,27 +9,27 @@ import {
   HsPanelComponent,
 } from 'hslayers-ng';
 
-import {CalculatorService, Index} from './calculator.service';
-import {FieldService} from './field.service';
+import {FcCalculatorService, Index} from './calculator.service';
+import {FcFieldService} from './field.service';
 
 @Component({
   selector: 'calculator-panel',
-  templateUrl: './calculator.component.html',
-  styleUrls: ['./calculator.component.scss'],
+  templateUrl: './calculator-panel.component.html',
+  styleUrls: ['./calculator-panel.component.scss'],
 })
-export class CalculatorComponent implements HsPanelComponent, OnInit {
+export class FcCalculatorComponent implements HsPanelComponent, OnInit {
   data: {
     selectedProduct: Index;
     selectedFieldsProperties: {[x: string]: any}[];
   };
   lpisWfsVisible: boolean;
-  name: 'calculator';
+  name: 'fieldcalc';
   viewRef: ViewRef;
   isVisible$ = new BehaviorSubject<boolean>(true);
 
   constructor(
-    public calcService: CalculatorService,
-    private fieldService: FieldService,
+    public calcService: FcCalculatorService,
+    private fieldService: FcFieldService,
     public hsLanguageService: HsLanguageService,
     public hsLayoutService: HsLayoutService
   ) {

src/app/calculator/calculator.module.ts

@@ -6,7 +6,7 @@ import {TranslateModule} from '@ngx-translate/core';
 
 import {HsPanelHelpersModule} from 'hslayers-ng';
 
-import {CalculatorComponent} from './calculator.component';
+import {FcCalculatorComponent} from './calculator-panel.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -18,7 +18,7 @@ import {CalculatorComponent} from './calculator.component';
     TranslateModule,
   ],
   exports: [],
-  declarations: [CalculatorComponent],
+  declarations: [FcCalculatorComponent],
   providers: [],
 })
 export class CalculatorModule {}

src/app/calculator/calculator.service.ts

@@ -13,8 +13,8 @@ import {
   HsToastService,
 } from 'hslayers-ng';
 
-import {FieldService} from './field.service';
-import {ZonesService} from './zones.service';
+import {FcFieldService} from './field.service';
+import {FcZonesService} from './zones.service';
 import {imageWmsTLayer, imageWmsTSource} from './image-wms-t-layer';
 
 /**
@@ -30,7 +30,7 @@ export type IndexOnTheFly = typeof INDICES_ON_THE_FLY[number];
 export type Index = IndexPreFlight | IndexOnTheFly;
 
 @Injectable({providedIn: 'root'})
-export class CalculatorService {
+export class FcCalculatorService {
   AVAILABLE_PRODUCTS = [...INDICES_PRE_FLIGHT, ...INDICES_ON_THE_FLY].sort();
   BLUR_MIN_VALUE = 1 as const;
   BLUR_MAX_VALUE = 5 as const;
@@ -51,7 +51,7 @@ export class CalculatorService {
   private _zonesLoading: boolean;
 
   constructor(
-    private fieldService: FieldService,
+    private fieldService: FcFieldService,
     private hsCompositionsParserService: HsCompositionsParserService,
     private hsConfig: HsConfig,
     private hsEventBus: HsEventBusService,
@@ -59,7 +59,7 @@ export class CalculatorService {
     private hsMapService: HsMapService,
     private hsToastService: HsToastService,
     private httpClient: HttpClient,
-    private zonesService: ZonesService,
+    private zonesService: FcZonesService,
     private calendar: NgbCalendar
   ) {
     this.dateRangeSelects.subscribe(({date}) => {

src/app/calculator/field.service.ts

@@ -9,7 +9,7 @@ import {transform} from 'ol/proj';
 import {HsEventBusService, HsMapService} from 'hslayers-ng';
 
 @Injectable({providedIn: 'root'})
-export class FieldService {
+export class FcFieldService {
   SELECTABLE_LAYERS = ['LPIS (WFS)'] as const;
   fieldSelects: Subject<{features: Feature<Geometry>[]}> = new Subject();
   selectedFields;

src/app/calculator/zones.service.ts

@@ -16,7 +16,7 @@ import {
 } from 'hslayers-ng';
 
 @Injectable({providedIn: 'root'})
-export class ZonesService {
+export class FcZonesService {
   zonesLayer: VectorLayer<VectorSource<Geometry>>;
   zonesSource: VectorSource<Geometry>;
   zonesStyle: (feature) => Style;

src/bootstrap.ts

@@ -0,0 +1,14 @@
+import {enableProdMode} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {AppModule} from './app/app.module';
+import {environment} from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+setTimeout(() => {
+  const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
+  bootstrap().catch((err) => console.log(err));
+}, 0);

src/main.ts

@@ -1,14 +1 @@
-import {enableProdMode} from '@angular/core';
-import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
-
-import {AppModule} from './app/app.module';
-import {environment} from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-setTimeout(() => {
-  const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
-  bootstrap().catch((err) => console.log(err));
-}, 0);
+import('./bootstrap').catch((err) => console.error(err));