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
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 :)
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.
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.
"test"{
scripts : [
"node_modules/jquery/dist/jquery.js"
]
}
"build"{
scripts : [
"node_modules/jquery/dist/jquery.js"
]
}
Hope this helps!
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";
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
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).
Bootstrap, would this work? My concern is Bootstrap also requires JQuery so would my application have two versions of Jquery?make sure your path is correct ?
try this [../node_modules/jquery/dist/jquery.js]
You can try adding the jQuery types, I do this after I install jQuery from npm.
npm install --save-dev @types/jquery
For me executing npm i core-js worked. hope this helps you too
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
JQuery(document).foundation()jQuery(document).foundation()import * as jQuery from 'jquery'; window['$'] = jQuery;