Highlights

Upgrade Guide

Because Clarity packages have moved on npm, you will need to make changes to the build configuration and relative import paths that will enable your application to consume the scoped Clarity packages. Here, we use a typical Angular Cli (angular-cli generated app or the clarity-seed) application and describe the changes needed to upgrade an application to Clarity v0.11.0. We will assume that the application is set up similar to the clarity-seed application.

(Re) Install Clarity

Clarity packages (angular, icons and ui) are now published under the @clr scope. This means you will need to uninstall the old clarity packages and re-install clarity@0.11.0 from the @clr packages.

Un-install the old Clarity source files:
Install the @clr packages

Update .angular-cli.json Configuration

If your app is using ClarityIcons and ClarityUI, like clarity-seed, you will need to change the filepaths in the styles and scripts array's.

NOTE: both the filepath and the filename change.

Change the v0.10.x .angular-cli.json

...
"styles": [
    "../node_modules/clarity-icons/clarity-icons.min.css",
    "../node_modules/clarity-ui/clarity-ui.min.css",
    ...
  ],
  "scripts": [
    ...
    "../node_modules/clarity-icons/clarity-icons.min.js"
  ],
...
into the v0.11.x .angular-cli.json

...
"styles": [
                "../node_modules/@clr/icons/clr-icons.min.css",
                "../node_modules/@clr/ui/clr-ui.min.css",
                "styles.css"
            ],
            "scripts": [
                ...
                "../node_modules/@clr/icons/clr-icons.min.js",
                ...
            ],
...

Update Import Statements

Clarity is now following the Angular Package Format in order to support consumption in a variety of ways that use common build and bundling tools in use today. This means Clarity applications upgrading to v0.11.0 will need to update the non-relative module paths in their application sources.

Change the v0.10.x import statement.

import { ClrComponent } from "clarity-angular";
into the v0.11.x import statement.

import { ClrComponent } from "@clr/angular";

Once the .angular-cli.json and import statements are updated, your application should build and run just as it did before. If you have any questions or issues upgrading please reach out on StackOverflow with the tag vmware-clarity or on twitter @VMwareClarity.