Using jQuery with Angular 2

Question

The tutorial I was following, used jQuery inside typings folder used

/// <reference path="../typings/tsd.d.ts" />

inside app.component but did not work.

Tried import the library in side index.html through CDN, then use declare var $:any; still not working

Installed jQuery through NPM and it to path inside system.config.ts like the following

paths: {
  // paths serve as alias
  'npm:': 'node_modules/',
  'jquery:': 'node_modules/jquery/dist/jquery.slim.min.js'
},

still no clue

Update:

Now I installed angular via angular-cli. I do not 404 error, but the app still not working. It is supposed to output the keyup in the console

https://plnkr.co/edit/8HW67qLUF3t8zmTigXH6?p=preview

Answer 1

You mentioned you were just using a tutorial, so, not attached to the SystemJS config itself.

If you are using the Angular CLI instead (my personal recommendation), you can do it as follows:

Install jQuery, the actual library

npm install jquery --save

Install jQuery TypeScript autocomplete

npm install @types/jquery --save-dev

Then 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.fn.jquery (which brings jQuery's version) to ensure it's working brilliantly.

P.S.

If you want to use Webpack directly, or gulp, we need to see a sample of your config file, or which project seed did you used to create the project (applicable to Webpack and Gulp projects).

Answer 2

Jquery is awesome when you want to just do a simple DOM manipulation, i feel its one of the major drawbacks for Angular, simple DOM accessing in one line would be great. Here ya go. Load Jquery in your index.html file. Also you need to include the definitions file to get the Jquery functions to work inside typescript functions.

<script type="text/javascript" src="/assets/jquery-3.1.1.min.js" async></script>