Using Third party libraries in Angular2 with Angular CLI

Angular2 has a special module based architecture. For using third party libraries with Angular CLI we have to follow certain steps. In this post we are going to discuss the same in the Angular2 Cart application we created earlier. Here we will assume that we are using SystemJS modules.

Angular2 Cart – – – GitHub Repository

Our app looks like this now.

Angular2 Cart

Let’s use bootstrap as an example. Here we are installing bootstrap as a npm package.

bootstrap npm install

Here we are assuming that you are using SystemJS with Angular 2. We are updating system-config.ts file inside src folder. to add how the bootstrap module would be available to the whole application. This would be available inside vendor folder.

Now we need to make sure that it is copied to the vendor folder. After building, the build contents are available in dist folder. We must select what should be part of the Angular2 CLI build process. vendorNpmFiles are assumed to be available in node_modules folder. For our case, we are updating angular-cli-build.js as follows:

Let’s build it again using ng b Angular CLI command.

ng-build

Now you can notice that the bootstrap folder has been copied to the vendor folder. It also follows the same hierarchy as source folder.

bootstrap-vendor

Let’s update index.html to use the bootstrap css style. We are using bootstrap’s container class for one of the div(s).

As the application is loaded in the browser the vendor modules are available in the vendor folder as in the build.

And the bootstrap’s css class container has also been applied to the div.

Code

You can download the code from my GitHub repository.

Angular2 Cart GitHub