web-dev-qa-db-fra.com

Angular 6 ReferenceError: $ n'est pas une erreur définie avec JQuery

J'ai installé angular 6 avec foundation mais je reçois une erreur avec JQuery. 

Erreur de syntaxe non détectée: identifiant inattendu ReferenceError: $ n'est pas défini

Dans ma composante, j'ai

declare var $:any

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

J'ai toutes les importations dans mon angular.json

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

J'ai essayé tout ce que j'ai trouvé sur Internet, mais faisant toujours face à la même erreur J'ajoute aussi que cela fonctionnait quand je travaillais avec Angular 4

jqueryangularzurb-foundationzurb-foundation-6
2
user3701188

Ceci est lié au fonctionnement de l'isolation des modules ES6. Le chargement à partir du fichier angular.json est identique à la balise de script d'un fichier index.html (la portée globale). Lorsque vous l'importez sur un composant, vous obtenez une nouvelle copie locale, évitez de l'importer de cette façon. 

Pour empêcher intellisense et les problèmes de compilation, créez un fichier typings.d.ts avec le contenu suivant:

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

Maintenant vous êtes prêt à partir :)

5
elvin

Installer le plugin Jquery pour angular

npm install jquery --save

Maintenant, dans votre app.module.ts ajouter

importer * comme $ de "jquery";

Cela fera le travail.

3
BlizZard

Pour ceux qui recherchent une réponse à cette question, la solution consiste à importer des types de nœud (je suppose que vous avez déjà utilisé npm pour installer --save jquery et foundation-sites):

npm install --save @types/node

puis dans votre tsconfig.app.json sous votre module, assurez-vous que la section types (sous compilerOptions) se lit comme suit: 

"types": ["node"]

puis dans votre code: 

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

.... other declarations etc... 

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

J'utilise le menu déroulant à titre d'exemple, mais cela devrait fonctionner avec tous les différents plugins de fondation (je n'ai pas encore testé). 

1
tstopak

Si vous avez jquery installé et obtenez toujours cette erreur. Dans chaque composant sur lequel vous utilisez $, ajoutez en haut import * as $ from "jquery";

0
karoluS

assurez-vous que votre chemin est correct?

essayez ceci [../ node_modules/jquery/dist/jquery.js]

0
Fawad Mukhtar

Vous pouvez essayer d'ajouter les types jQuery. Je le fais après avoir installé jQuery à partir de npm. 

npm install --save @ types/jquery

0
Dale C