Upgrading Angular 4 to Angular 17 - Latest

Spectrum Spatial Analyst Extensibility Guide
Product type
Software
Portfolio
Locate
Product family
Spectrum™ software
Product
Spectrum™ software > Spatial > Spectrum Spatial Analyst
Version
Latest
ft:locale
en-US
Product name
Spectrum Spatial Analyst
ft:title
Spectrum Spatial Analyst Extensibility Guide
Copyright
2025
First publish date
2007
ft:lastEdition
2025-10-28
ft:lastPublication
2025-10-28T15:15:05.535000
L1_Product_Gateway
L2_Product_Segment
L3_Product_Brand
L4_Investment_Segment
L5_Product_Group
L6_Product_Name

Spectrum Spatial Analyst enables you to migrate your existing extensible components to Angular 17. The following sections will help you successfully migrate your components.

You need to make the following changes to run the extensible components in the migrated Spectrum Spatial Analyst application.

1. NgRx Store

The NgRx Store has been migrated from version 2.2.3 to version 17.2.0. This upgrade requires some syntax changes as explained below:

  • First change: Remove the new operator while dispatching the action. This is must for every action’s dispatch that you are using in your extensible component.

    In Angular 4, whenever you dispatched an action, you would use the below syntax:
    this.store.dispatch(new actionName(payload));
    Now, you need to remove the new operator in Spectrum Spatial Analyst Angular 17’s extensible components so that it looks like:
    this.store.dispatch(actionName(payload));
    To create a query in Spectrum Spatial Analyst make the changes as described in the table below.
    To create a query layer in Angular 4 To create a query layer in Angular 17 
    const params = {
query: "SELECT Country,Capital,Continent  
FROM \"/Samples/NamedTables/WorldTable\" 
WHERE Lower(Country) LIKE Lower('%In%')",
layerName: "Country", 
name: "Countries name containing 'In'", 
addToMap: addToMap,
getResult: getResult,
orderIndex: 0,
replaceCurrentLegend: false,
customComponentData: { customDataObj: "customDataObj" }
};
this.store.dispatch(new ExecuteQueryAction(params));
    		 
    this.store.dispatch(ExecuteQueryAction(params)); 
// No change in the payload passed to ExecuteQueryAction. 
Only change is removing the new operator.
  • Second change: Modify the payload passed to action while dispatching it. It is required only when your payload is of type string, number, Boolean or an array. If the payload is of type JSON object like in the above example of query, then there is no need to make any change in the payload. For example, 
    this.store.dispatch(new ToggleResourceSelectorVisiblity(true));
    To dispatch action when payload is of type Boolean:
    Angular 4 Angular 17 
    this.store.dispatch(new
ToggleResourceSelectorVisiblity(true));
    		 
    this.store.dispatch(ToggleResourceSelectorVisiblity(
{toggleVisiblity: true} ));
    So, if the payload is of primitive type like Boolean, make the following changes:
    • Remove the new operator as explained above.
    • Wrap the Boolean payload in a JSON object. The key which has been introduced for ToggleResourceSelectorVisiblity action is toggleVisiblity. Each actions have different key name, refer to the API documentation for details on actions and the corresponding keys.

2. RxJS

It has been migrated from version 5.4.2 to 6.6.7 and requires the following changes:

  • First change: If you are using map, mergeMap, concatMap, switchMap etc. operators of RxJS in your extensible component, then you have to use pipe operator as shown below:
    Using RxJS map operator in Angular 4 Using RxJS map operator in Angular 17 
    this.xhrIncokerService.invokeController
(options).map((data ) => {
//logic 
});
    		 
    this.xhrIncokerService.invokeController
(options).pipe(map( (data)=> {; //logic });

  • Second change: Importing RxJS operators has also changed. To import certain operators like map, mergeMap, concatMap, and switchMap you can use the following code:

    Importing RxJS operators in Angular 4 Importing RxJS operators in Angular 17 
    // Old version
import { Observable } from 'rxjs/Observable'; 
// Old version
import { Subject } from 'rxjs/Subject';  
// Old version
import { Observer } from 'rxjs/Observer'; 
    // Latest version;
import { map, mergeMap, switchMap, concatMap }  from 'rxjs/operators'; 
importing very commonly used Rxjs stuff like Observable,  Subscription, Subject 
import {Observable, Subject, Observer, Subscription, of } from 'rxjs';

You can refer to RxJS documentation for the latest updates.

3. Open Layers

It has been migrated from 4.2.0 to 6.5.0 and requires the following changes.
Using open layers in 4.2.0 Using open layers in 6.5.0 
import * as ol from 'openlayers';
const vectorSource = new ol.source.Vector();
const point_feature = new ol.Feature({});
const point_geom = new ol.geom.Point([2.0000000000345, 1.0000000245]);
point_feature.setGeometry(point_geom);
vectorSource.addFeature(point_feature);
const layer = new ol.layer.Vector({ source: vectorSource});
const map = new ol.Map({
       layers: [layer],
	interactions: ol.interaction.defaults({
	doubleClickZoom: false,
	shiftDragZoom: false,
	keyboard: false,
	mouseWheelZoom: false,
	pinchZoom: false     
	}),
	target: 'map'
       });
 
import { Map, Feature } from 'ol';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Point from 'ol/geom/Point';
import { defaults } from 'ol/interaction';
const vectorSource = new VectorSource();
const point_feature = new Feature({});
const point_geom = new Point([2.0000000000345, 1.0000000245]);
point_feature.setGeometry(point_geom);
vectorSource.addFeature(point_feature);
const layer = new VectorLayer({ source: vectorSource });
		const map = new Map({
             layers: [layer],
		interactions: defaults({
		doubleClickZoom: false,
		shiftDragZoom: false,
             keyboard: false,
		mouseWheelZoom: false,
		pinchZoom: false
		}),
		target: 'map'
		});

4. Third-party libraries

Spectrum Spatial Analyst provides you various third-party libraries. Those libraries have been upgraded. If your extensible components use those libraries, you need to modify the syntax according to their updated syntax. The following third-party libraries have been upgraded.

  • "primeng": "^17.18.10"
  • "ngx-bootstrap": "^12.0.0"
  • "@ngx-translate/core": "^16.0.4"
  • "@ngx-translate/http-loader": "^16.0.1"
  • "ng2-google-charts": "7.0.0"
Note: Refer to the official documentation of these plugins to get the latest syntax.

5. Angular Framework and dependencies upgrade

If you have set up a local dev environment to create or edit extensible components, then you need to upgrade the following:

  • Angular framework -> 17
  • NgRxStore -> 17.2.0
  • RxJS -> 6.6.7
  • Openlayers -> 6.5.0

6. Additional required change

Add @Injectable({ providedIn: 'root' }) at the top of each custom Angular service class as a decorator.