Name: Updating Angular Schematics in SAP Commerce Cloud Composable Storefront
Uploaded: 2023-11-28
Duration: 412 s
Description: In this video, you will learn about Angular Schematics and how to update it in SAP Commerce Cloud Composable Storefront.Useful documentation link: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/7266f6f01edb4328b4e09df299ea09be.html?locale=en-US&version=6.0&source=redirect

Share feedback

<p><u><strong>Planned maintenance of Practice Systems</strong></u></p>

Planned maintenance of Practice Systems

Why create an SAP account?

Enhance your learning experience

SAP Learning

Choose your subscription

Manage your subscription

Live Sessions

Hands-on Practice

Certification

My Learning

Ready to start learning?

<div><div>In this video, you will learn about Angular Schematics and how to update it in SAP Commerce Cloud Composable Storefront.<br><br>Useful documentation link: <br><a href="https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/7266f6f01edb4328b4e09df299ea09be.html?locale=en-US&version=6.0&source=redirect" rel="nofollow noopener noreferrer" target="_blank">https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/7266f6f01edb4328b4e09df299ea09be.html?locale=en-US&version=6.0&source=redirect</a></div></div>

Updating Angular Schematics in SAP Commerce Cloud Composable Storefront

Hello everyone.  In this video, we will discuss how to “Update Schematics”  in Composable Storefront.   First, let us explain “Angular Schematics.   Angular Schematics is a set of powerful tools that enable one to create, update, and extend parts of an Angular application.   These tools generally consist of code generators and manipulators  that modify or manage application code  based on predefined rules and templates  in a structured way.   Angular Schematics is generally used for  migrating between different versions of Angular.   It can help automate the process of upgrading an Angular application  when there are breaking changes  in the newer version of the framework.   In Composable Storefront, Angular Schematics  is primarily used for initial setup  of Composable-Storefront libraries,  or for upgrading the libraries to newer versions.   For example, we generally use the  “ng add spartacus schematics” command  (with the target version specified)  whenever we need to install the storefront libraries of a specific version.   This approach is generally adopted  whenever we initially set-up  a Composable Storefront store  with Composable Storefront libraries.   To upgrade the Composable Storefront libraries  from one major version to another,  one would generally use the command,  “ng update spartacus schematics”,  specifying the target version number of the upgrade.  To update to the latest version  of Composable Storefront,  run the “ng update spartacus schematics”  command in the application workspace.   Once the update schematics command  finishes running,  look for lines of code that begin with  “//TODO Spartacus”.   These TODO comments are populated  by the update schematics operation.   Below are examples.   They generally refer to changes  that need to be made to the application code  for it to be compatible with the target version,  to enable successful compilation and application startup.  Developers can then refer to the upgrade documentation for further details about changes  that need to be made.   Now let us demonstrate an “update schematics” operation for upgrading our local composable  storefront to a newer version.   This local storefront has a couple of custom components that will use to show examples of the TODO items  created by an “upgrade schematics” operation.   The version of the Composable Storefront libraries used by this local storefront is 4.3.8,  as can be seen within package.json.  In general, upgrading the Composable Storefront up one major-version number  (like from 4.x to 5.x or from 5.x to 6.x)  requires an Angular version upgrade  followed by an “update schematics” operation  (with the target version specified).   This local, version 4.3 Composable Storefront  runs on Angular 12 and Node 14.  Upgrading to Composable Storefront version 5.x requires upgrading Angular in two separate operations:   first from version 12 to 13,  then from version 13 to 14  as can be seen from the documentation.   You must also update the corresponding Node version to correspond with every Angular upgrade.  For this demo, we have already upgraded the angular version first to 13 and then to 14  (along with their corresponding node versions)  ahead of time.   Now, from the package.json file, we can see the compatible angular 14 having been configured for the application.   The same evidence can be seen  via the “ng version” command.   One point to note is that, before running the “update schematics” operation for Composable Storefront version 5.0 ensure that the configuration for the repository-based shipment channel  is complete,  as it is needed for accessing the 5.0 libraries.   This is a one-time setup starting with version 5.0, and this will also be needed for any future major-version upgrades.   Now, let us use the “update schematics” command to upgrade our Composable Storefront  to version 5.0.11.   We can see that the package.json file got updated to reference the version 5.0 Composable Storefront libraries.   Once the update finishes running, let us search  the code for “TODO Spartacus” comments.   We can see two TODO items,  one for each of our custom components.   In order to be compatible with version 5.0,  these two TODO items must be addressed.   For example, let us take the first item in our custom checkout summary component.   For version 5.0, it looks like activeCartService has been migrated to activeCartFacade.  The default  CheckoutOrderSummaryComponent has already been modified  to use activeCartFacade in the source code.   Since our custom component extends this summary component,  its constructor must be adjusted to match, for it to compile successfully.   For more details regarding this,  one can always refer to the upgrade documentation, especially the breaking typescript changes section.  Here, we can see details of the changes in  CheckoutOrderSummaryComponent,  which our custom component extends.   It highlights the previous and current versions.  This informs developers as  to the necessary changes.    Addressing this comment, fixes the compilation issue as can be seen here.  On similar lines, all TODO items populated  by an “update schematics” operation  must be addressed by referring to the upgrade documentation for successful compilation in the target version.   This is one of the key benefits of using “update schematics”,  which generally highlights the changes needed for compatibility with the target version.   This concludes our coverage of “Composable Storefront - Angular Update Schematics”.  There is detailed documentation  on this topic in the SAP Help Portal.   Do take a look, and happy learning!