npm modules for WCH SPA sites - shared components


101.0.612 years ago3 years agoMinified + gzip package size for @ibm-wch/components-ng-shared-components in KB



This npm module contains a set of shared components leveraged in the Watson Content Hub starter site applications. See https://github.com/ibm-wch/wch-site-application for more information on the Watson Content Hub starter application.


  • A WCH tenant in Trial or Standard Tier
  • A WCH site application repo (e.g. https://github.com/ibm-wch/wch-site-application)
  • Node.js v6.11.1 or above
  • Angular >=6.0.0
  • Note:: We recommend to run npm install after getting the latest from this repository to get the latest prerequisites.


This github repository contains all shared Angular UI components that can be imported via npm commands to all WCH site application based projects, such as Oslo and Stockholm. Following Angular components are included in this package:

  • carousel-dynamic-list
  • carousel-list
  • embed-code
  • gallery-dynamic-list
  • gallery-list
  • vertical-dynamic-list
  • vertical-list

Besides Angular components, this package also contains required WCH content-artifacts for these components. They will be installed to your WCH site application directory src/wchLayouts automatically.




In WCH site application based project call:

ng add @ibm-wch/components-ng-shared-components

Local Development

If you want to develop new features in this package in local environment, run this command to install your latest package to your local wch-site-application repository:

npm run build:dev
  • Note: You have to place both wch-site-shared-components and wch-site-application under the same parent directory.


This package showcases how one can componentize code leveraged inside the applications in Watson Content Hub. If creating your own package you can publish to npm via:

npm version <npm package version>
npm run build
npm publish dist

Getting Started With Schematics

This repository is a basic Schematic implementation that serves as a starting point to create and publish Schematics to NPM.


To test locally, install @angular-devkit/schematics globally and use the schematics command line tool. That tool acts the same as the generate command of the Angular CLI, but also has a debug mode.

Check the documentation with

schematics --help

Unit Testing

npm run test will run the unit tests, using Jasmine as a runner and test framework.


See the included license file License .

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.