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>We are aware of intermittent issues in accessing the learning content</p>

We are aware of intermittent issues in accessing the learning content

Personalize your learning.

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?

This browser is not supported

Please try again later

Sorry, we encountered an error

Try again or reset results to continue browsing

We didn’t find what you’re looking for

To continue, please log in

Your session has timed out

Validate your skills and learning by completing the certification exam and gain a highly recognised accreditation.

Book your certification exam

Complete the assessment to validate your SAP PartnerEdge competency qualifications.

Ready to take your assessment?

Learn about the key features and essentials in the latest release to help you prepare for the Stay Certified assessment.

Prepare for assessment

Learn new skills you need at your own pace with our bite-sized lessons.

Prepare for certification

In your My Learning account you can view your certification and learn how to take your Stay Certified assessment.

Ready to take your Stay Certified assessment?

Explore {title} at SAP Learning. Find out more!

Assessment

Course Completion

Knowledge Badge

Overview

Support Resource

Certification Exam

Theoretical Exam

Schedule

External Course

Practical Exercise

Practical Test

External Hands-On

External Resource

Learning Journey

Learning Journey Assessment

Lesson

Live Session

Practice System

Quiz

Scenario Based Assessment

Course Assessment

Course

Stay Certified

Subscription

System Based Assessment

Test Out

Unit

Video

Video Playlist

Week

Want to remove this from your Learning List?

Your exclusive access to the SAP Learning Hub, event edition is ready. <link>Start learning now.</link>

Access activated

You can now register for free Live Sessions.

<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 target="_blank" rel="nofollow noopener noreferrer" href="https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/10a8bc7f635b4e3db6f6bb7880e58a7d/7266f6f01edb4328b4e09df299ea09be.html?locale=en-US&version=6.0&source=redirect">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!