Upgrading Angular 11 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 from Angular 11 to Angular 17. The following steps 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.

JIT (Just in time compile) extension

  1. Replace @Injectable(() with @Injectable({ providedIn:'root' }) in all custom Angular services.
    Note: This change is only required if custom services exist in the JIT extension.
  2. Bootstrap and the Precisely design system have been upgraded in the 2025.1 release. These changes might affect the appearance or layout of your extension. If you notice any UI issues, resolve them in the extension code based on which part of Bootstrap and design system the extension uses.

AOT (Ahead of time) extension

  1. Replace @Injectable(() with @Injectable({ providedIn: 'root' }) in all custom Angular services.
  2. In the webpack--config file, replace AngularCompilerPlugin with AngularWebpackPlugin, and replace loader: "raw-loader" with use: "raw-loader".
  3. In public-api.ts, export both the extension module and its component registered in CustomAnalystModuleConfig.json: 
    export { McModule } from './lib/mc.module';
export { McComponent } from './lib/mc.component';
  4. If the following dependencies and dev dependencies are being used, install the versions listed below:

    Dependencies:

    "@ng-select/ng-select": "^12.0.7"
"@ngrx/store": "^17.2.0"
"@ngrx/effects": "^17.2.0"
"@ngrx/router-store": "^17.2.0"
"@ngx-translate/core": "^16.0.4"
"@ngx-translate/http-loader": "^16.0.1"
"angular2-multiselect-dropdown": "^9.0.0"
"chart.js": "^3.9.1"
"ng2-google-charts": "^7.0.0"
"ngx-bootstrap": "^12.0.0"
"ngx-color": "^9.0.0"
"primeng": "^17.18.10"
"rxjs": "^6.6.7"

    Dev dependencies:

    "@types/jasmine": "^5.1.5"
"@types/node": "^20.14.11"
"@typescript-eslint/eslint-plugin": "^7.16.1"
"@typescript-eslint/parser": "^7.16.1"
"eslint": "^8.57.0"
"jasmine-core": "^5.6.0"
"jasmine-spec-reporter": "^7.0.0"
"karma": "~6.3.2"
"karma-jasmine": "^5.1.0"
"karma-jasmine-html-reporter": "^2.1.0"
"typescript": "5.4.5"
"webpack": "^5.97.1"s
  5. Bootstrap and the Precisely design system have been upgraded in the 2025.1 release. These changes might affect the appearance or layout of your extension. If you notice any UI issues, resolve them in the extension code based on which part of Bootstrap and design system the extension uses.