Adding jQuery to Angular-CLI project

angular-cli logo

Angular-cli project became quite famous after the latest ng-conf and now more and more people are using it. I am one of them and to be honest I enjoy the simplicity and the convenience it gives you when you want to start a new project with just the basic components. But when it comes to extend the basic functionality, things can be tricky. In one small project that I am working these days I had to include jQuery as dependency, so I followed the wiki instructions and everything worked ok in development mode. But not in production. jQuery was not loading at all. So here is the solution that worked for me:

  1. First step is to add jQuery by running:

2. In your angular-cli-build.js add it in vendorNpmFiles AND in polyfills array like below (otherwise it won’t work in ng server -prod)

3. In system-config.ts add it in map and packages like this:

4. And finally in your index.html add the script

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

That’s it. Enjoy

2 thoughts on “Adding jQuery to Angular-CLI project”

  1. Steve Falise says:

    My angular-cli build has neither a angular-cli-build.js or a system-config.ts file. I didn’t see a date on this post, can you provide updated instructions? I was attempting to create an angular2 directive which wraps the jquery kendo tools (the angular2 version of kendo has not been fully implemented yet).

    Any help would be appreciated, thanks

    1. admin says:

      Hi Steve, apologies for my late reply.
      Which version of angular-cli are you using? The latest one is based on webpack so you have to include jquery in scripts array in angular-cli.json file.
      Please have a look here: https://github.com/unseen1980/Angular2-News-Media/blob/c2b51937c4dff724968826aaa8508ecd9bf963ad/angular-cli.json

Leave a Reply

Your email address will not be published. Required fields are marked *