create-sitecore-jss 22.10.0-canary.8 → 22.10.0

package/dist/templates/angular-sxp/sitecore/config/{{appName}}.config

@@ -1,90 +1,90 @@
-<!--
-  JSS Sitecore Configuration Patch File
-
-  This configuration file registers the JSS site with Sitecore, and configures the Layout Service
-  to work with it. Config patches need to be deployed to the Sitecore server.
-
-  Normally `jss deploy config` can do this for local development. To manually deploy, or to deploy via CI,
-  this file can be placed in the `App_Config/Include` folder, or a subfolder of it, within the Sitecore site.
--->
-<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/"
-               xmlns:set="http://www.sitecore.net/xmlconfig/set/"
-               xmlns:role="http://www.sitecore.net/xmlconfig/role/">
-  <sitecore>
-    <settings>
-      <!--
-        PROXY CONFIGURATION
-        When running JSS with the headless proxy (node-headless-ssr-proxy),
-        the original IP address of clients is obscured by the proxy.
-        This setting tells Sitecore to read the forwarded header the proxy sends,
-        thus making analytics track the correct original client IP address.
-      -->
-      <setting name="Analytics.ForwardedRequestHttpHeader" set:value="X-Forwarded-For" />
-    </settings>
-    <sites>
-      <!--
-        JSS Site Registration
-        This configures the site with Sitecore - i.e. host headers, item paths.
-        If your JSS app lives within an existing Sitecore site, this may not be necessary.
-
-        IMPORTANT: JSS sites ship in 'live mode', which makes development and testing easy,
-        but disables workflow and publishing. Before going to production, change the `database`
-        below to `web` instead of `master`.
-      -->
-      <site patch:before="site[@name='website']"
-            inherits="website"
-            name="<%- appName %>"
-            hostName="<%- hostName.replace(/^https?:\/\//, '') %>"
-            rootPath="/sitecore/content/<%- appName %>"
-            startItem="/home"
-            database="master" />
-    </sites>
-    <javaScriptServices>
-      <apps>
-        <!--
-          JSS App Registration
-          The JSS app needs to be registered in order to support layout service and import services.
-
-          There are many available attributes, and they inherit the defaults if not explicitly specified here.
-          Defaults are defined in `/App_Config/Sitecore/JavaScriptServices/Sitecore.JavaScriptServices.Apps.config`
-
-          NOTE: graphQLEndpoint enables _Integrated GraphQL_. If not using integrated GraphQL, it can be removed.
-
-          NOTE: layoutServiceConfiguration should be set to "default" when using GraphQL Edge schema.
-          When using integrated GraphQL with Edge schema, a $language value is injected
-          since language is required in all Edge queries. "jss" configuration does not do this (which is backwards
-          compatible with JSS versions < 18.0.0).
-        -->
-        <app name="<%- appName %>"
-             layoutServiceConfiguration="default"
-             sitecorePath="/sitecore/content/<%- appName %>"
-             inherits="defaults"
-             useLanguageSpecificLayout="true"
-             graphQLEndpoint="/sitecore/api/graph/edge" />
-      </apps>
-      <!--
-        IMAGE RESIZING WHITELIST
-        Using Sitecore server-side media resizing (i.e. the `imageParams` or `srcSet` props on the `<Image/>` helper component)
-        could expose your Sitecore server to a denial-of-service attack by rescaling an image with many arbitrary dimensions.
-        In JSS resizing param sets that are unknown are rejected by a whitelist.
-
-        Sets of image sizing parameters that are used in app components must be whitelisted here.
-        If a param set is not whitelisted, the image will be returned _without resizing_.
-
-        To determine the image parameters being used, look at the query string on the `src` of the rendered image, i.e. '/img.jpg?mw=100&h=72' -> mw=100,h=72
-        Note: the parameter sets defined here are comma-delimited (,) instead of &-delimited like the query string. Multiple sets are endline-delimited.
-      -->
-      <allowedMediaParams>
-        <!-- XML element name is arbitary, useful for organizing and patching -->
-        <styleguide-image-sample>
-          mw=100,
-          mh=50
-        </styleguide-image-sample>
-        <styleguide-image-sample-adaptive>
-          mw=300
-          mw=100
-        </styleguide-image-sample-adaptive>
-      </allowedMediaParams>
-    </javaScriptServices>
-  </sitecore>
-</configuration>
+<!--
+  JSS Sitecore Configuration Patch File
+
+  This configuration file registers the JSS site with Sitecore, and configures the Layout Service
+  to work with it. Config patches need to be deployed to the Sitecore server.
+
+  Normally `jss deploy config` can do this for local development. To manually deploy, or to deploy via CI,
+  this file can be placed in the `App_Config/Include` folder, or a subfolder of it, within the Sitecore site.
+-->
+<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/"
+               xmlns:set="http://www.sitecore.net/xmlconfig/set/"
+               xmlns:role="http://www.sitecore.net/xmlconfig/role/">
+  <sitecore>
+    <settings>
+      <!--
+        PROXY CONFIGURATION
+        When running JSS with the headless proxy (node-headless-ssr-proxy),
+        the original IP address of clients is obscured by the proxy.
+        This setting tells Sitecore to read the forwarded header the proxy sends,
+        thus making analytics track the correct original client IP address.
+      -->
+      <setting name="Analytics.ForwardedRequestHttpHeader" set:value="X-Forwarded-For" />
+    </settings>
+    <sites>
+      <!--
+        JSS Site Registration
+        This configures the site with Sitecore - i.e. host headers, item paths.
+        If your JSS app lives within an existing Sitecore site, this may not be necessary.
+
+        IMPORTANT: JSS sites ship in 'live mode', which makes development and testing easy,
+        but disables workflow and publishing. Before going to production, change the `database`
+        below to `web` instead of `master`.
+      -->
+      <site patch:before="site[@name='website']"
+            inherits="website"
+            name="<%- appName %>"
+            hostName="<%- hostName.replace(/^https?:\/\//, '') %>"
+            rootPath="/sitecore/content/<%- appName %>"
+            startItem="/home"
+            database="master" />
+    </sites>
+    <javaScriptServices>
+      <apps>
+        <!--
+          JSS App Registration
+          The JSS app needs to be registered in order to support layout service and import services.
+
+          There are many available attributes, and they inherit the defaults if not explicitly specified here.
+          Defaults are defined in `/App_Config/Sitecore/JavaScriptServices/Sitecore.JavaScriptServices.Apps.config`
+
+          NOTE: graphQLEndpoint enables _Integrated GraphQL_. If not using integrated GraphQL, it can be removed.
+
+          NOTE: layoutServiceConfiguration should be set to "default" when using GraphQL Edge schema.
+          When using integrated GraphQL with Edge schema, a $language value is injected
+          since language is required in all Edge queries. "jss" configuration does not do this (which is backwards
+          compatible with JSS versions < 18.0.0).
+        -->
+        <app name="<%- appName %>"
+             layoutServiceConfiguration="default"
+             sitecorePath="/sitecore/content/<%- appName %>"
+             inherits="defaults"
+             useLanguageSpecificLayout="true"
+             graphQLEndpoint="/sitecore/api/graph/edge" />
+      </apps>
+      <!--
+        IMAGE RESIZING WHITELIST
+        Using Sitecore server-side media resizing (i.e. the `imageParams` or `srcSet` props on the `<Image/>` helper component)
+        could expose your Sitecore server to a denial-of-service attack by rescaling an image with many arbitrary dimensions.
+        In JSS resizing param sets that are unknown are rejected by a whitelist.
+
+        Sets of image sizing parameters that are used in app components must be whitelisted here.
+        If a param set is not whitelisted, the image will be returned _without resizing_.
+
+        To determine the image parameters being used, look at the query string on the `src` of the rendered image, i.e. '/img.jpg?mw=100&h=72' -> mw=100,h=72
+        Note: the parameter sets defined here are comma-delimited (,) instead of &-delimited like the query string. Multiple sets are endline-delimited.
+      -->
+      <allowedMediaParams>
+        <!-- XML element name is arbitary, useful for organizing and patching -->
+        <styleguide-image-sample>
+          mw=100,
+          mh=50
+        </styleguide-image-sample>
+        <styleguide-image-sample-adaptive>
+          mw=300
+          mw=100
+        </styleguide-image-sample-adaptive>
+      </allowedMediaParams>
+    </javaScriptServices>
+  </sitecore>
+</configuration>

