SAP Commerce Cloud Composable Storefront

https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT
Admin
SAP Commerce Cloud, composable storefront is a lean, Angular-based JavaScript storefront for SAP...
Tokens:7,501
Snippets:128
Trust Score:9.8
Update:4 months ago
Show doc for...
Tokens:
Raw
### Parse Error Example

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

An example of a 'parse' error indicating invalid HTML in a template that prevents migration or rendering.

```json
{
  "type": "parse",
  "error": "Error: The migration resulted in invalid HTML for /path/to/component.html. Please check the template for valid HTML structures and run the migration again."
}
```

--------------------------------

### Problematic HTML: Unclosed Span

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Shows an example of code with an unclosed span tag that can cause invalid HTML structure errors during migration.

```html
<!-- Before (Problematic) -->
<div *ngIf="showRow">
  <span>Unclosed span without closing tag
```

--------------------------------

### Template Processing Error Example

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Illustrates a common template processing error where a referenced ng-template is missing.

```json
{
  "type": "template",
  "error": "Error: ..."
}
```

--------------------------------

### Problematic HTML: Improper Table Structure

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Illustrates an example of improper table structure (missing `tbody`) that can lead to invalid HTML errors during migration.

```html
<!-- Before (Problematic) -->
<table>
  <tr *ngIf="showRow">
    <td>Data without tbody</td>
  </tr>
</table>
```

--------------------------------

### Problematic i18n Nesting with ng-container

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Shows an example of problematic code where `*ngIf` creates implicit containers, leading to invalid `i18n` nesting after migration.

```html
<div i18n="@@parentMessage">
  Parent content
  <ng-container *ngIf="condition">
    <span i18n="@@childMessage">Child text that needs translation</span>
  </ng-container>
</div>
```

--------------------------------

### Fix Multiple Aliases on ngIf with 'as' Alias

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Resolve multiple alias errors on *ngIf by using a single alias, preferably the 'as' form. This example shows the recommended approach using the new control flow syntax.

```html
@if (user$ | async; as user) {
  <div>
    Name: {{ user.name }}
    Email: {{ user.email }}
  </div>
}

```

--------------------------------

### Fix Duplicate ng-template Names with New Control Flow

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Resolve duplicate ng-template name errors by migrating to the new Angular control flow syntax. This example demonstrates replacing named templates with @if/@else blocks.

```html
@if (data) {
  <div>{{ data }}</div>
} @else {
  Loading data...
}

@if (otherData) {
  <div>{{ otherData }}</div>
} @else {
  Please wait...
}

```

--------------------------------

### Run Angular Control Flow Migration

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Use this command to generate the Angular control flow syntax. It's recommended to run this in dry-run mode first.

```bash
ng generate @angular/core:control-flow

```

--------------------------------

### Solution for i18n Nesting by Restructuring

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Demonstrates restructuring code to avoid nesting `i18n` attributes, resolving the i18n nesting error.

```html
<div i18n="@@parentMessage">Parent content only</div>
@if (condition) {
  <span i18n="@@childMessage">Child text that needs translation</span>
}
```

--------------------------------

### Run Angular Control Flow Migration in Dry-Run Mode

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Execute the migration command in dry-run mode to preview changes without modifying files. This helps in identifying potential issues before applying them.

```bash
ng generate @angular/core:control-flow --dry-run

```

--------------------------------

### Invalid Angular Binding Syntax

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Demonstrates problematic Angular binding syntax with special characters and its valid alternative using attribute binding.

```html
<!-- Before (Problematic) - Special characters in binding names -->
<div [invalid@binding]="value">Content</div>

<!-- After (Solution) -->
<div [attr.data-value]="value">Content with valid binding</div>
```

--------------------------------

### Run Angular Control Flow Migration on a Specific Path

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Specify a path to migrate only a particular component or directory. This is useful for incremental migration or targeting specific parts of the application.

```bash
ng generate @angular/core:control-flow --path=src/app/my-component

```

--------------------------------

### Activate B2B Customer Search Feature

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/0ba4f7523bf840a2a07d51f54c0f4d1d.html?locale=en-US&state=PRODUCTION&version=2211

Enable the B2B customer search functionality by providing the 'enableB2BCustomerSearch' feature toggle. This is done within the 'providers' array of your spartacus-features.module.ts file.

```typescript
providers: [
    provideFeatureToggles({
      enableB2BCustomerSearch: true,
	 ...
    }),
  ]
```

--------------------------------

### Solution for Improper Table Structure using tbody and @if/@for

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Demonstrates the solution for improper table structure by using `tbody` and Angular's `@if` and `@for` directives for correct table rendering.

```html
<!-- After (Solution) - Use proper table structure with tbody -->
<table>
  <tbody>
    @if (showRow) {
      <tr>
        <td>Data with proper tbody</td>
      </tr>
    }
    @for (item of items; track item) {
      <tr>
        <td>{{ item }}</td>
      </tr>
    }
  </tbody>
</table>
```

