How to Include and Use jQuery in Angular CLI Project

A simple, easy process

Jun 29, 2017 · 2 min read
Image for post
Image for post

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. 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. Then, re-run it using Ng serve.

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

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

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

This demo of the Angular CLI project uses jQuery.

Image for post
Image for post
Demo of Angular Cli using jQuery Animations

Take a look at this GitHub demo.

That’s all for now!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store