Angular 2: Here’s how to use jQuery in an Angular CLI project

Please do not take the post as an endorsement of using jQuery with Angular 2. I do not think it’s a good idea. Most stuff you use jQuery for cam be done directly from Angular 2.

However, there might be legitimate reasons for using jQuery, like using jQuery widgets and plugins that do not have a non-jQuery based equivalent. If you are facing that, try this guide:

If you are using the Angular CLI (my personal recommendation), you can use jQuery with Angular 2 in very few and easy steps as follows:

First: Install jQuery, the actual library

npm install jquery --save

Then: Install jQuery TypeScript autocomplete

npm install @types/jquery --save-dev

Finally: Go to the ./angular-cli.json file at the root of your Angular CLI project folder, and find the scripts: [] property, add this inside it:


(or use the slim version if that’s your cup of tea, keep the rest of the path as-is)

After that, jQuery will be available for you as a global variable. You can log jQuery’s version (which is available as jQuery.fn.jquery) to ensure it’s working brilliantly.

Share With Friends:

How did I learn that?

As a bonus for coming here, I'm giving away a free newsletter for web developers that you can sign up for from here.

It's not an anything-and-everything link list. It's thoughtfully collected picks of articles and tools, that focus on Angular 2+, ASP.NET (4.x/MVC5 and Core), and other fullstack developer goodies.

Take it for a test ride, and you may unsubscribe any time.

You might also want to support me by checking these out [Thanks]:

  • ianlim

    Can this work with aot build?

  • Steve J

    Just wondering why would you want jQuery in your Angular 2 app and is it safe approach of mixing these two?

  • Chris Curnow

    It’s not working for me. It is not recognising the variable jQuery. Strange because there is not much I can do wrong???

    • Chris Curnow

      Ok, I worked out jQuery is not being recognised as a global variable but “$” is. Must be something I’ve down the track over the last year!!

  • Alexander Cyclist

    Hi !!! I’m try your way, but i got error in browser :
    MyPorject/src/app/pages/main/slider/slider.component.ts (43,21): Cannot find name ‘jQuery’.)
    export class SliderComponent implements OnInit {
    ngOnInit() {
    How to fix it ?

  • Adrian Rivera

    Thanks much!

  • Sorry but could you help about loading jquery plugins ? e.g datepicker. How should we load if we only want to use some plugin on some specific pages only ?

  • Manoj Raj

    how to publish and host angular 2 with .net core application on iis 7 in windows server 2008 and windows 7,8,10.

    thanks and regards,