jqueryangularzurb-foundationzurb-foundation-6

Reputation: 678

Angular 6 ReferenceError: $ is not defined error with JQuery

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

Upvotes: 21

Answers (10)

Gennaro

Reputation: 1

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

Upvotes: 0

Amanullah Soomro

Reputation: 21

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

Upvotes: 0

Mohit Dixit

Reputation: 329

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!

Upvotes: 8

Gireesh

Reputation: 498

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

Upvotes: 4

Dale C

Reputation: 617

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

npm install --save-dev @types/jquery

Upvotes: 0

karoluS

Reputation: 3218

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";

Upvotes: 7

elvin

Reputation: 981

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 :)

Upvotes: 11

tstopak

Reputation: 11

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).

Upvotes: 1