Angular 2 Adding jquery library in angular-cli project


Example

  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: [
      // ...
      'jquery/dist/*.js'


    ]
  });
};

  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>

or

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

and

<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;

@Component({
})
export class YourComponent {
  ngOnInit() {
    $.("button").click(function(){
       // now you can DO, what ever you want 
     });
     console.log();
  }
}

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