1. Sitecore JavaScript Services SDKs (JSS) 22.x

Upgrade JSS 22.8 Angular apps to version 22.9

Version:

This topic covers most of the changes you must make to your existing JSS 22.8 Angular applications to benefit from the latest improvements in version 22.9. However, because of the nature of JavaScript and Angular application development, this topic doesn't account for all the customization you might have in your existing application.

While upgrading, consider the JSS templates and add-ons you used when creating your Angular application. You can find them in your package.json file. For example, a JSS 22.8 application included in the XM Cloud Angular starter foundation uses the following templates and add-ons:

XM Cloud is now SitecoreAI

Some code examples, images, and UI labels may still use XM Cloud while engineering assets are being updated.

  • angular

  • angular-xmcloud

Before you begin

  • If you haven't already done so, upgrade your app to JSS 22.8.

  • Familiarize yourself with the changelog. If your application is heavily customized, the changelog can provide guidance on what additional changes you need that are not covered in this topic.

This topic describes how to:

  1. Update application dependencies in your existing app

  2. Update the Node XM Cloud proxy app

Update application dependencies in your existing app

For your upgraded application to work correctly, you will need to update dependencies.

To update your dependencies:

  1. In your existing application's package.json file:

    • Update every @sitecore-jss package to version ~22.9.0.

    • Update the following dependencies to the specified versions:

      "core-js": "~3.45.0",
"graphql": "15.10.1",
...
"@sitecore-cloudsdk/core": "^0.5.2",
"@sitecore-cloudsdk/events": "^0.5.2",
...
"rxjs": "~7.8.2",
"tslib": "^2.8.1",
....
"chokidar": "^4.0.3",
...
"dotenv": "^17.2.1",
"dotenv-webpack": ^8.1.1"
...

    • Remove @types/jasminewd2 and protractor dependencies.

    • Remove the e2e script from the scripts section.

    • Add the following section after devDependencies:

      "overrides": {
    "request": {
      "form-data": "^2.5.5"
    }
}

      This addresses a vulnerability in one of the angular-webkit dependencies.

  2. Delete the e2e folder from your existing application.

  3. In your existing application's angular.json file, replace all mentions of browserTarget with buildTarget.

  4. Install the dependencies with the following command:

    npm install

Update the Node XM Cloud proxy app

To update your Node XM Cloud proxy app:

XM Cloud is now SitecoreAI

Some code examples, images, and UI labels may still use XM Cloud while engineering assets are being updated.

  1. In your existing application's package.json file:

    • Update every @sitecore-jss package to version ~22.9.0.

    • Update the following dependencies to the specified versions:

      "compression": "^1.8.1",
"express": "^5.1.0",
"dotenv": "^17.2.1",
"http-proxy-middleware": "^3.0.5"
...
"@types/compression": "^1.8.1",
"@types/express": "^5.0.3",
...
"typescript": "~5.9.2"

  2. In /src/index.ts:

    • Find the following import statement:

      import { createProxyMiddleware, fixRequestBody } from 'http-proxy-middleware';

    • Replace it with the following:

      import { legacyCreateProxyMiddleware as createProxyMiddleware, fixRequestBody } from 'http-proxy-middleware';

  3. If you have any custom logic that uses express or http-proxy-middleware, please refer to their corresponding guides:

  4. Install the dependencies with the following command:

    npm install

Next steps

To finalize the upgrade process, make sure you resolve any errors and warnings you encounter. Enable debug logging for JSS specific issues to assist you if necessary.

If you have suggestions for improving this article, let us know!