---
title: "JSSアプリをJSS 21.8にアップグレードする"
slug: "upgrade-jss-apps-to-jss-21-8"
abstract: "Angular 17を活用するためにJavaScriptレンダリングSDKをバージョン21.8にアップグレードする方法。"
---
# JSSアプリをJSS 21.8にアップグレードする

Sitecore JavaScript Rendering SDKバージョン21.8はAngularのバージョン17のサポートを導入します。アップグレードするには、Angularアプリにいくつかの小さな変更を加える必要があります。

> !注**始める前に**
> 
> -   まだなら、[アプリをJSS 21.7にアップグレード](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/upgrade-jss-apps-to-jss-21-7.html "Upgrade JSS apps to JSS 21.7")してください。
>     
> -   [JSS 21.8のリリースノート](https://github.com/Sitecore/jss/releases/tag/v21.8.0)に慣れておくと良いでしょう。
>     
> -   [Angular 17のリリース発表](https://blog.angular.dev/introducing-angular-v17-4d7033312e4b)を読んでください。
>     

Angularアプリを更新するには:

1.  TypeScriptを ~5.2.2に更新してください。
    
2.  Angularおよびそのすべてのコア依存関係をバージョン17に更新し、関連する依存関係も含めて。以下のリストはリリース時点の必要バージョンを示しています:
    
    -   角度的な主要依存関係:
        
        "@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開発依存関係:
        
        "@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",
        
    -   その他の主な依存関係:
        
        "@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",
        
    -   その他の開発依存関係:
        
        "@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",
        
    -   残っているすべての依存関係は現在のバージョンのままにしておけます。
        
3.  /server.bundle.tsを以下のように修正してください:
    
    -   以下のimport文を探してください。
        
        import 'zone.js/dist/zone-node';
        
    -   その文を次の文に置き換えてください。
        
        import 'zone.js';
        
4.  src/polyfills.tsを以下のように修正してください:
    
    -   以下のimport文があれば、その点を探して削除してください。
        
        import 'zone.js/dist/zone';
        
    -   新しいimport文を追加してください:
        
        import 'zone.js';
        
5.  src/test.tsを以下のように修正してください:
    
    -   zone.js/distを含むimport文を見つけて削除してください。
        
    -   新しいimport文を追加してください:
        
        import 'zone.js/testing';
        
6.  既存のアプリにAngular 17アップグレードで影響を受ける可能性のある他のカスタマイズ要素がある場合は、追加の変更点については[Angular 17アップグレードガイド](https://angular.dev/update-guide?v=16.0-17.0) を参照してください。
    
7.  既存のアプリケーションのpackage.jsonファイルで、すべての @sitecore-jssパッケージをバージョン ~21.8.0に更新してください。
    
8.  以下のコマンドで依存関係をインストールします:
    
    npm install