Angular 6 ReferenceError: $ is not defined error with JQuery

Question

I have installed angular 6 with foundation but I am getting an error with JQuery.

Uncaught syntaxerror: unexpected identifier ReferenceError: $ is not defined

In my component, i have

declare var $:any

onNgInit () {
  $(document).foundation()
}

I have all imports in my angular.json

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

I have tried everything I found on the internet but still facing the same error. Also to add this used to work when I was working with Angular 4

JQuery gives a squiggly line on (doucument) and also for the jquey, it gives a squiiggly line on foundation(). Do help me out most — user3701188, Jun 15 '18 at 09:56
For me adding the following to the **polyfills.ts** solved this issue `import * as jQuery from 'jquery'; window['$'] = jQuery;` — Gireesh, May 05 '19 at 18:04
@Gireesh your solution worked for me when nothing else would! Was having the problem with Angular 8. — Asheq Reza, Sep 24 '19 at 15:44
You should try this answer, worked well for Angular 10 https://stackoverflow.com/a/45573919/11156666 — okan, May 30 '21 at 09:35

score 11 · Answer 1 · answered Jul 27 '18 at 23:02

11

This is something related to the way ES6 modules isolation works. Loading from the angular.json file is the same as the script tag on an index.html file (the global scope). When you import it on any component you're getting a new local copy, so avoid importing it this way.

To prevent intellisense and compiling issues, create a typings.d.ts file with the following content:

declare var $: any;
declare var jQuery: any;

Now you're ready to go :)

answered Jul 27 '18 at 23:02

elvin

961
1
9
26

1

Could you please look into https://stackoverflow.com/questions/52198501/referenceerror-is-not-defined-in-angular. I thought your solution solved my issue but it doesn't unfortunately. – Manu Chadha Sep 07 '18 at 05:20

score 9 · Answer 2 · answered Jun 12 '18 at 07:36

9

Install Jquery Plugin For angular

npm install jquery --save

Now in your app.module.ts add

import * as $ from "jquery";

It will make the work done.

answered Jun 12 '18 at 07:36

BlizZard

587
5
22

I did tried this as other suggestions online but none of them worked – user3701188 Jun 14 '18 at 21:47
I get this 'foundation' does not exist on type 'JQuery'. – user3701188 Jun 18 '18 at 23:20

score 7 · Answer 3 · answered Nov 27 '18 at 07:57

7

If you have jquery installed and still getting this error. In every component where you are using $ add at the top import * as $ from "jquery";

answered Nov 27 '18 at 07:57

karoluS

2,980
2
23
44

score 7 · Answer 4 · answered May 19 '20 at 11:53

Always take care that there are by default two "scripts" sections in angular.json. Most of the developers casually giving the reference in "scripts" tag like this...

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

without verifying if they are adding this to test "script" or the "build" script...

However, just verify once that you are adding this to "build" section and not in "test" section in angular.json as this is the silly mistake a developer always do.

wrong:

"test"{
   scripts : [
     "node_modules/jquery/dist/jquery.js"
   ]
}

right:

"build"{
   scripts : [
     "node_modules/jquery/dist/jquery.js"
   ]
}

Hope this helps!

Just came to say that this answer just helped me. I was setting up a new Angular project and a couple of our clients really like jQuery DataTables so obviously I needed jQuery and couldn't for the life of me figure out how something I've done quite a bit could just not work. It was this, put the script in the wrong spot. — jbeverid, Feb 03 '21 at 16:42

score 4 · Answer 5 · answered May 17 '20 at 12:08

4

For me adding the following to the polyfills.ts solved this issue

import * as jQuery from 'jquery';
window['$'] = jQuery;

Note: Added this as a comment to the question as well

answered May 17 '20 at 12:08

Gireesh

468
7
13

score 1 · Answer 6 · edited Jul 27 '18 at 19:37

For those looking for an answer to this the solution is to import node types (I am assuming you have already used npm to install --save jquery and foundation-sites):

npm install --save @types/node

then in your tsconfig.app.json under your module, make sure the types section (under compilerOptions) reads:

"types": ["node"]

then in your code:

import * as $ from 'jquery';
const Foundation = require('foundation-sites'); 

.... other declarations etc... 

new Foundation.default.DropdownMenu($("#yourelementid"), {});

I'm using Dropdown menu as an example but this should work with all of the different foundation plugins (I have not tested though).

If I am using `Bootstrap`, would this work? My concern is `Bootstrap` also requires `JQuery` so would my application have two versions of `Jquery`? — Manu Chadha, Sep 07 '18 at 05:27

score 0 · Answer 7 · answered Jun 11 '18 at 09:22

0

make sure your path is correct ?

try this [../node_modules/jquery/dist/jquery.js]

answered Jun 11 '18 at 09:22

Fawad Mukhtar

780
5
9

3

The path has been changed in Angualar 6 , the path you have written doesnt work anymore – user3701188 Jun 11 '18 at 11:21

score 0 · Answer 8 · edited Dec 05 '19 at 13:19

0

You can try adding the jQuery types, I do this after I install jQuery from npm.

npm install --save-dev @types/jquery

edited Dec 05 '19 at 13:19

WasiF

26,101
16
120
128

answered Jul 29 '18 at 21:56

Dale C

567
6
9

score 0 · Answer 9 · answered Dec 20 '20 at 14:37

0

For me executing npm i core-js worked. hope this helps you too

answered Dec 20 '20 at 14:37

Amanullah Soomro

21
3

score 0 · Answer 10 · answered Jan 22 '21 at 18:59

0

I tried several solutions, finally it worked by inserting the style directly in the style.css then the global one, then I inserted the js function in the app.component.ts and the code directly in the app.componet.html, after doing this and seeing that it worked, I moved everything into a component.

Try to look this: https://stackblitz.com/edit/angular-slick-carousel-r7u74h

answered Jan 22 '21 at 18:59

Gennaro

1
1

1

Please try putting explanation from the linked URl instead of just posting the URL. – kk. Jan 22 '21 at 21:04

Angular 6 ReferenceError: $ is not defined error with JQuery

10 Answers10

wrong:

right: