Como usar o plugin jQuery com Angular 4?

Quero usar um controle deslizante de intervalo em um projeto angular e tentei usar um módulo disponível para angular 4.

Funciona bem durante a compilação, mas quando tento construí-lo para implantação, ocorre o erro abaixo.

Eu verifiquei a opção de usar o plugin jQuery diretamente no projeto angular e só estou recebendo opções para fazer isso no Angular 2.

Existe alguma maneira de usar plug-ins jQuery no Angular 4?

Por favor deixe-me saber.

Desde já, obrigado!

Sim, você pode usar jquery com Angular 4

Passos:

1) index.htmlColoque a linha abaixo na tag.

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

2) No arquivo ts do componente abaixo, você deve declarar var assim

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(); //
  }

}

E use este código para o arquivo html correspondente, como este:

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

Isso vai funcionar para você. obrigado

Instale jquery com npm

npm install jquery --save

Adicionar tipificações

npm install --save-dev @types/jquery

Adicionar scripts a angular-cli.json

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

Construir projeto e servir

ng build

Espero que isto ajude! Aproveite a codificação

Instale o jQuery usando NPM Jquery NPM

npm install jquery

Instale o arquivo de declaração jQuery

npm install -D @types/jquery

Importar jQuery dentro de .ts

import * as $ from 'jquery';

ligar dentro da classe

export class JqueryComponent implements OnInit {

constructor() {
}

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

}

Você não é obrigado a declarar nenhuma variável jQuery conforme instalou @ types / jquery.

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

Você deve ter acesso ao jQuery em todos os lugares.

O seguinte deve funcionar:

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

Você não deve usar jQuery no Angular. Embora seja possível (veja outras respostas para esta pergunta), é desencorajado. Por quê?

O Angular mantém uma representação própria do DOM em sua memória e não usa seletores de consulta (funções semelhantes document.getElementById(id)) como o jQuery. Em vez disso, toda a manipulação do DOM é feita pelo Renderer2 (e diretivas angulares como * ngFor e * ngIf acessando esse Renderer2 no código de fundo / estrutura). Se você manipular DOM com jQuery você mesmo, mais cedo ou mais tarde ...

1. Teve problemas de sincronização e coisas aparecem incorretamente ou não desaparecem na hora certa da sua tela
2. Tenha problemas de desempenho em componentes mais complexos, já que a representação interna do DOM do Angular está ligada ao zone.js e seu mecanismo de detecção de alterações - portanto, atualizar o DOM manualmente sempre bloqueará o thread em que seu aplicativo está sendo executado.
3. Possui outros erros confusos cuja origem você não conhece.
4. Não ser capaz de testar o aplicativo corretamente (Jasmine exige que você saiba quando os elementos foram renderizados)
5. Não ser capaz de usar Angular Universal ou WebWorkers

Se você realmente deseja incluir o jQuery (para gravar algum protótipo que você irá 100% jogar fora definitivamente), eu recomendo pelo menos incluí-lo em seu package.json em npm install --save jqueryvez de obtê-lo do CDN do Google.

TLDR: Para aprender como manipular o DOM da maneira Angular, passe pelo tutorial oficial tour-of heroes primeiro: https://angular.io/tutorial/toh-pt2 Se você precisar acessar elementos superiores na hierarquia do DOM (pais ou document body) ou por algum outro motivo directivas gosto *ngIf, *ngFor, directivas personalizadas, canos e outros utilitários angulares como [style.background], [class.myOwnCustomClass] não satisfazem as suas necessidades, o uso Renderer2: https://www.concretepage.com/angular-2/angular-4 -renderer2-example

Experimente isto:

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

Ou adicione scripts ao angular-cli.json:

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

e em seu arquivo .ts:

declare var $: any;

Você pode atualizar sua versão de tipagem jquery assim

npm install --save @types/jquery@latest

Eu tive esse mesmo erro e estou me perguntando se há 5 dias navegando na net em busca de uma solução. Funcionou para mim e deve funcionar para você

Se você tiver a necessidade de usar outras bibliotecas em projetos --typescript-- não apenas em projetos - ângulo - você pode procurar por tds (Arquivo de declaração TypeScript) que são separados e que possuem informações de métodos, tipos, funções, etc., que pode ser usado pelo TypeScript, geralmente sem a necessidade de importação. declarar var é o último recurso

npm install @types/lib-name --save-dev

Você pode usar o webpack para fornecê- lo. Será então injetado DOM automaticamente.

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'
    }),

  ]
};

Tente usar - declare let $: any;

ou import * as $ from 'jquery / dist / jquery.min.js'; forneça o caminho exato da biblioteca

a solução para o texto datilografado:

Passo 1:

npm install jquery

npm install --save-dev @types/jquery

etapa 2: em Angular.json, adicione:

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

ou em index.html adicione:

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

passo 3: em * .component.ts onde você deseja usar jquery

import * as $ from 'jquery';  // dont need "declare let $"

Então você pode usar jquery da mesma forma que javaScript. Desta forma, VScode suporta auto-sugestão por Typescript

ngOnInit() {
     const $ = window["$"];
     $('.flexslider').flexslider({
        animation: 'slide',
        start: function (slider) {
          $('body').removeClass('loading')
        }
     })
}