How to include and use jQuery in Angular CLI project

You can include jQuery in a very few and easy steps

First install jQuery using npm as follows

npm install jquery — save

Second go to the ./angular-cli.json file at the root of your Angular CLI project folder, and find the scripts: [] property, and include the path to jQuery as follows

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

Note: If you want to use bootstrap in your application or if you already have in your project, make sure to include jQuery before including the bootstrap javascript file as follows. Since bootstrap’s javascript file requires jQuery.

"scripts": [ "../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"]

After including jQuery stop running your Angular CLI application and then re run it using ng serve.

Now to use jQuery, all you have to do is to import it as follows in whatever component you want to use jQuery.

import * from 'jquery';
(or)
declare var $: any;

Take a look at the below code that uses jQuery to animate div on click, especially in second line below, we are importing everything as $ from jQuery.

Here is the demo of Angular CLI project that uses jQuery — https://swarnakishore.github.io/jQuery_with_AngularCLI/

Demo of Angular Cli using jQuery Animations

GitHub Link - https://github.com/SwarnaKishore/jQuery_with_AngularCLI

Thats all for now. If you liked this article, please 👏 below, so that other people can find it! :D