package/dist/templates/angular-sxp/sitecore/definitions/components/graph-ql-integrated-demo.sitecore.graphql

@@ -1,71 +1,71 @@
-# This file contains a GraphQL query that will be executed and the result provided to
-# your JSS component. You can run this query in GraphiQL ($endpoint/ui) for a nice editing experience.
-
-# Note that we're executing _two queries_ (datasource and contextItem)
-# within the context of the IntegratedDemoQuery _operation_. This makes it
-# very efficient at gathering data from multiple sources.
-
-query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language: String!) {
-  # Datasource query
-  # $datasource will always be set to the ID of the rendering's datasource item
-  # (as long as the GraphQLData helper is used)
-  datasource: item(path: $datasource, language: $language) {
-    id
-    name
-    # Strongly-typed querying on known templates is possible!
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLIntegratedDemo {
-      # Single-line text field
-      sample1 {
-        # the 'jsonValue' field is a JSON blob that represents the object that
-        # should be passed to JSS field rendering helpers (i.e. text, image, link)
-        jsonValue
-        value
-      }
-      # General Link field
-      sample2 {
-        jsonValue
-        # Structured querying of the field's values is possible
-        text
-        target
-        url
-        # Access to the template definition is possible
-        definition {
-          type
-          shared
-        }
-      }
-    }
-  }
-
-  # Context/route item query
-  # $contextItem will always be set to the ID of the current context item (the route item)
-  # (as long as the GraphQLData helper is used)
-  contextItem: item(path: $contextItem, language: $language) {
-    id
-    # Get the page title from the app route template
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
-      pageTitle {
-        value
-      }
-    }
-
-    # List the children of the current route
-    children(hasLayout: true) {
-      results {
-        id
-        # typing fragments can be used anywhere!
-        # so in this case, we're grabbing the 'pageTitle'
-        # field on all child route items.
-        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
-          pageTitle {
-            jsonValue
-            value
-          }
-        }
-        url {
-          path
-        }
-      }
-    }
-  }
-}
+# This file contains a GraphQL query that will be executed and the result provided to
+# your JSS component. You can run this query in GraphiQL ($endpoint/ui) for a nice editing experience.
+
+# Note that we're executing _two queries_ (datasource and contextItem)
+# within the context of the IntegratedDemoQuery _operation_. This makes it
+# very efficient at gathering data from multiple sources.
+
+query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language: String!) {
+  # Datasource query
+  # $datasource will always be set to the ID of the rendering's datasource item
+  # (as long as the GraphQLData helper is used)
+  datasource: item(path: $datasource, language: $language) {
+    id
+    name
+    # Strongly-typed querying on known templates is possible!
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLIntegratedDemo {
+      # Single-line text field
+      sample1 {
+        # the 'jsonValue' field is a JSON blob that represents the object that
+        # should be passed to JSS field rendering helpers (i.e. text, image, link)
+        jsonValue
+        value
+      }
+      # General Link field
+      sample2 {
+        jsonValue
+        # Structured querying of the field's values is possible
+        text
+        target
+        url
+        # Access to the template definition is possible
+        definition {
+          type
+          shared
+        }
+      }
+    }
+  }
+
+  # Context/route item query
+  # $contextItem will always be set to the ID of the current context item (the route item)
+  # (as long as the GraphQLData helper is used)
+  contextItem: item(path: $contextItem, language: $language) {
+    id
+    # Get the page title from the app route template
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
+      pageTitle {
+        value
+      }
+    }
+
+    # List the children of the current route
+    children(hasLayout: true) {
+      results {
+        id
+        # typing fragments can be used anywhere!
+        # so in this case, we're grabbing the 'pageTitle'
+        # field on all child route items.
+        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
+          pageTitle {
+            jsonValue
+            value
+          }
+        }
+        url {
+          path
+        }
+      }
+    }
+  }
+}

