Angulaire 6 ReferenceError: $ n'est pas défini d'erreur avec JQuery

J'ai installé angulaire 6 de la fondation, mais j'obtiens une erreur avec JQuery.

Uncaught syntaxerror: unexpected identificateur
ReferenceError: $ n'est pas défini

Dans mon composant, j'ai

declare var $:any

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

J'ai toutes les importations dans mon angulaire.json

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

J'ai essayé tout ce que j'ai trouvé sur internet mais toujours face à la même erreur. Également ajouter cette habitude de travailler lorsque je travaillais avec Angulaire 4

  • Essayez d'utiliser JQuery(document).foundation()
  • Ahould être jQuery(document).foundation()
  • JQuery donne une ligne sinueuse sur (doucument) et aussi pour la jquey, il donne une squiiggly ligne sur fondation(). Ne m'aident plus
  • Pour moi adjonction, à la polyfills.ts résolu ce problème, import * as jQuery from 'jquery'; window['$'] = jQuery;
InformationsquelleAutor user3701188 | 2018-06-11
  1. 7

    C'est quelque chose lié à la façon dont ES6 modules d'isolation travaux. Chargement de la angular.json fichier est le même que la balise de script sur un index.html fichier (la portée mondiale). Lorsque vous importez sur n'importe quel composant que vous souhaitez obtenir une nouvelle copie locale, afin d'éviter l'importation de cette façon.

    Pour empêcher l'intellisense et la compilation des questions, créer un typings.d.ts fichier avec le contenu suivant:

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

    Maintenant, vous êtes prêt à aller 🙂

    InformationsquelleAutor elvin
  2. 4

    Installer le Plugin Jquery angulaire

    ngp installer jquery --enregistrer

    Maintenant dans votre app.module.ts ajouter

    importation * comme $ de "jquery";

    Il va faire le travail fait.

    • J'ai essayé ce que d'autres suggestions en ligne, mais aucun d'entre eux travaillaient
    • Je reçois cette "fondation" n'existe pas sur le type " JQuery<HTMLElement>'.
    InformationsquelleAutor BlizZard
  3. 2

    Si vous avez installé jquery et toujours cette erreur. Dans tous les composants lorsque vous utilisez $ ajouter en haut import * as $ from "jquery";

    InformationsquelleAutor karoluS
  4. 1

    Pour ceux qui recherchent une réponse à cela, la solution consiste à importer les types de nœuds (je suis en supposant que vous avez déjà utilisé mnp à installer --enregistrer jquery et de la fondation-sites):

    npm install --save @types/node

    puis dans votre tsconfig.app.json sous votre module, assurez-vous à 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"), {});

    Je suis en utilisant le menu Déroulant comme un exemple, mais cela devrait fonctionner avec toutes les différentes fondation plugins (je n'ai pas testé tout de même).

    • Si je suis en utilisant Bootstrap, serait-ce de travailler? Ma préoccupation est Bootstrap exige également JQuery ce serait ma demande d'avoir deux versions de Jquery?
    InformationsquelleAutor tstopak
  5. 0

    assurez-vous que votre chemin d'accès est correct ?

    essayer cette
    [../node_modules/jquery/dist/jquery.js]

    • Le chemin a été changé dans Angualar 6 , le chemin que vous avez écrit ne fonctionne pas plus
    InformationsquelleAutor Fawad Mukhtar
  6. 0

    Vous pouvez essayer d'ajouter le jQuery types, je fais ça après que j'ai installé jQuery de mnp.

    npm install --save @types/jquery

    InformationsquelleAutor Dale C