web-dev-qa-db-fra.com

Comment inclure correctement jQuery dans angular cli 1.0.0-rc.0?

J'utilise le composant select2 basé sur jQuery dans mon projet AngularJS. J'ai eu un problème similaire en tant que gars ici: https://github.com/fronteed/icheck/issues/322 , et l'ai résolu en utilisant des conseils à partir de là. Pour être précis, j'ai reçu une erreur TypeError: $(...).select2 is not a function lorsque je n'utilisais pas ce conseil.

c'est-à-dire que j'ai ajouté les lignes suivantes à la configuration de Webpack dans @angular/cli/models/webpack-configs/common.js.

plugins: [
  new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
]

Est-ce la meilleure façon d'activer jQuery en angulaire/cli?

Je ne pense pas que faire la même chose que dans https://github.com/angular/angular-cli/wiki/stories-global-lib est une manière correcte, car

a) bundles webpack jQuery sans besoin de le spécifier dans les scripts

b) il génère toujours une erreur TypeError: $(...).select2 is not a function lorsque vous l'incluez comme décrit dans l'article.

javascriptjqueryangularangular-cli
9
metamaker

J'ai pu réaliser ce dont j'avais besoin en exposant Webpack. Utilisez la commande ng eject.

Tout d'abord, installez jQuery en utilisant npm install -S jquery (Et j'ai également installé npm install -S select2, Car j'en avais également besoin).

Ensuite, assurez-vous d'avoir sauvegardé votre fichier package.json, car pendant ng eject Angular CLI essaiera d'ajouter ses dépendances Webpack à l'intérieur de votre package.json.

Après que ng eject Ait fini de fonctionner, à l'intérieur de webpack.config.js J'ai ajouté

// ... Inside require/imports part
const ProvidePlugin = require('webpack/lib/ProvidePlugin');

// ... Inside `plugins` section of Webpack configuration
new ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })

Et maintenant, select2 ajoute correctement la fonction $(...).select2 à l'objet jQuery global!

Pour utiliser jQuery avec select2 dans votre fichier .ts, vous pouvez ajouter les lignes suivantes au début de ce fichier:

import "select2";
import "jquery";
declare var $: any;

// Somewhere deep within component
// ...

$(this.input.nativeElement)
    .select2(config)
    .on("change select2:select select2:unselect", (e: any) => this.onSelect2ElementChange(e));

// ...
0
metamaker

j'utilise jQuery dans mon projet comme suit.

  1. Installer jQuery

    npm install --save jquery

  2. Installez la définition de type jQuery pour la vérification de type.

    npm install --save-dev @types/jquery

  3. Ajoutez le refenece du fichier jquery dans le tableau "scripts" à l'intérieur du fichier angular-cli.json.

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

  4. importez jquery dans n'importe quel composant que vous souhaitez utiliser.

    import * as jQuery from 'jquery';

c'est ça. de la même manière, vous pouvez également utiliser d'autres bibliothèques comme moment.js, d3.js etc.

26
HirenParekh

Vous pouvez également utiliser expose-loader . L'exemple ci-dessous est écrit pour le webpack 2,

{ test: /[\/]jquery\.js$/,
    use: [
      { loader: 'expose-loader', query: 'jQuery' },
      { loader: 'expose-loader', query: '$' }
    ]
  },
1
maqduni

L'ajouter de la même manière que le lien que vous avez fourni garantira qu'il est chargé. Sinon, essayez ci-dessous dans votre composant.

npm install jquery

Ensuite, utilisez dans votre composant

declare var $:any;
var $ = require('jquery');
0
Evans M.