package/dist/templates/angular-sxp/sitecore/gitignore

@@ -1,3 +1,3 @@
-manifest
-update-package
+manifest
+update-package
 package

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>

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

@@ -1,16 +1,16 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
+import { Component, OnInit, Input, inject } from '@angular/core';
+import { ComponentRendering, JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { JssContextService } from '../../jss-context.service';
 
 @Component({
   selector: 'app-graph-ql-layout',
   templateUrl: './graph-ql-layout.component.html',
+  imports: [JssModule]
 })
 export class GraphQLLayoutComponent implements OnInit {
   @Input() rendering: ComponentRendering;
   disconnectedMode: boolean;
-
-  constructor(private contextService: JssContextService) { }
+  private contextService = inject(JssContextService);
 
   ngOnInit() {
     this.disconnectedMode = this.contextService.stateValue.sitecore.route.itemId === 'available-in-connected-mode';

package/dist/templates/angular-sxp/src/app/components/shared/styleguide-specimen/styleguide-specimen.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
+import { ComponentRendering, JssModule } from '@sitecore-jss/sitecore-jss-angular';
 
 function dasherize(str: string) {
   return str.replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, function(s, i) {
@@ -24,7 +24,8 @@ function dasherize(str: string) {
     </p>
     <div class="border p-2"><ng-content></ng-content></div>
   </div>
-  `
+  `,
+  imports: [JssModule]
 })
 export class StyleguideSpecimenComponent implements OnInit {
   @Input() rendering: ComponentRendering;
@@ -32,8 +33,6 @@ export class StyleguideSpecimenComponent implements OnInit {
   id: string;
   componentName: string;
 
-  constructor() { }
-
   ngOnInit() {
     this.id = `i${this.rendering.uid.replace(/[{}]/g, '')}`;
     this.componentName = dasherize(this.rendering.componentName);

package/dist/templates/angular-sxp/src/app/components/styleguide-angular-lazy-loading/styleguide-angular-lazy-loading.component.ts

@@ -1,13 +1,13 @@
 import { Component, Input } from '@angular/core';
-import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
+import { ComponentRendering, JssModule } from '@sitecore-jss/sitecore-jss-angular';
+import { StyleguideSpecimenComponent } from '../shared/styleguide-specimen/styleguide-specimen.component';
 
 @Component({
   selector: 'app-styleguide-angular-lazy-loading',
   templateUrl: './styleguide-angular-lazy-loading.component.html',
-  styles: []
+  styles: [],
+  imports: [JssModule, StyleguideSpecimenComponent]
 })
 export class StyleguideAngularLazyLoadingComponent {
   @Input() rendering: ComponentRendering;
-
-  constructor() { }
-}
+};

package/dist/templates/angular-sxp/src/app/components/styleguide-angular-lazy-loading/styleguide-angular-lazy-loading.module.ts

@@ -10,10 +10,7 @@ import { AppComponentsSharedModule } from '../app-components.shared.module';
   imports: [
     // this call signals to JSS that this component is the one being lazy loaded by this module
     JssModule.forChild(StyleguideAngularLazyLoadingComponent),
-    AppComponentsSharedModule
-  ],
-  declarations: [
-    StyleguideAngularLazyLoadingComponent,
-  ],
+    AppComponentsSharedModule,
+  ]
 })
 export class StyleguideAngularLazyLoadingModule { }

package/dist/templates/angular-sxp/src/app/components/styleguide-component-params/styleguide-component-params.component.html

@@ -8,12 +8,16 @@
     <br />
     param type: <code>{{ useCtaType }}</code>
     <!-- because the param is a string, you need to compare it as a string - if(`useCta`) won't work correctly. -->
-    <div *ngIf="useCta === 'true'" class="alert alert-info">the call to action is shown</div>
+    @if (useCta === 'true') {
+      <div class="alert alert-info">the call to action is shown</div>
+    }
   </div>
   <p>columns param: {{ columns }}</p>
   <div class="row">
-    <div class="col-sm" *ngFor="let column of columnsArray">
-      Column {{ column }}
-    </div>
+    @for (column of columnsArray; track column) {
+      <div class="col-sm">
+        Column {{ column }}
+      </div>
+    }
   </div>
 </app-styleguide-specimen>