Como importar jQuery para projetos TypeScript Angular2?

Eu quero envolver algum código jQuery em uma diretiva Angular2.

Eu instalei a biblioteca jQuery para o Typings no meu projeto com o seguinte comando:

typings install dt~jquery --save --global

Então agora eu tenho pasta jquery em typings/global pasta typings/global no meu diretório de projeto. Além disso, a seguinte nova linha foi adicionada ao meu arquivo typings.json :

 { "globalDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160602141332", "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", "node": "registry:dt/node#6.0.0+20160807145350", "jquery": "registry:dt/jquery#1.10.0+20160908203239" } } 

Eu comecei a escrever uma nova diretiva Angular2 (que eu importei para o arquivo app-module ), mas eu não sei como importar corretamente a biblioteca jQuery. Aqui está o meu arquivo de origem:

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

Mas não posso usar nem $ nem jQuery . Qual é o próximo passo?

Etapa 1: obtenha o jquery em seu projeto

 npm install jquery 

Etapa 2: adicione o tipo para jquery

 npm install -D @types/jquery 

Passo 3: Use em seu componente!

 import * as $ from 'jquery'; 

Pronto para usar $!

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 { } 

como usar o Jquery no componente

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

Se você estiver usando “@ angular / cli”, instale:

 npm install jquery --save 

Segunda etapa de instalação:

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

E encontre seu nome de arquivo em “angular-cli.json” na raiz e adicione o interior de como:

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

Agora vai funcionar.

Você deve ter um typings.json que aponte para o seu arquivo de digitação jquery. Então:

systemjs.config (observe a configuração do mapa para 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' } }, }); 

No componente:

 import $ from 'jquery'; 

Então use $ como de costume.

Você também pode carregar seu arquivo JavaScript jQuery em uma tag de script normal na seção head do seu index.html.

     ...  ... 

Em seguida, no componente ou diretiva onde você precisa, basta declarar a variável $ necessária para o jQuery, já que você não terá as tipificações para todos os plug-ins necessários:

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

Eu não acho que deve ser um problema para usar jquery com angular 2. Se as tipings e as dependencies para jquery estão instaladas corretamente, então não deve ser um problema para usar jquery em angular 2.

Consegui usar o jquery no meu projeto angular 2 com instalação adequada. E por instalação adequada, quero dizer a instalação de tipografias jquery para reconhecê-lo em texto datilografado.

Depois disso, pude usar o jquery da seguinte maneira:

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

Essa é uma pergunta antiga e já existem algumas respostas. No entanto, as respostas existentes são excessivamente complicadas (a resposta do user1089766 contém muitos materiais desnecessários). Espero que isso ajude alguém novo.

Adicione seu arquivo index.html .

Crie jQuery.Service.ts:

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

No seu arquivo de módulo, adicione este jQueryToken ao provedor:

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

Agora @Inject(jQueryToken) e está pronto para usar. Vamos dizer que você quer usar dentro de um nome de componente ExperimentComponent então:

 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() { } } 

Sempre que você abrir o ExperimentComponent, a function de alerta irá chamar e exibir a mensagem.