Updating to Composable Storefront Version 6.0

Upgrading Your Angular Libraries

Before upgrading composable storefront to version 6.0, you first need to make sure your Angular libraries are up to date. Composable storefront 6.0 requires Angular 15.

To upgrade to Angular 15, follow the steps in the official Angular Update GuideInformation published on non-SAP site.

When upgrading your Angular libraries to version 15, you might have to append the --force flag if you encounter a mismatch between peer dependencies during the migration. The following is an example:

ng update @angular/cli@15 --force

Afterwards, you need to upgrade third party dependencies to the version that is compatible with Angular 15, such as ngx-infinite-scroll, @ng-select/ng-select or @ngrx/store.

Installing Composable Storefront Libraries from the Repository Based Shipment Channel

To upgrade composable storefront to version 6.0, you need to set up your access to the composable storefront 6.0 libraries in the Repository Based Shipment Channel (RBSC), as described in the following procedure.

Procedure

  1. Create an S-user for RBSC that has the appropriate licenses to download the composable storefront libraries.
  2. Log into your S-user account at the following web address: https://ui.repositories.cloud.sap/www/webapp/users/
  3. If you have not already done so, click on Add User and create a technical user.
  4. In the root of your composable storefront project, create an .npmrc file with the following content: 
    @spartacus:registry=https://73554900100900004337.npmsrv.base.repositories.cloud.sap/
//73554900100900004337.npmsrv.base.repositories.cloud.sap/:_auth=<npmcredentialsfromrbsc>
always-auth=true
  5. In the User Management tab of the RBSC websiteInformation published on SAP site, select the technical user and copy the generated NPM Base64 Credentials.
  6. In the .npmrc file, replace <npmcredentialsfromrbsc> with the NPM Base64 Credentials you copied from the RBSC website.

    You can now proceed to Upgrading Composable Storefront to 6.0.

Upgrading Composable Storefront to 6.0

Composable storefront 6.0 includes many new features and fixes. Since this update is a major release, some of the updates may also be breaking changes for your application. In this case, additional work on your side may be required to fix issues that result from upgrading from 5.2 to 6.0.

To update to version 6.0 of composable storefront, run the following command in the workspace of your Angular application:

ng update @spartacus/schematics@6.0
When the update has finished running, inspect your code for comments that begin with // TODO:Spartacus. For detailed information about each added comment, see the following:

Using Composable Storefront with SAP Commerce Cloud in the Public Cloud

SAP Commerce Cloud hosting service is used for both building and hosting JavaScript storefronts. However, as of May 2023, the hosting service cannot build composable storefront 5.x or later because the libraries are stored on the RBSC. Releases of Spartacus 4.x and earlier can still build. This is a temporary problem that should be resolved soon. In the meantime, as a workaround, you can build your composable storefront app locally, and upload the compiled application, as follows:

Procedure

  1. In your composable storefront project, run the following command: 
    npm run build

    A new dist folder is created in the root directory of your project.

  2. Commit the dist folder to your code repository for SAP Commerce Cloud.

    For more information, see Add Applications to JavaScript Storefronts.

Updating Your Composable Storefront Application to a New Patch Version

You can update your composable storefront app to a new patch version, as follows:

Procedure

  1. In package.json, set your @spartacus libraries to “~6.#.0", where # is replaced with the minor release version number you are currently using.

    For example, if you are updating from 6.0 to 6.0.1, in package.json, set your @spartacus libraries to “~6.0.0". By placing the tilde (~) in front of the version number, when you install depencencies, you will always update to the most recent patch.

  2. Delete your node_modules folder.
  3. Run npm install.

Adding the VideoModule and PDFModule to Your Storefront App

The VideoModule and the PDFModule are not added by default when you install or upgrade your composable storefront app using schematics. However, you can add these modules manually, as described in the following procedure.

Procedure

  1. Open spartacus-features.module.ts and add the VideoModule and the PDFModule to the imports section.

    The following is an example:

    @NgModule({
  declarations: [],
  imports: [
  ...
  VideoModule,
  PDFModule
]
  2. Import the VideoModule and the PDFModule from the storefront library.

    The following is an example:

    import { VideoModule, PDFModule } from "@spartacus/storefront";
  3. Save your spartacus-features.module.ts file.