Unable to add jQuery to an angular cli project

Question

I want to use jQuery in my angluar cli project. I have tried the instructions here: https://www.gurustop.net/blog/2016/11/18/3821/jquery-angular2-angularcli-how-to

1. Install jQuery

    npm install --save jquery; 

2. Install jQuery type defination for type checking.

    npm install --save-dev @types/jquery 

3. Add refenece of jquery file in "scripts" array inside angular-cli.json file.

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

4. Import jquery in my app.component.ts file

    import { Component } from '@angular/core'; import * as jQuery from 'jquery'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'app'; test = jQuery("body"); } 

However, when a do a ng build I get the following error:

ERROR in ./src/app/app.component.ts (2,25): Module ''jquery'' resolves
to a non-module entity and cannot be imported using this construct.

If I remove the import * as jQuery from 'jquery'; and `ng build' I get:

ERROR in ./src/app/app.component.ts (10,10): Cannot find name 'jQuery'.

Not sure where to go from here.

Update 1

Based on what @Saravana posted. If I just do declare const $: JQueryStatic and ng build , I get the error:

ERROR in ./src/app/app.component.ts (2,19): Cannot find name 'JQueryStatic'.

but if I do what Saravana suggested on his first post before he deleted it.

import "jquery"; 
declare const $: JQueryStatic;

It builds without complain. So I think Saravana you should revert your post back.

Answer 1

Since the jQuery library adds a the global variables $ and jQuery , you can just declare the variable:

import "jquery"; 
declare const $: JQueryStatic;

Answer 2

Upgraded to the latest cli, created a new project, and moved my bits in and the instructions outlined above worked just fine.

npm uninstall -g angular-cli

npm cache clean

npm install -g @angular/cli@latest