JSSアプリをJSS 22.10にアップグレードする

既存のアプリケーションのpackage.jsonファイルで、以下の依存関係を指定されたバージョンに更新してください:

"@angular/animations": "~20.3.10", "@angular/common": "~20.3.10", "@angular/compiler": "~20.3.10", "@angular/core": "~20.3.10", "@angular/forms": "~20.3.10", "@angular/platform-browser": "~20.3.10", "@angular/platform-browser-dynamic": "~20.3.10", "@angular/platform-server": "~20.3.10", "@angular/router": "~20.3.10", .... "apollo-angular": "~11.0.0", ... "graphql": "~16.11.0", ... "zone.js": "~0.15.0", ... "@angular-builders/custom-webpack": "^20.0.0", "@angular-devkit/build-angular": "^20.3.9", "@angular-eslint/builder": "^20.5.1", "@angular-eslint/eslint-plugin": "^20.5.1", "@angular-eslint/eslint-plugin-template": "^20.5.1", "@angular-eslint/schematics": "^20.5.1", "@angular-eslint/template-parser": "^20.5.1", "@angular/cli": "~20.3.9", "@angular/compiler-cli": "~20.3.10", "@angular/language-service": "~20.3.10", ... "typescript": "~5.8.0"

src/appフォルダの中:

• 以下の内容を持つ新しいファイル「 ViewBag.ts 」を追加します。

  export interface ViewBag { key: string: unknown; dictionary: { key: string: string }; }

• 以下の内容を持つ新しいファイル「 injection-tokens.ts 」を追加します。

  import { InjectionToken } from '@angular/core'; import { InMemoryCache } from '@apollo/client/core'; import { JssState } from './JssState'; import { ViewBag } from './ViewBag';

  /** * Injection token for server-side layout data provided by server.bundle */ export const JSS_SERVER_LAYOUT_DATA = new InjectionToken('JSS_SERVER_LAYOUT_DATA');

  export const JSS_SERVER_VIEWBAG = new InjectionToken('JSS_SERVER_VIEWBAG');

  export const APOLLO_CACHE = new InjectionToken('APOLLO_CACHE');

すべてのクラスフィールドインスタンスのフィールド初期化をコンストラクタで置き換えるためにinject() メソッドを用いてください。

例えば、src/app/jss-context.service.tsにおいて、元の構成子は次のように示されました:

constructor(protected transferState: TransferState, protected layoutService: JssLayoutService, protected stateService: JssStateService) {}

ここでのinject() 方法を使うと:

• angularパッケージからメソッドをインポートします:

  import { Injectable, TransferState, makeStateKey, inject } from '@angular/core';

• inject()関数を使って、示すようにコンストラクタからフィールドの初期化を除去します。

  protected transferState = inject(TransferState); protected layoutService = inject(JssLayoutService); protected stateService = inject(JssStateService);

• 上記の手順を、コンポーネントやサービス(例: src/app/jss-context.server.ts、jss-graphql.service.tsファイルなど)の他のアプリロジックについて繰り返します。

declarationsを使うすべての加群については、代わりに の項目をimportsに移動させます。

