web-dev-qa-db-fra.com

Comment utiliser le plugin jQuery avec Angular 4?

Je souhaite utiliser un curseur de plage dans un projet angular et j'ai essayé d'utiliser un module disponible pour angular 4.

Cela fonctionne bien lors de la compilation, mais lorsque j'essaie de le construire pour le déploiement, l'erreur ci-dessous est générée.

enter image description here

J'ai vérifié l'option d'utiliser le plug-in jQuery directement dans le projet angular et je n'ai que les options pour le faire dans Angular 2.

Existe-t-il un moyen d'utiliser des plugins jQuery dans Angular 4?

S'il vous plaît, faites-moi savoir.

Merci d'avance!

jqueryangular
82
SP-TY

Oui, vous pouvez utiliser jquery avec Angular 4

Pas:

1) Dans index.html, mettez la ligne ci-dessous dans la balise.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

2) Dans le fichier ts de composant ci-dessous, vous devez déclarer var comme ceci

import { Component } from '@angular/core';
declare var jquery:any;
declare var $ :any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular 4 with jquery';
  toggleTitle(){
    $('.title').slideToggle(); //
  }

}

Et utilisez ce code pour le fichier HTML correspondant, comme ceci:

<h1 class="title" style="display:none">
  {{title}}
</h1>
<button (click)="toggleTitle()"> clickhere</button>

Cela fonctionnera pour vous. Merci

155
GAURAV ROY

Installer jquery avec npm

npm install jquery --save

Ajouter des saisies

npm install --save-dev @types/jquery

Ajouter des scripts à angular-cli.json

"apps": [{
  ...
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
  ],
  ...
}]

Construire le projet et servir

ng build

J'espère que cela t'aides! Profitez du codage

191
Ervin Llojku

Installez jQuery à l'aide de NPM Jquery NPM

npm install jquery

Installer le fichier de déclaration jQuery

npm install -D @types/jquery

Importer jQuery dans .ts

import * as $ from 'jquery';

appeler en classe

export class JqueryComponent implements OnInit {

constructor() {
}

ngOnInit() {
    $(window).click(function () {
        alert('ok');
        });
    }

}
34
Govarthanan Venunathan

Vous n'êtes pas obligé de déclarer une variable jQuery lors de l'installation de @ types/jquery.

declare var jquery:any;   // not required
declare var $ :any;   // not required

Vous devriez avoir accès à jQuery partout.

Ce qui suit devrait fonctionner:

jQuery('.title').slideToggle();
27
Soori

Vous ne devez pas utiliser jQuery dans Angular. Bien que cela soit possible (voir les autres réponses à cette question), cela est découragé. Pourquoi?

Angular contient une propre représentation du DOM dans sa mémoire et n'utilise pas de sélecteurs de requête (fonctions comme document.getElementById(id)) comme jQuery. Au lieu de cela, toute la manipulation du DOM est effectuée par Renderer2 (et des directives angulaires comme * ngFor et * ngIf accédant à ce Renderer2 en arrière-plan/code-cadre). Si vous manipulez DOM avec jQuery vous-même, vous le ferez tôt ou tard ...

  1. Faites face à des problèmes de synchronisation et faites en sorte que des éléments n'apparaissent pas correctement ou ne disparaissent pas au bon moment sur votre écran.
  2. Vous rencontrez des problèmes de performances dans des composants plus complexes, car la représentation DOM interne d'Angular est liée à zone.js et à son mécanisme de détection des modifications; par conséquent, la mise à jour manuelle du DOM bloquera toujours le fil d'exécution de votre application.
  3. Avez d'autres erreurs déroutantes dont vous ne connaissez pas l'origine.
  4. Impossibilité de tester correctement l'application (Jasmine vous demande de savoir quand les éléments ont été rendus)
  5. Impossibilité d'utiliser Angular Universel ou WebWorkers

Si vous voulez vraiment inclure jQuery (pour prototyper un prototype que vous allez définitivement jeter à 100%), je vous recommande au moins de l'inclure dans votre package.json avec npm install --save jquery au lieu de le récupérer à partir du CDN de Google.

TLDR: Pour apprendre à manipuler le DOM de la manière Angular, veuillez tout d’abord suivre le tutoriel officiel du tour-of heroes: https://angular.io/tutorial/toh-pt2 = Si vous devez accéder à des éléments situés plus haut dans la hiérarchie DOM (parent ou document body) ou pour toute autre raison, des directives telles que *ngIf, *ngFor, des directives personnalisées, des tuyaux et autres angular des utilitaires tels que [style.background], [class.myOwnCustomClass] ne répondent pas à vos besoins, utilisez Renderer2: https://www.concretepage.com/angular-2/angular-4-renderer2 -exemple

11
Phil

Essaye ça:

import * as $ from 'jquery/dist/jquery.min.js';

Ou ajoutez des scripts à angular-cli.json:

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

et dans votre fichier .ts:

declare var $: any;
8
Bettaibi Nidhal

Vous pouvez mettre à jour votre version de typages jquery comme suit

npm install --save @types/jquery@latest

J'ai eu cette même erreur et je suis allé à si pendant 5 jours surfer sur le net pour une solution.il a fonctionné pour moi et cela devrait fonctionner pour vous

1
Didi Pepple

Si vous avez besoin d'utiliser d'autres bibliothèques dans les projets - TypeScript - et pas seulement dans les projets - angle - vous pouvez rechercher les fichiers tds (TypeScript Declaration File) qui sont protégés et qui contiennent des informations sur les méthodes, les types, les fonctions, etc. qui peut être utilisé par TypeScript, généralement sans importation. declare var est la dernière ressource

npm install @types/lib-name --save-dev
1
Guaracy A. Lima

Essayez d'utiliser - declare let $: any;

ou importez * sous la forme $ à partir de 'jquery/dist/jquery.min.js'; fournir le chemin exact de la bibliothèque

0
Anshu Bansal

Vous pouvez utiliser webpack pour fournir le. Il sera ensuite injecté DOM automatiquement.

module.exports = {
  context: process.cwd(),
  entry: {
    something: [
      path.join(root, 'src/something.ts')
    ],
    vendor: ['jquery']
  },
  devtool: 'source-map',
  output: {
    path: path.join(root, '/dist/js'),
    sourceMapFilename: "[name].js.map",
    filename: '[name].js'
  },
  module: {
    rules: [
      {test: /\.ts$/, exclude: /node_modules/, loader: 'ts-loader'}
    ]
  },
  resolve: {
    extensions: ['.ts', '.es6', '.js', '.json']
  },
  plugins: [

    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),

  ]
};
0
David Dehghan