1. Sitecore JavaScript Services SDK (JSS)

Upgrade JSS apps to JSS 21.8

Version:

Sitecore JavaScript Rendering SDKs version 21.8 introduces support for version 17 of Angular. To upgrade, you will need to make some minor changes to your Angular apps.

Before you begin

To update your Angular apps:

  1. Update TypeScript to ~5.2.2.

  2. Update Angular and all of its core dependencies to version 17, along with any related dependencies. The following list shows the required versions at time of release:

    • Angular main dependencies:

      "@angular/animations": "~17.3.12",
"@angular/common": "~17.3.12",
"@angular/compiler": "~17.3.12",
"@angular/core": "~17.3.12",
"@angular/forms": "~17.3.12",
"@angular/platform-browser": "~17.3.12",
"@angular/platform-browser-dynamic": "~17.3.12",
"@angular/platform-server": "~17.3.12",
"@angular/router": "~17.3.12",

    • Angular dev dependencies:

      "@angular-builders/custom-webpack": "^17.0.2",
"@angular-devkit/build-angular": "^17.3.10",
"@angular-eslint/builder": "^17.5.3",
"@angular-eslint/eslint-plugin": "^17.5.3",
"@angular-eslint/eslint-plugin-template": "^17.5.3",
"@angular-eslint/schematics": "^17.5.3",
"@angular-eslint/template-parser": "^17.5.3",
"@angular/cli": "~17.3.10",
"@angular/compiler-cli": "~17.3.12",
"@angular/language-service": "~17.3.12",

    • Other main dependencies:

      "@ngx-translate/core": "~15.0.0",
"@ngx-translate/http-loader": "~8.0.0",
"apollo-angular": "~6.0.0",
"bootstrap": "^5.3.3",
"core-js": "~3.37.1",
"tslib": "^2.6.3",
"zone.js" "~0.14.7",

    • Other dev dependencies:

      "@types/node": "~20.14.10",
"@typescript-eslint/eslint-plugin": "^7.16.0",
"@typescript-eslint/parser": "^7.16.0",
"body-parser": "~1.20.2",
"eslint": "^8.56.0",
"eslint-plugin-import": "2.29.1",
"eslint-plugin-jsdoc": "48.7.0",

    • All remaining dependencies can be left at their current versions.

  3. Modify /server.bundle.ts as follows:

    • Locate the following import statement:

      import 'zone.js/dist/zone-node';

    • Replace that statement with the following:

      import 'zone.js';

  4. Modify src/polyfills.ts as follows:

    • Locate and remove the following import statements, if present:

      import 'zone.js/dist/zone';

    • Add a new import statement as follows:

      import 'zone.js';

  5. Modify src/test.ts as follows:

    • Locate and remove any import statements containing zone.js/dist.

    • Add a new import statement as follows:

      import 'zone.js/testing';

  6. If your existing app has other customizations that might be affected by the Angular 17 upgrade, refer to the Angular 17 upgrade guide for guidance on what further changes are required.

  7. In your existing application's package.json file, update every @sitecore-jss package to version ~21.8.0.

  8. Install the dependencies with the following command:

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