in...">
All geek questions in one place

Using jQuery with Angular 2

The tutorial that I used used jQuery inside the type folder used

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

inside app.component but not working.

Tried to import the library into side.html via CDN, then use declare var $: any; still not working

JQuery is installed via NPM, and it moves to system.config.ts, as shown below.

 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 through angular-cli. I have a 404 error, but the application still does not work. It is assumed that it will display the keyboard in the console

 https://plnkr.co/edit/8HW67qLUF3t8zmTigXH6?p=preview
+5
source share
2 answers

You mentioned that you use only the tutorial, therefore you are not tied to the SystemJS configurator itself.

If you use the Angular CLI instead (my personal recommendations), you can do it like this:

Install jQuery, the actual library

  npm install jquery --save

Install jQuery TypeScript autocomplete

  npm install @ types / jquery --save-dev

Then go to the file. / angular-cli.json in the root folder of the Angular CLI project and find the scripts: [] property, add it inside it:

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

(or use the slim version if your cup of tea, keep the rest of the way as it is)

After that, jQuery will be available to you as a global variable. You can log in to jQuery.fn.jquery (which brings the jQuery version) to make it work brilliantly.

PS

If you want to use Webpack or gulp directly, we need to see a sample of your configuration file or what you used to create the project (for Webpack and Gulp projects).

+5
source

Jquery is awesome when you just want to do the DOM manipulation, I feel that this is one of the main disadvantages for Angular, the simple DOM access on one line would be great. Here you go. Download jquery to index.html file. You also need to include a definition file to make jQuery functions work inside typescript functions.

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

Source: https://habr.com/ru/post/1259871/

More articles:


All Articles