Clarity has changed to scoped packages starting at v0.11.0. There were several reasons for changing to scoped packages. One important factor in this decision was the need to remove the word `clarity` from file-paths and filenames so that Clarity would not get blocked by Easylist (commonly used in ad blockers).
All Clarity packages have moved locations in the npm
repository.
All Clarity packages have moved locations in the npm
repository.
v0.11.0
requires a minimum version of Angular 5Because 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.
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.
@clr
packages.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.
.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"
],
...
.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",
...
],
...
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.
import
statement.
import { ClrComponent } from "clarity-angular";
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.