This page describes the steps required to update an SmartComponent Library Angular Frontend Project using Bootstrap 3 to Bootstrap 4.

SmartComponent Library Angular Frontend Update

To update run the following command in the project root directory:

scl update

Dependency Update

As the CLI tool will not replace existing dependencies with newer versions to minimize the risk of breaking your project, please also run:

_npm install -D bootstrap@4_in the root directory of your project.

Change <project_root>/angular.json as follows:

Add the following line after jQuery and before bootstrap:

"node_modules/popper.js/dist/umd/popper.min.js",

Your “scripts” setting should now look similar to this:

You might have to change some HTML templates due to changes in Bootstrap 4.

Example V3:

Should become in V4:

Example V3:

Should become in V4:

a new breakpoint has been introduced in V4, “xl”.

V3 breakpoints: xs, sm, md, lg

V4 breakpoints: xs, sm, md, lg, xl

More information on bootstrap V4 screen size breakpoints can be found here: https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

Please ensure that you update the root component HTML template, located at _src/app/custom-root/custom-root.component.html._