• 例えば、src/app/routing/routing.module.tsでは、既存の宣言は以下の通りです。

  @NgModule({ imports: .... , exports: ..., declarations: NotFoundComponent, ServerErrorComponent, LayoutComponent, NavigationComponent,

  エントリをインポートに移動してください:

  @NgModule({ imports: ... LayoutComponent, NotFoundComponent, ServerErrorComponent, , exports: RouterModule, TranslateModule, ... })

• 同様に、src/app/routing/scripts/scripts.module.tsでは、ScriptsComponentとVisitorIdentificationComponent (存在する場合は)をdeclarationsからimportsに移動させます。

  @NgModule({ exports: ScriptsComponent, imports: ScriptsComponent, VisitorIdentificationComponent, })

• src/app/components/app-components.shared.module.tsのStyleguideSpecimenComponentや、スタンドアロンにしたい他のコンポーネントモジュールにも同じ手順を行ってください。

app.component.tsファイルは、SSRプロキシのサポート継続とシンプルさのため、スタンドアロンではありません。app.component.ts ファイルには以下の変更を加えてください:

• 示すようにstandalone: falseでコンポーネントをマークしてください

  @Component({ selector: 'app-root', templateUrl: './app.component.html' templateUrl: './app.component.html', /* eslint-disable-next-line @angular-eslint/prefer-standalone */ standalone: false, })

• OnInitインターフェースを実装してください

  export class AppComponent implements OnInit, OnDestroy {

• ngInit()メソッドを加えます:

  ngOnInit() { this.contextSubscription = this.jssContextService.state.subscribe((jssState: { language: string }) => { // listen for language changes if (jssState.language) { this.translate.use(jssState.language); } }); }

• 元のコンストラクタを削除し、inject() メソッドでフィールドを初期化します:

  ... private contextSubscription: Subscription; private translate = inject(TranslateService); private jssContextService = inject(JssContextService); ...

• アプリコンポーネントをスタンドアロンにしないと、declarationsセクションはそのままapp.module.tsにできますが、インジェクショントークンを使うように修正app.server.module.ts必要です。

  既存の文字列トークンを見つける:

  TranslateModule.forRoot({ .... deps: 'JSS_SERVER_VIEWBAG', TransferState, .... }),

  インポートされたトークンオブジェクトに置き換えます:

  import { JSS_SERVER_VIEWBAG } from './src/app/injection-tokens'; .... .... TranslateModule.forRoot({ ... deps: JSS_SERVER_VIEWBAG, TransferState, ... }),

server.bundle.tsファイルでインジェクショントークンを使いましょう:

• インジェクショントークンをインポートする:

  import { JSS_SERVER_LAYOUT_DATA, JSS_SERVER_VIEWBAG } from './src/app/injection-tokens';

• 示すようにrenderModule関数のextraProvidersセクションに注入トークンを追加します。

  renderModule(AppServerModule, { document: template, url: path, extraProviders: // custom injection with the initial state that SSR should utilize { provide: JSS_SERVER_LAYOUT_DATA, useValue: transferState }, { provide: JSS_SERVER_VIEWBAG, useValue: state.viewBag }, , })

アプリのsrc/app/routing/layout/layout.component.tsファイルでは:

• 以下のインポートが存在していることを確認してください:

  import { Component, OnInit, OnDestroy, inject } from '@angular/core'; import { RouteData, Field, LayoutServiceContextData, getContentStylesheetLink, JssModule, } from '@sitecore-jss/sitecore-jss-angular'; ... import { NotFoundComponent } from '../not-found/not-found.component'; import { ServerErrorComponent } from '../server-error/server-error.component'; import { ScriptsComponent } from '../scripts/scripts.component'; ... import { CommonModule } from '@angular/common';

• Component指令の分importsセクションを追加してください:

  @Component({ selector: 'app-layout', templateUrl: './layout.component.html', imports: CommonModule, JssModule, NotFoundComponent, ServerErrorComponent, ScriptsComponent, })

• inject()関数を使って、示すようにコンストラクタからフィールドの初期化を除去します。

  private activatedRoute = inject(ActivatedRoute); private readonly meta = inject(JssMetaService); private linkService = inject(JssLinkService);

アプリのjss-graphql.module.tsファイルでは:

• angularパッケージからinjectをインポートし、apollo-angularパッケージからApolloModuleをprovideApolloに置き換え、示すようにAPOLLO_CACHEインジェクショントークンをインポートします。

  import { makeStateKey, TransferState, NgModule, PLATFORM_ID, inject } from '@angular/core'; .... import { Apollo, provideApollo } from 'apollo-angular'; ... import { APOLLO_CACHE } from './injection-tokens';

• GraphQLModule外に次の2つの新しい関数を追加します:

  const getGraphQLCache = () => { const possibleTypes = {} as PossibleTypesMap; introspectionQueryResultData.__schema.types.forEach((supertype) => { possibleTypessupertype.name = supertype.possibleTypes.map((subtype) => subtype.name); }); return new InMemoryCache({ possibleTypes, }); };

  const getApolloOptions = () => { const httpLink = inject(HttpBatchLink); const platformId = inject(PLATFORM_ID); /* QUERY LINK SELECTION A link is transport which GraphQL queries are pushed across. You have many choices. See the apollo-link documentation for more details. */

  // set sc_apikey header which is required for any GraphQL calls const sc_apikey = new HttpHeaders().set('sc_apikey', environment.sitecoreApiKey);

  // choose between a basic HTTP link to run queries... // import { createHttpLink } from 'apollo-angular-link-http'; // const link = createHttpLink({ uri: endpoint });

  // ...or a batched link (multiple queries within 10ms all go in one HTTP request) const batchHttp = httpLink.create({ uri: environment.graphQLEndpoint, headers: sc_apikey, });

  const cache = inject(APOLLO_CACHE);

  return { link: batchHttp, cache, ssrMode: isPlatformServer(platformId), ssrForceFetchDelay: 100, }; }

• ApolloModuleをimportsから削除し、providersセクションを図のように展開します:

  @NgModule({ imports: HttpClientModule, // provides HttpClient for HttpLink , providers: JssGraphQLService, { provide: APOLLO_CACHE, useValue: getGraphQLCache() }, provideApollo(getApolloOptions), , })

• モジュール構造体を次のように修正します:

  constructor() { this.addCacheEvents(); }

• inject()関数で2つのモジュールフィールドを初期化します:

  private readonly transferState = inject(TransferState); apolloClient = inject(Apollo);

• createApolloClient方法を以下の方法に置き換えます:

  private addCacheEvents(): void { const cache = inject(APOLLO_CACHE);

  const isBrowser = this.transferState.hasKey(STATE_KEY);

  if (isBrowser) { this.onBrowser(cache); } else { this.onServer(cache); } }

アプリのsrc/app/jss-graphql.service.tsファイルで、inject() 関数を使って構成体からフィールド初期化を削除します。

protected apollo = inject(Apollo); protected sitecoreContext = inject(JssContextService); protected platformId = inject(PLATFORM_ID);

コンポーネント内のngIfやngForのすべての使用を新しい@ifおよび@for指示に置き換えることも可能です。その方法については更新されたAngularサンプルをご覧ください。スタンドアロンコンポーネントでNgIfとNgForを使い続けるには、@angular/core packageからngIfとngForをインポートし、コンポーネントのimportsセクションに追加してください:

@Component({ ... imports: NgIf, NgFor, ...., }) export class MyComponent implements .... {...

既存のアプリケーションのpackage.jsonファイルで、すべての @sitecore-jssパッケージをバージョン ~22.10.0に更新してください。

以下のコマンドで依存関係をインストールします:

npm install