Comment importer jQuery dans des projets Angular2 TypeScript?

Étape 1: installez jquery dans votre projet

 npm install jquery 

Étape 2: ajout du type pour jquery

 npm install -D @types/jquery 

Étape 3: Utilisez-le dans votre composant!

 import * as $ from 'jquery'; 

Prêt à utiliser $!

jQuery.service.ts

  import { OpaqueToken } from '@angular/core' export let JQ_TOKEN = new OpaqueToken('jQuery'); 

index.ts`

 export * from './jQuery.service'; 

app.module.ts

declare let jQuery : Object;

 @NgModule({ providers: [ { provide: TOASTR_TOKEN, useValue: toastr }, { provide: JQ_TOKEN, useValue: jQuery }, }) export class AppModule { } 

comment utiliser Jquery en composant

  import { Component, Input, ViewChild, ElementRef, Inject } from '@angular/core' import { JQ_TOKEN } from './jQuery.service' @Component({ selector: 'simple-modal', template: ` 
 
 
 
 × 
{{title}}
 
 
  
 
 
 
 `, styles: [` .modal-body { height: 250px; overflow-y: scroll; } `] }) export class SimpleModalComponent { @Input() title: ssortingng; @Input() elementId: ssortingng; @Input() closeOnBodyClick: ssortingng; @ViewChild('modalcontainer') containerEl: ElementRef; constructor(@Inject(JQ_TOKEN) private $: any) {} closeModal() { if(this.closeOnBodyClick.toLocaleLowerCase() === "true") { this.$(this.containerEl.nativeElement).modal('hide'); } } } 

Si vous utilisez “@ angular / cli”, installez alors:

 npm install jquery --save 

Deuxième étape installer:

 install: npm install @types/jquery --save-dev 

Et trouvez votre nom de fichier dans “angular-cli.json” à la racine et ajoutez l’intérieur de comme:

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

Maintenant ça va marcher.

Vous devriez avoir un typings.json qui pointe vers votre fichier de frappe jQuery. Ensuite:

systemjs.config (notice de configuration de carte pour jquery)

 System.config({ defaultJSExtensions: true, paths: { // paths serve as alias 'npm:': 'node_modules/' }, map: { 'app': 'app', jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js', material: 'npm:material-design-lite/dist/material.min.js', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', .... }, packages: { app: { main: 'main', format: 'register', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' } }, }); 

En composant:

 import $ from 'jquery'; 

Ensuite, utilisez $ comme d’habitude.

Vous pouvez également charger votre fichier Javascript jQuery dans une balise de script normale dans la section head de votre fichier index.html.

     ...  ... 

Ensuite, dans le composant ou la directive où vous en avez besoin, déclarez simplement la variable $ nécessaire à jQuery, car vous ne disposerez pas des saisies pour tous les plugins dont vous avez besoin:

 import {Directive} from '@angular/core'; declare var $: any; @Directive({ selector: "my-first-directive" }) export class MyFirstDirective { constructor() { $(document).ready(function () { alert("Hello World"); }); } } 

Je ne pense pas que l’utilisation de jQuery avec Angular 2. devrait poser problème Si les typages et les dépendances pour jQuery sont correctement installés, il ne devrait pas être problématique d’utiliser JQuery dans Angular 2.

J’ai pu utiliser jquery dans mon projet 2 angular avec une installation correcte. Et par installation correcte, j’entends l’installation de typages JQuery afin de le reconnaître en texte typescript.

Après cela, j’ai pu utiliser jquery de la manière suivante:

 jQuery(document).ready({ ()=>{ alert("Hello!"); }; }); 

C’est une vieille question et il y a déjà des réponses. Cependant, les réponses existantes sont trop compliquées (la réponse de l’utilisateur1089766 contient de nombreux éléments inutiles). J’espère que cela aide quelqu’un de nouveau.

Ajoutez dans votre fichier index.html .

Créez jQuery.Service.ts:

 import {InjectionToken} from "@angular/core"; export let jQueryToken = new InjectionToken('jQuery'); 

Dans votre fichier de module, ajoutez ce jQueryToken au fournisseur:

 providers:[ { provide: jQueryToken, useValue: jQuery }] 

Maintenant, @Inject(jQueryToken) et il est prêt à être utilisé. Supposons que vous souhaitiez utiliser un nom de composant ExperimentComponent, puis:

 import {Component, Inject, OnInit} from '@angular/core'; import {jQueryToken} from "./common/jquery.service"; @Component({ selector: 'app-experiment', templateUrl: './experiment.component.html', styleUrls: ['./experiment.component.css'] }) export class ExperimentComponent implements OnInit { constructor(@Inject(jQueryToken) private $: any) { $(document).ready(function () { alert(' jQuery is working'); }); } ngOnInit() { } } 

Chaque fois que vous ouvrez ExperimentComponent, la fonction d’alerte appelle et affiche le message.