web-dev-qa-db-fra.com

Ajout d'un composant jQuery à Angular 6

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:

  1. Couru

npm install jquery

'et vérifié jquery.min.js était dans le chemin indiqué ci-dessus.

  1. 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 []'.

  2. 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. 

jqueryangularangular-cli
2
brohjoe

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.

1
Subarata Talukder

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.

0
Katja