--------------------------------

### Activate SearchBox V2 Feature Toggle

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/16bfdef6ff0d48d48f67f1af8cd49cc5.html?locale=en-US&state=PRODUCTION&version=2211

Use the `provideFeatureToggles` function in `spartacus-features.module.ts` to enable the `searchBoxV2` feature. This activates the new, redesigned searchbox component.

```typescript
providers: [
    provideFeatureToggles({
      searchBoxV2: true,
	 ...
    }),
  ]
```

--------------------------------

### Enable Read-Only Attributes with Images

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/08a11f67e4f248bf84d06cd8212780d4.html?locale=en-US&state=PRODUCTION&version=2211

Activate support for read-only single-select and multi-select attribute types with images in Configurable Products. Update your spartacus-features.module.ts file to enable this feature.

```typescript
providers: [
    provideFeatureToggles({
      productConfiguratorAttributeTypesV2: true,
	 ...
    }),
  ]
```

--------------------------------

### Activate Enable Remove Voucher Endpoint

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/05358e5b1044431584ae90e35ebb70de.html?locale=en-US&state=PRODUCTION&version=2211

Update your spartacus-features.module.ts file to enable the remove voucher endpoint functionality. This requires SAP Commerce Cloud 2211.28 or newer.

```typescript
providers: [
    provideFeatureToggles({
      enableRemoveVoucherEndpoint: true,
	 ...
    }),
  ],
```

--------------------------------

### Problematic ngFor with Collection Aliasing

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Demonstrates the problematic code structure that leads to collection aliasing errors with `*ngFor` and `as`.

```html
<div *ngFor="let item of items$ | async as items">
  {{ item.name }} (Total: {{ items.length }})
</div>
```

--------------------------------

### Activate Product Carousel Scrolling

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/03abb498deec4203bd970109e5632a60.html?locale=en-US&state=PRODUCTION&version=2211

Update your spartacus-features.module.ts file to enable the product carousel scrolling feature. This involves adding the provideFeatureToggles configuration.

```typescript
providers: [
    provideFeatureToggles({
      productCarouselScrolling: true,
	 ...
    }),
  ],
```

--------------------------------

### Missing ng-template Reference

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Shows problematic Angular template code that references a non-existent template, leading to a 'template' type error.

```html
<div *ngIf="condition; else nonExistentTemplate">
  Main content when condition is true
</div>
<!-- No #nonExistentTemplate exists! -->
```

--------------------------------

### Invalid Attribute Syntax

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Illustrates an Angular template with invalid attribute syntax, specifically a missing closing parenthesis in an event binding, and its corrected form.

```html
<!-- Before (Problematic) - Missing closing parenthesis -->
<input [value]="name" (change)="update($event">

<!-- After (Solution) -->
<input [value]="name" (change)="update($event)" />
```

--------------------------------

### Activate Recent Searches Feature

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/07ea99444005455ab3cb8ee27bbf4274.html?locale=en-US&state=PRODUCTION&version=2211

To activate the Recent Searches feature, update your spartacus-features.module.ts file by setting 'recentSearches' to true within the provideFeatureToggles function. This enables the display of up to five previously used search terms.

```typescript
providers: [
    provideFeatureToggles({
      recentSearches: true,
	 ...
    }),
  ],
```

--------------------------------

### Angular Migration Error: Invalid HTML Structure

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

This error indicates that the migration produced HTML that cannot be parsed due to malformed tags, unclosed elements, or improper nesting.

```text
The migration resulted in invalid HTML for /path/to/component.html. Please check the template for valid HTML structures and run the migration again.
```

--------------------------------

### Solution for ngFor Collection Aliasing using @let

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Offers an alternative solution for collection aliasing errors by using a `@let` declaration.

```html
@let items = items$ | async;
@if (items) {
  @for (item of items; track item.id) {
    {{ item.name }} (Total: {{ items.length }})
  }
}
```

--------------------------------

### Unclosed Interpolation Error

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Shows an Angular template with unclosed interpolation syntax and the corrected version with proper closing braces.

```html
<!-- Before (Problematic) -->
<div>{{ name </div>

<!-- After (Solution) -->
<div>{{ name }}</div>
```

--------------------------------

### Enable Quote Purchase Order Number Feature

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/059ef1e522b6484dbef4071b37828ac1.html?locale=en-US&state=PRODUCTION&version=2211

Update your spartacus-features.module.ts file to activate the 'enableQuotePurchaseOrderNumber' feature toggle. This allows customers to input a PO number in the Quote Request form.

```typescript
providers: [
    provideFeatureToggles({
      enableQuotePurchaseOrderNumber: true,
	 ...
    }),
  ]
```

--------------------------------

### Solution for ngFor Collection Aliasing using @if

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Provides a solution for collection aliasing errors by using the `@if` wrapper with an `as` alias.

```html
@if (items$ | async; as items) {
  @for (item of items; track item.id) {
    <div>
      {{ item.name }} (Total: {{ items.length }})
    </div>
  }
}
```

