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:


"../node_modules/jquery/dist/jquery.min.js"

(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?

    • Aleksander Rebula

      I agree, mixing angular and jQuery might not be a great idea, however, what if you want to re-use a an excellent jQuery plugin in your site? well, then you need to support jQuery.

  • 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!!

      • Aleksander Rebula

        To me when I run ng serve, I get the message that it cannot find name ‘$’. :(

        • Gino

          import $ from ‘jquery/dist/jquery’;

          :)

    • Aleksander Rebula

      Same here… Did you find the solution? I am still struggling…

  • 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’.)
    slider.component.ts:
    export class SliderComponent implements OnInit {
    ngOnInit() {
    console.log(jQuery.fn.jquery);
    }
    }
    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,
    manoj

  • Jon

    When I try to use $ in a service the transpiler says “Cannot find name $”. Thoughts on correcting this? Thanks.

    • Aleksander Rebula

      Same here.. have you find the solution? I would appreciate if you could share it. Thank you in advance.

  • Pingback: syarat cpns 2017()

  • midhilaj m (milla)
    • Aleksander Rebula

      Thank you, but this solution implies that if using

      declare var $:any;

      then your jQuery is not typed. I knew about this solution, however I want to have jQuery typed as well.

  • JuniorM

    Install jQuery. (skip if already installed): npm install jquery –save
    Install types for jQuery: npm install @types/jquery –save
    Import jQuery in app.module.ts: import * as $ from ‘jquery’;
    Then in constructor(){} of your component you can add: $(document).ready(function() { console.log(‘jquery is working’); });

    ref: https://stackoverflow.com/questions/40994719/cannot-find-name-jquery-in-angular2

    • Aleksander Rebula

      Did you try this solution? I tried and it does not work for me.

      • Aleksander Rebula

        Correction. This does work! :D I tried it early today and was unsuccessful for some reason. So for the whoe day I’ve been trying to find the solution. WOW! LOL I need to go give a point to the guy! :D

  • Aleksander Rebula

    OK, so I got it working, thank you! However I did not have to include anything into .angular-cli.json.

  • Pingback: Sfaturi practice()

  • Pingback: Event Managers in Hyderabad()

  • Carlos Estrada

    this is pretty straight forward,
    Add to the steps:
    Import on the desired component:

    import $ from ‘jquery/dist/jquery’;

    and to test:

    $( document ).ready(function() {
    console.log(“jquery is ready to use on angular component”);
    });

  • Pingback: Bandar Togel Sydney()

  • Pingback: GVK BIO()

  • Pingback: Corporate Event Planners in Hyderabad()

  • Pingback: DMPK()