web-dev-qa-db-fra.com

Angular4 ne trouve pas les fonctions de Jquery-UI

J'ai installé Jquery et Jquery-ui

npm install --save jquery jquery-ui

Les fichiers sont dans le répertoire node_modules . J'ai un composant qui déclare Jquery

declare var $: JQueryStatic;

Mes fonctions jquery fonctionnent parfaitement, mais pas les fonctions jquery-ui. 

$('some-div').dropdown(); // works
$('window').draggable(); // draggable is not recognized as a function

Donc, évidemment, mon inclusion pour jquery-ui n’est pas correcte. J'ai essayé d'inclure un tas de choses différentes dans ma page .angular-cli.json sans succès.

Choses que j'ai essayées dans mon fichier .angular-cli:

...
"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/jquery-ui/ui/widgets/draggable.js",
    "../node_modules/jquery-ui/ui/draggable.js",
]

J'ai essayé d'importer directement dans le composant, mais cela posait des problèmes de définition de $ ui. J'ai aussi eu des erreurs que défini n'est pas défini.

J'ai consulté npm jquery-ui et Guides de mise à niveau Jquery-ui

Des idées où je me trompe?

jquerynode.jsangularjquery-ui
6
Chris

La solution pour définir jquery-ui dans angular-cli.json (et éviter de l'ajouter dans index.html) est la suivante: 

1: Importer jquery-ui-dist

    npm install jquery jquery-ui-dist

2: Ajouter des scripts dans angular-cli.json

    "scripts": [
       "../node_modules/jquery/dist/jquery.min.js",
       "../node_modules/jquery-ui-dist/jquery-ui.js"
    ],

Source: https://stackoverflow.com/a/38795318

13
walakad

SAINT FUME! Celui-ci était très gênant, mais je l'ai compris après des jours d'essais. 

Donc, il y a beaucoup de réponses partielles, mais cela devrait être complet. Vous ne pouvez pas, d'après ce que j'ai vu, inclure jquery-ui dans votre cli-angulaire et l'index. Les inclusions de plugins seront écrasées et jQuery comme un fichier global sera indéfini . Je ne pouvais pas le faire fonctionner en utilisant seulement le paramètre angular-cli.json, mais je l’ai obtenu par seulement en utilisant inclusion d'index.

Voici ce qu'il faut faire pour utiliser uniquement l'inclusion de script d'index pour jquery/jquery-ui. 

1: désinstallez jquery et jquery-ui et supprimez-le du package.json

npm uninstall --save jquery jquery-ui

2: supprime le dossier node_modules

3: Supprimez les références à jquery ou jquery-ui dans votre fichier angular-cli.json

4: Recréez les dossiers node_modules (vérifiez bien que jquery-ui n'est pas là, mais cela n'a pas vraiment d'importance tant que angular-cli.json ne l'a pas inclus.

npm install

5: incluez jquery, puis jquery-ui dans votre fichier d'index. J'ai utilisé 2.2.4, parce que je ne fais pas encore confiance à 3.

<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

6: Dans quel composant que vous souhaitiez utiliser le plugin jquery ou jquery inject $

declare var $: any;

$('draggable').draggable(); // WORKS!
7
Chris

s'il vous plaît importer jQuery UI à index.html comme ceci 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Et decare $ dans votre composant comme ça

déclarer var $: any;

1
Dennis Nimitz