CODEWITHSUNDEEP
jquerytypescriptangular-cli
jon antoine
jon antoine

Reputation: 396

Unable to add jQuery to an angular cli project

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.

Upvotes: 3

Views: 1584

Answers (2)

Benjamin
Benjamin

Reputation: 131

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

Upvotes: 0

Saravana
Saravana

Reputation: 40564

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

import "jquery"; 
declare const $: JQueryStatic;

Upvotes: 3

Related Questions