create-sitecore-jss 22.10.0-canary.1 → 22.10.0-canary.10

package/dist/templates/angular/src/app/components/app-components.shared.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule } from '@angular/router';
+import { StyleguideSpecimenComponent } from './shared/styleguide-specimen/styleguide-specimen.component';
 import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 
 /*
@@ -13,8 +14,20 @@ import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
   Don't want code generation? See ./.gitignore for instructions to turn it off.
 */
 @NgModule({
-  imports: [CommonModule, TranslateModule, RouterModule, JssModule, FormsModule],
-  exports: [CommonModule, TranslateModule, RouterModule, FormsModule],
-  declarations: [],
+  imports: [
+    CommonModule,
+    TranslateModule,
+    RouterModule,
+    JssModule,
+    FormsModule,
+    StyleguideSpecimenComponent
+  ],
+  exports: [
+    CommonModule,
+    TranslateModule,
+    RouterModule,
+    FormsModule,
+    StyleguideSpecimenComponent
+  ],
 })
 export class AppComponentsSharedModule {}

package/dist/templates/angular/src/app/components/content-block/content-block.component.ts

@@ -1,9 +1,10 @@
 import { Component, Input } from '@angular/core';
-import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
+import { ComponentRendering, JssModule } from '@sitecore-jss/sitecore-jss-angular';
 
 @Component({
   selector: 'app-content-block',
   templateUrl: './content-block.component.html',
+  imports: [JssModule]
 })
 export class ContentBlockComponent {
   @Input() rendering: ComponentRendering;

package/dist/templates/angular/src/app/i18n/jss-translation-client-loader.service.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @angular-eslint/prefer-inject */
 import { Injectable, TransferState } from '@angular/core';
 import { TranslateLoader } from '@ngx-translate/core';
 import { DictionaryPhrases } from '@sitecore-jss/sitecore-jss-angular';
@@ -8,8 +9,8 @@ import { dictionaryStateKey } from './jss-translation-server-loader.service';
 @Injectable()
 export class JssTranslationClientLoaderService implements TranslateLoader {
   constructor(
-    private fallbackLoader: JssTranslationLoaderService,
-    private transferState: TransferState
+    protected fallbackLoader: JssTranslationLoaderService,
+    protected transferState: TransferState
   ) {}
 
   getTranslation(lang: string): Observable<DictionaryPhrases> {

package/dist/templates/angular/src/app/i18n/jss-translation-server-loader.service.ts

@@ -1,4 +1,5 @@
-import { Inject, Injectable, makeStateKey, StateKey, TransferState } from '@angular/core';
+/* eslint-disable @angular-eslint/prefer-inject */
+import { Injectable, makeStateKey, StateKey, TransferState } from '@angular/core';
 import { TranslateLoader } from '@ngx-translate/core';
 import { DictionaryPhrases } from '@sitecore-jss/sitecore-jss-angular';
 import { of as observableOf, EMPTY } from 'rxjs';
@@ -11,10 +12,13 @@ export const dictionaryStateKey: StateKey<DictionaryPhrases> = makeStateKey<Dict
 export class JssTranslationServerLoaderService implements TranslateLoader {
   constructor(
     // this initial state from sitecore is injected by server.bundle for "integrated" mode
-    @Inject('JSS_SERVER_VIEWBAG')
-    private serverViewBag: { [key: string]: unknown; dictionary: DictionaryPhrases },
-    private transferState: TransferState
+    protected serverViewBag: {
+      [key: string]: unknown;
+      dictionary: { [key: string]: string };
+    },
+    protected transferState: TransferState
   ) {}
+
   getTranslation(_lang: string) {
     // read initial dictionary from data injected via server.bundle wrapper
     const dictionary = this.serverViewBag.dictionary;

package/dist/templates/angular/src/app/injection-tokens.ts

@@ -0,0 +1,13 @@
+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<JssState>('JSS_SERVER_LAYOUT_DATA');
+
+export const JSS_SERVER_VIEWBAG = new InjectionToken<ViewBag>('JSS_SERVER_VIEWBAG');
+
+export const APOLLO_CACHE = new InjectionToken<InMemoryCache>('APOLLO_CACHE');

package/dist/templates/angular/src/app/jss-context.server-side.service.ts

@@ -1,9 +1,10 @@
-import { Injectable, Inject, TransferState } from '@angular/core';
+import { Injectable, inject, TransferState } from '@angular/core';
 import { JssContextService, jssKey } from './jss-context.service';
 import { JssState } from './JssState';
 import { Observable, of as observableOf } from 'rxjs';
 import { JssLayoutService } from './layout/jss-layout.service';
 import { JssStateService } from '@sitecore-jss/sitecore-jss-angular';
+import { JSS_SERVER_LAYOUT_DATA } from './injection-tokens';
 
 /**
  * Stores the JSS app's context (current route and Sitecore context data).
@@ -12,15 +13,12 @@ import { JssStateService } from '@sitecore-jss/sitecore-jss-angular';
  */
 @Injectable()
 export class JssContextServerSideService extends JssContextService {
-  constructor(
-    protected transferState: TransferState,
-    protected layoutService: JssLayoutService,
-    protected stateService: JssStateService<JssState>,
-    // this initial state from sitecore is injected by server.bundle for "integrated" mode
-    @Inject('JSS_SERVER_LAYOUT_DATA') private serverToSsrState: JssState
-  ) {
-    super(transferState, layoutService, stateService);
-  }
+  protected transferState = inject(TransferState);
+  protected layoutService = inject(JssLayoutService);
+  // this initial state from sitecore is injected by server.bundle for "integrated" mode
+  protected stateService = inject(JssStateService<JssState>);
+  protected serverToSsrState = inject(JSS_SERVER_LAYOUT_DATA);
+
   changeRoute(_route: string, _language: string): Observable<JssState> {
     // console.log('Server route change to ' + route);
 

package/dist/templates/angular/src/app/jss-context.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, TransferState, makeStateKey } from '@angular/core';
+import { Injectable, TransferState, makeStateKey, inject } from '@angular/core';
 import { LayoutServiceData, JssStateService } from '@sitecore-jss/sitecore-jss-angular';
 import { map, shareReplay, catchError } from 'rxjs/operators';
 import { Observable, of as observableOf } from 'rxjs';
@@ -22,8 +22,10 @@ export class JssContextService {
   get stateValue() {
     return this.stateService.stateValue;
   }
-  constructor(protected transferState: TransferState, protected layoutService: JssLayoutService, protected stateService: JssStateService<JssState>) {
-  }
+
+  protected transferState = inject(TransferState);
+  protected layoutService = inject(JssLayoutService);
+  protected stateService = inject(JssStateService<JssState>);
 
   changeLanguage(language: string) {
     this.stateService.setState({ ...this.stateService.stateValue, language });
@@ -63,7 +65,7 @@ export class JssContextService {
     );
 
     // subscribe to it ourselves so we can maintain current state
-    jssState$.subscribe((jssState) => {
+    jssState$.subscribe((jssState: JssState) => {
       this.stateService.setState(jssState);
     });
 

package/dist/templates/angular/src/app/jss-graphql.module.ts

@@ -1,7 +1,7 @@
-import { makeStateKey, TransferState, NgModule, PLATFORM_ID, Inject } from '@angular/core';
+import { makeStateKey, TransferState, NgModule, PLATFORM_ID, inject } from '@angular/core';
 import { HttpClientModule, HttpHeaders } from '@angular/common/http';
 import { InMemoryCache, NormalizedCacheObject, PossibleTypesMap } from '@apollo/client/core';
-import { Apollo, ApolloModule } from 'apollo-angular';
+import { Apollo, provideApollo } from 'apollo-angular';
 import { HttpBatchLink } from 'apollo-angular/http';
 import { isPlatformServer } from '@angular/common';
 import { environment } from '../environments/environment';
@@ -14,28 +14,73 @@ import { JssGraphQLService } from './jss-graphql.service';
   If this file does not exist, you may need to run the `jss graphql:update` script.
 */
 import introspectionQueryResultData from '../graphql-fragment-types';
+import { APOLLO_CACHE } from './injection-tokens';
 
 // SSR transfer state key to serialize + rehydrate apollo cache on client side
 // See https://www.apollographql.com/docs/angular/recipes/server-side-rendering.html
 const STATE_KEY = makeStateKey<NormalizedCacheObject>('apollo.state');
 
+const getGraphQLCache = () => {
+  const possibleTypes = {} as PossibleTypesMap;
+  introspectionQueryResultData.__schema.types.forEach((supertype) => {
+    possibleTypes[supertype.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,
+  };
+}
+
 @NgModule({
   imports: [
-    ApolloModule,
     HttpClientModule, // provides HttpClient for HttpLink
   ],
-  providers: [JssGraphQLService],
+  providers: [
+    JssGraphQLService,
+    { provide: APOLLO_CACHE, useValue: getGraphQLCache() },
+    provideApollo(getApolloOptions),
+  ],
 })
 export class GraphQLModule {
-  constructor(
-    private readonly apollo: Apollo,
-    private readonly httpLink: HttpBatchLink,
-    private readonly transferState: TransferState,
-    @Inject(PLATFORM_ID) private readonly platformId: string
-  ) {
-    this.createApolloClient();
+  constructor() {
+    this.addCacheEvents();
   }
 
+  private readonly transferState = inject(TransferState);
+  apolloClient = inject(Apollo);
+
   onServer(cache: InMemoryCache) {
     this.transferState.onSerialize(STATE_KEY, () => cache.extract());
   }
@@ -46,43 +91,8 @@ export class GraphQLModule {
     cache.restore(state);
   }
 
-  private createApolloClient(): void {
-    /*
-      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 = this.httpLink.create({
-      uri: environment.graphQLEndpoint,
-      headers: sc_apikey,
-    });
-
-    const possibleTypes = {} as PossibleTypesMap;
-
-    introspectionQueryResultData.__schema.types.forEach((supertype) => {
-      possibleTypes[supertype.name] = supertype.possibleTypes.map((subtype) => subtype.name);
-    });
-
-    const cache = new InMemoryCache({
-      possibleTypes,
-    });
-
-    this.apollo.create({
-      link: batchHttp,
-      cache,
-      ssrMode: isPlatformServer(this.platformId),
-      ssrForceFetchDelay: 100,
-    });
+  private addCacheEvents(): void {
+    const cache = inject(APOLLO_CACHE);
 
     const isBrowser = this.transferState.hasKey(STATE_KEY);
 

package/dist/templates/angular/src/app/jss-graphql.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, PLATFORM_ID, Inject, } from '@angular/core';
+import { Injectable, PLATFORM_ID, inject, } from '@angular/core';
 import { Apollo } from 'apollo-angular';
 import { ExtraSubscriptionOptions, EmptyObject, MutationResult } from 'apollo-angular/types';
 import {
@@ -36,16 +36,16 @@ export interface JssGraphQLOptions {
 export class JssGraphQLService {
   private isEditingOrPreviewingAndSsr: boolean;
 
-  constructor(
-    private readonly apollo: Apollo,
-    private readonly sitecoreContext: JssContextService,
-    @Inject(PLATFORM_ID) private readonly platformId: string,
-  ) {
+  constructor() {
     this.isEditingOrPreviewingAndSsr =
       isPlatformServer(this.platformId) &&
       this.sitecoreContext.stateValue.sitecore.context.pageState !== 'normal';
   }
 
+  protected apollo = inject(Apollo);
+  protected sitecoreContext = inject(JssContextService);
+  protected platformId = inject(PLATFORM_ID);
+
   private static extractVariableNames(query: DocumentNode) {
     const variableNames: { [key: string]: boolean } = {};
     query.definitions

package/dist/templates/angular/src/app/jss-meta.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
 
 export interface MetaSettings {
@@ -7,7 +7,8 @@ export interface MetaSettings {
 
 @Injectable()
 export class JssMetaService {
-  constructor(private titleService: Title, private meta: Meta) {}
+  protected titleService = inject(Title);
+  protected meta = inject(Meta);
 
   setTitle(title?: string) {
     this.titleService.setTitle(title);

package/dist/templates/angular/src/app/routing/layout/layout.component.ts

@@ -1,10 +1,15 @@
 /* eslint-disable no-shadow, no-console */
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { RouteData, Field, LayoutServiceContextData } from '@sitecore-jss/sitecore-jss-angular';
+import { Component, OnInit, OnDestroy, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouteData, Field, LayoutServiceContextData, JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { JssState } from '../../JssState';
 import { JssMetaService } from '../../jss-meta.service';
+import { NotFoundComponent } from '../not-found/not-found.component';
+import { ServerErrorComponent } from '../server-error/server-error.component';
+import { ScriptsComponent } from '../scripts/scripts.component';
+import { NavigationComponent } from '../navigation/navigation.component';
 
 enum LayoutState {
   Layout,
@@ -20,6 +25,7 @@ interface RouteFields {
 @Component({
   selector: 'app-layout',
   templateUrl: './layout.component.html',
+  imports: [CommonModule, JssModule, NotFoundComponent, ServerErrorComponent, ScriptsComponent, NavigationComponent]
 })
 export class LayoutComponent implements OnInit, OnDestroy {
   route: RouteData<RouteFields>;
@@ -27,8 +33,8 @@ export class LayoutComponent implements OnInit, OnDestroy {
   LayoutState = LayoutState;
   subscription: Subscription;
   errorContextData: LayoutServiceContextData;
-
-  constructor(private activatedRoute: ActivatedRoute, private readonly meta: JssMetaService) {}
+  private activatedRoute = inject(ActivatedRoute);
+  private readonly meta = inject(JssMetaService);
 
   ngOnInit() {
     // route data is populated by the JssRouteResolver

package/dist/templates/angular/src/app/routing/navigation/navigation.component.ts

@@ -1,7 +1,10 @@
 import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
+  imports: [RouterModule, TranslateModule]
 })
 export class NavigationComponent {}

package/dist/templates/angular/src/app/routing/not-found/not-found.component.ts

@@ -3,7 +3,7 @@ import { LayoutServiceContextData } from '@sitecore-jss/sitecore-jss-angular';
 
 @Component({
   selector: 'app-not-found',
-  templateUrl: './not-found.component.html',
+  templateUrl: './not-found.component.html'
 })
 export class NotFoundComponent {
   @Input() errorContextData: LayoutServiceContextData;

package/dist/templates/angular/src/app/routing/routing.module.ts

@@ -7,9 +7,7 @@ import { jssRouteResolver } from './jss-route-resolver.service';
 import { JssRouteBuilderService } from './jss-route-builder.service';
 import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { BrowserModule } from '@angular/platform-browser';
-import { NavigationComponent } from './navigation/navigation.component';
 import { TranslateModule } from '@ngx-translate/core';
-import { ScriptsModule } from './scripts/scripts.module';
 
 export function jssRouteMatcher(url: UrlSegment[]): UrlMatchResult {
   // use the route builder to parse out language / server route
@@ -54,10 +52,11 @@ const routes: Routes = [
     JssModule,
     TranslateModule,
     BrowserModule,
-    ScriptsModule,
+    LayoutComponent,
+    NotFoundComponent,
+    ServerErrorComponent,
   ],
   exports: [RouterModule, TranslateModule],
-  declarations: [NotFoundComponent, ServerErrorComponent, LayoutComponent, NavigationComponent],
   providers: [JssRouteBuilderService],
 })
 export class RoutingModule {}

package/dist/templates/angular/src/app/routing/scripts/scripts.module.ts

@@ -3,6 +3,6 @@ import { ScriptsComponent } from './scripts.component';
 
 @NgModule({
   exports: [ScriptsComponent],
-  declarations: [ScriptsComponent],
+  imports: [ScriptsComponent],
 })
 export class ScriptsModule {}

package/dist/templates/angular-sxp/src/app/components/app-components.shared.module.ts

@@ -20,6 +20,7 @@ import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
     RouterModule,
     JssModule,
     FormsModule,
+    StyleguideSpecimenComponent
   ],
   exports: [
     CommonModule,
@@ -28,8 +29,5 @@ import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
     FormsModule,
     StyleguideSpecimenComponent
   ],
-  declarations: [
-    StyleguideSpecimenComponent
-  ],
 })
 export class AppComponentsSharedModule { }

package/dist/templates/angular-sxp/src/app/components/graph-ql-connected-demo/graph-ql-connected-demo.component.html

@@ -9,47 +9,49 @@
     the cache. Consult the Apollo documentation for details.
   </p>
 
-  <div *ngIf="query$ | async as queryResult; else loading">
+  @if (query$ | async; as queryResult) {
     <div>
-      <h4>Datasource Item (via Connected GraphQL)</h4>
-      id: {{ queryResult.data.datasource.id }}
-      <br />
-      name: {{ queryResult.data.datasource.name }}
-      <br />
-      sample1: {{ queryResult.data.datasource.sample1.value }}
-      <br />
-      sample1 (editable): <span *scText="queryResult.data.datasource.sample1.jsonValue"></span>
-      <br />
-      sample2:<br />
-      <ul>
-        <li>text: {{ queryResult.data.datasource.sample2.text }}</li>
-        <li>url: {{ queryResult.data.datasource.sample2.url }}</li>
-        <li>target: {{ queryResult.data.datasource.sample2.target }}</li>
-        <li>
-          editable: <a *scLink="queryResult.data.datasource.sample2.jsonValue"></a>
-        </li>
-        <li>field type: {{ queryResult.data.datasource.sample2.definition.type }}</li>
-        <li>field is shared?: {{ queryResult.data.datasource.sample2.definition.shared.toString() }}</li>
-      </ul>
-    </div>
+      <div>
+        <h4>Datasource Item (via Connected GraphQL)</h4>
+        id: {{ queryResult.data.datasource.id }}
+        <br />
+        name: {{ queryResult.data.datasource.name }}
+        <br />
+        sample1: {{ queryResult.data.datasource.sample1.value }}
+        <br />
+        sample1 (editable): <span *scText="queryResult.data.datasource.sample1.jsonValue"></span>
+        <br />
+        sample2:<br />
+        <ul>
+          <li>text: {{ queryResult.data.datasource.sample2.text }}</li>
+          <li>url: {{ queryResult.data.datasource.sample2.url }}</li>
+          <li>target: {{ queryResult.data.datasource.sample2.target }}</li>
+          <li>
+            editable: <a *scLink="queryResult.data.datasource.sample2.jsonValue"></a>
+          </li>
+          <li>field type: {{ queryResult.data.datasource.sample2.definition.type }}</li>
+          <li>field is shared?: {{ queryResult.data.datasource.sample2.definition.shared.toString() }}</li>
+        </ul>
+      </div>
 
-    <div>
-      <h4>Route Item (via Connected GraphQL)</h4>
-      id: {{ queryResult.data.contextItem.id }}
-      <br />
-      page title: {{ queryResult.data.contextItem.pageTitle.value }}
-      <br />
-      children:
-      <ul>
-        <li *ngFor="let child of queryResult.data.contextItem.children.results">
-          <a [routerLink]="child.url.path">{{ child.pageTitle.value }}</a>
-          (editable title too! <span *scText="child.pageTitle.jsonValue"></span>)
-        </li>
-      </ul>
+      <div>
+        <h4>Route Item (via Connected GraphQL)</h4>
+        id: {{ queryResult.data.contextItem.id }}
+        <br />
+        page title: {{ queryResult.data.contextItem.pageTitle.value }}
+        <br />
+        children:
+        <ul>
+          @for (child of queryResult.data.contextItem.children.results; track child) {
+            <li>
+              <a [routerLink]="child.url.path">{{ child.pageTitle.value }}</a>
+              (editable title too! <span *scText="child.pageTitle.jsonValue"></span>)
+            </li>
+          }
+        </ul>
+      </div>
     </div>
-  </div>
-
-  <ng-template #loading>
+  } @else {
     <p class="alert alert-info">GraphQL query is loading...</p>
-  </ng-template>
+  }
 </div>

package/dist/templates/angular-sxp/src/app/components/graph-ql-connected-demo/graph-ql-connected-demo.component.ts

@@ -1,5 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
+import { Component, Input, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ComponentRendering, JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { DocumentNode } from 'graphql';
 import { JssGraphQLService } from '../../jss-graphql.service';
 import { ApolloQueryResult } from '@apollo/client/core';
@@ -14,6 +15,7 @@ const ComponentQuery: DocumentNode = require('graphql-tag/loader!./graph-ql-conn
 @Component({
   selector: 'app-graph-ql-connected-demo',
   templateUrl: './graph-ql-connected-demo.component.html',
+  imports: [CommonModule, JssModule]
 })
 export class GraphQLConnectedDemoComponent implements OnInit {
   @Input() rendering: ComponentRendering;
@@ -22,7 +24,7 @@ export class GraphQLConnectedDemoComponent implements OnInit {
   // inject the JssGraphQLService to make GraphQL queries
   // note that it's possible to use Apollo directly, but the JSS
   // service provides automatic GraphQL variables and SSR assistance.
-  constructor(private graphQLService: JssGraphQLService) {}
+  private graphQLService = inject(JssGraphQLService);
 
   ngOnInit(): void {
     // the query result is an Rx Observable, so any observable patterns

package/dist/templates/angular-sxp/src/app/components/graph-ql-integrated-demo/graph-ql-integrated-demo.component.html

@@ -38,10 +38,12 @@
     <br />
     children:
     <ul>
-      <li *ngFor="let child of queryResult.data.contextItem.children.results">
-        <a [routerLink]="child.url.path">{{ child.pageTitle.value }}</a>
-        (editable title too! <span *scText="child.pageTitle.jsonValue"></span>)
-      </li>
+      @for (child of queryResult.data.contextItem.children.results; track child) {
+        <li>
+          <a [routerLink]="child.url.path">{{ child.pageTitle.value }}</a>
+          (editable title too! <span *scText="child.pageTitle.jsonValue"></span>)
+        </li>
+      }
     </ul>
   </div>
 </div>

package/dist/templates/angular-sxp/src/app/components/graph-ql-integrated-demo/graph-ql-integrated-demo.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
+import { CommonModule } from '@angular/common';
+import { ComponentRendering, JssModule } from '@sitecore-jss/sitecore-jss-angular';
 
 interface QueryResult {
   data: {
@@ -63,13 +64,12 @@ interface ItemSearchResults {
 @Component({
   selector: 'app-graph-ql-integrated-demo',
   templateUrl: './graph-ql-integrated-demo.component.html',
+  imports: [CommonModule, JssModule]
 })
 export class GraphQLIntegratedDemoComponent implements OnInit {
   @Input() rendering: ComponentRendering;
   queryResult: QueryResult;
-
-  constructor() {}
-
+  
   ngOnInit() {
     this.queryResult = (this.rendering.fields as unknown) as QueryResult;
   }

package/dist/templates/angular-sxp/src/app/components/graph-ql-layout/graph-ql-layout.component.html

@@ -1,5 +1,5 @@
 <div data-e2e-id="graphql-layout">
-  <ng-container *ngIf="disconnectedMode">
+  @if (disconnectedMode) {
     <p>
       This app is running in disconnected mode. GraphQL requires connected mode, headless connected
       mode, or integrated mode to work.
@@ -12,11 +12,10 @@
       To view the GraphQL samples, restart the app using <code>jss start:connected</code>&nbsp; or
       deploy the app to Sitecore to run in integrated mode per the JSS documentation.
     </p>
-  </ng-container>
-  <ng-container *ngIf="!disconnectedMode">
+  } @else {
     <sc-placeholder
       name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-graphql-layout"
       [rendering]="rendering"
     ></sc-placeholder>
-  </ng-container>
+  }
 </div>