J'ai des problèmes à intégrer un composant de liste déroulante en cascade jQuery à mon projet Angular 6. J'ai eu une erreur en essayant d'exécuter ng serve
:
Erreur: ENOENT: aucun fichier ou répertoire de ce type, ouvrez C:\nodeprojects\node_modules\jquery\dist\jquery.min.js.
Voici les étapes que j'ai suivies pour ajouter jQuery à Angular 6:
npm install jquery
'et vérifié jquery.min.js
était dans le chemin indiqué ci-dessus.
angular.json
modifié (Angular 6 n'a plus de fichier 'angular-cli.json') et ajoute le chemin relatif au fichier jquery.min.js
dans la section 'scripts []'.
J'utilise app.component
comme composant cible. Dans app.component.ts
, j'ai entré declare var $: any;
et la fonction de composant personnalisé jquery dans export class AppComponent implements OnInit()
.
Le composant jQuery que je tente d’intégrer à Angular se trouve à https://jsfiddle.net/brohjoe/zgc0n1q5/1/
Le code HTML a été entré dans app.component.html
. J'ai supprimé les références au script src car la bibliothèque jJery minified était répertoriée dans angular.json
comme mentionné et le code custom.js était incorporé dans app.component.ts
comme mentionné ci-dessus.
Après avoir exécuté localhost: 4200, les seuls éléments de l'interface utilisateur qui s'affichent sont les listes déroulantes sans données.
Assurez-vous d'avoir mis à niveau la dernière version de l'interface de ligne de commande angulaire. Pour vérifier, exécutez la commande ng --version.
npm install -g @angular/cli@latest
Pour télécharger le package Bootstrap dans votre projet node_modules, utilisez cette commande. Il inclura également jQuery associé.
npm install --save bootstrap
ou simplement jQuery
npm install jquery --save
Ne cherchez pas le fichier "Angular.json" et éditez ce script sous "Projets: {...}" comme ci-dessous:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
]
Vous pouvez ensuite importer le fichier jQuery dans votre fichier app.module.ts comme suit:
import * as $ from 'jquery';
Après avoir terminé toutes ces tâches, si vous rencontrez la même erreur, vérifiez votre fichier "package.json" pour vous assurer que les packages sont installés.
Je voulais charger un jquery-ui.min.js personnalisé situé dans mon dossier src via "scripts": ["src/jquery-ui.min.js"] de angular.json comme OPTION 1 suggère, mais cela ne fonctionne pas pour certaines configurations de routage angulaire (voir issue ).
Dans ce cas, OPTION 2 works: ajoutez le script avec une URL absolute en tant que balise de script au corps de votre fichier src/index.html.