Angular 2 Installing 3rd party plugins with angular-cli@1.0.0-beta.10 Adding jquery library in angular-cli project


  1. Install jquery via npm :
 npm install jquery --save 

Install typings for the library:

To add typings for a library, do the following:

typings install jquery --global --save

  1. Add jquery to angular-cli-build.js file to vendorNpmFiles array:

    This is required so the build system will pick up the file. After setup the angular-cli-build.js should look like this:

Browse the node_modules and look for files and folders you want to add to the vendor folder.

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      // ...


  1. Configure SystemJS mappings to know where to look for jquery :

    SystemJS configuration is located in system-config.ts and after the custom configuration is done the related section should look like:

/** Map relative paths to URLs. */
const map: any = {
  'jquery': 'vendor/jquery'

/** User packages configuration. */
const packages: any = {
// no need to add anything here for jquery


  1. In your src/index.html add this line
<script src="vendor/jquery/dist/jquery.min.js" type="text/javascript"></script>

Your other options are:

<script src="vendor/jquery/dist/jquery.js" type="text/javascript"></script>


<script src="/vendor/jquery/dist/jquery.slim.js" type="text/javascript"></script>


<script src="/vendor/jquery/dist/jquery.slim.min.js" type="text/javascript"></script>

  1. Importing and using jquery library in your project source files:

    Import jquery library in your source .ts files like this:

declare var $:any;

export class YourComponent {
  ngOnInit() {
       // now you can DO, what ever you want 

If you followed the steps correctly you should now have jquery library working in your project. Enjoy!