--------------------------------

### Angular New Control Flow Syntax

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Provides a solution to template errors by using the new Angular control flow syntax, replacing missing ng-template references.

```typescript
@if (condition) {
  <div>
    Main content when condition is true
  </div>
} @else {
  Fallback content when condition is false
}
```

--------------------------------

### Solution for i18n Nesting by Removing Inner i18n

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Presents a solution where the inner `i18n` attribute is removed, incorporating the child text into the parent translation.

```html
<div i18n="@@parentMessage">
  Parent content
  @if (condition) {
    <span>Child text included in parent translation</span>
  }
</div>
```

--------------------------------

### Solution for Unclosed Span using @if

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

Provides the solution for the unclosed span issue by using Angular's `@if` block and ensuring proper tag closure.

```html
<!-- After (Solution) -->
@if (showRow) {
  <div>
    <span>Properly closed span</span>
  </div>
}
```

--------------------------------

### Enable Carousel Category Products Feature

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/10416bef4c29422ea84e30e16f159125.html?locale=en-US&state=PRODUCTION&version=2211

Activate the 'enableCarouselCategoryProducts' feature by setting its value to true within the 'provideFeatureToggles' configuration in your spartacus-features.module.ts file. This enables the product carousel to display products based on category codes.

```typescript
providers: [
    provideFeatureToggles({
      enableCarouselCategoryProducts: true,
	 ...
    }),
  ]
```

--------------------------------

### Error: Multiple Aliases on ngIf

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

This error arises from using more than one alias (e.g., 'as' and 'let') on the same *ngIf directive. Remove redundant aliases to fix.

```html
<!-- Using ng-template with both 'as' and 'let' declarations -->
<ng-template
  ngIf*="user$ | async as user"
  let-first
  let-index="index"
>
  <div>
    Name: {{ user.name }}
    First: {{ first }}
    Index: {{ index }}
  </div>
</ng-template>

<!-- Or in simpler form with dual alias -->
<div *ngIf="user$ | async as user; let myUser">
  {{ user.name }}
</div>

```

--------------------------------

### Activate Increment Processes Count For Merge Cart Feature

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/05d5b90582c147b6924a3601cd2ac9d5.html?locale=en-US&state=PRODUCTION&version=2211

Enable the 'incrementProcessesCountForMergeCart' feature by setting its value to true in the spartacus-features.module.ts file. This ensures consumers do not receive the cart until the merge operation is complete and the cart is stable.

```typescript
providers: [
    provideFeatureToggles({
      incrementProcessesCountForMergeCart: true,
	 ...
    }),
  ],
```

--------------------------------

### Activate Consecutive Characters Password Requirement

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/0fc417ccc4e64ece841f6df1d40f5bbb.html?locale=en-US&state=PRODUCTION&version=2211

Update your spartacus-features.module.ts file to activate the consecutive characters password requirement. This prevents users from creating passwords with identical consecutive characters.

```typescript
providers: [
    provideFeatureToggles({
      enableConsecutiveCharactersPasswordRequirement: true,
	 ...
    }),
  ],
```

--------------------------------

### Angular Migration Error: Collection Aliasing on ngFor

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

This error occurs when using `as` to alias a collection in `*ngFor`. Collection aliasing is not supported with `@for`. Refactor the code to remove the `as` alias.

```text
Found an aliased collection on an ngFor: "item of items$ | async as items". Collection aliasing is not supported with @for. Refactor the code to remove the as alias and re-run the migration.
```

--------------------------------

### Angular Migration Error: i18n Nesting

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

This error occurs when an element with an `i18n` attribute contains another element with an `i18n` attribute, which is invalid in Angular.

```text
i18n Nesting error: The migration would result in invalid i18n nesting for /path/to/component.html. Element with i18n attribute "div" would result in having a child of element with i18n attribute "span". Please fix and re-run the migration.
```

--------------------------------

### Error: Duplicate ng-template Names

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

This error occurs when multiple <ng-template> elements share the same #name reference within a single component. Ensure all template names are unique.

```html
<ng-template #loading>Loading data...</ng-template>
<ng-template #loading>Please wait...</ng-template>  <!-- DUPLICATE! -->

<div *ngIf="data; else loading">{{ data }}</div>
<div *ngIf="otherData; else loading">{{ otherData }}</div>

```

--------------------------------

### Fix Duplicate ng-template Names with Unique Template Names

Source: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/090b5652ed0140b892dbf4d1f5d8283e.html?locale=en-US&state=PRODUCTION&version=2211

If templates are still necessary, resolve duplicate name errors by assigning unique names to each <ng-template> element. This ensures distinct references.

```html
<ng-template #loadingData>Loading data...</ng-template>
<ng-template #loadingOther>Please wait...</ng-template>

<div *ngIf="data; else loadingData">{{ data }}</div>
<div *ngIf="otherData; else loadingOther">{{ otherData }}</div>

```
Tokens:
Raw