[XM Cloud][Angular] Navigation component link forces full page reload

CHANGELOG.md

@@ -13,6 +13,7 @@ Our versioning strategy is as follows:
 
 ### 🐛 Bug Fixes
 
+* `[templates/angular-xmcloud]` Navigation component link forces full page reload ([#1958](https://github.com/Sitecore/jss/pull/1958))
 * `[sitecore-jss-nextjs]` Link component prefetches files ([#1956](https://github.com/Sitecore/jss/pull/1956))
 * `[templates/nextjs]` `[templates/react]` `[templates/angular]` `[templates/vue]` Fixed an issue when environment variable is undefined (not present in .env), that produced an "undefined" value in generated config file ([#1875](https://github.com/Sitecore/jss/pull/1875))
 * `[templates/nextjs]` Fix embedded personalization not rendering correctly after navigation through router links. ([#1911](https://github.com/Sitecore/jss/pull/1911))

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/image/image.component.html

@@ -22,7 +22,7 @@
 </ng-template>
 
 <ng-template #withLink>
-  <a *scLink="rendering.fields.TargetUrl">
+  <a *scGenericLink="rendering.fields.TargetUrl">
     <img *scImage="rendering.fields.Image" />
   </a>
 </ng-template>

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html

@@ -5,7 +5,7 @@ <h3 *scText="title"></h3>
   <ul>
     <li *ngFor="let fieldLink of fieldLinks; index as i" [ngClass]="getFieldLinkClass(i)">
       <div class="field-link">
-        <a *scLink="fieldLink"></a>
+        <a *scGenericLink="fieldLink"></a>
       </div>
     </li>
   </ul>

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/navigation/navigation-item.component.html

@@ -1,6 +1,6 @@
 <li [class]="cssClasses" [ngClass]="{ active: isActive }" tabIndex="0">
   <div [ngClass]="{ 'navigation-title': true, child: hasChildren }" (click)="isActive = !isActive">
-    <a *scLink="linkField" (click)="onClick($event)">
+    <a *scRouterLink="linkField" (click)="onClick($event)">
       <ng-container *ngIf="navItemFields.NavigationTitle"
         ><span *scText="navItemFields.NavigationTitle"></span
       ></ng-container>

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/promo/promo.component.html

@@ -10,7 +10,7 @@
         </div>
       </div>
       <div class="field-promolink">
-        <a *scLink="rendering.fields.PromoLink"></a>
+        <a *scGenericLink="rendering.fields.PromoLink"></a>
       </div>
     </div>
   </ng-container>

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/title/title.component.html

@@ -1,7 +1,7 @@
 <div clas="component-content">
   <div class="field-title">
     <ng-container *ngIf="!pageEditing; else textOnly">
-      <a *scLink="link"></a>
+      <a *scGenericLink="link"></a>
     </ng-container>
   </div>
 </div>