¿Cómo usar el complemento jQuery con Angular 4?

Quiero usar un control deslizante de rango en un proyecto angular e intenté usar un módulo disponible para angular 4.

Funciona bien durante la compilación, pero cuando intento construirlo para la implementación, arroja el siguiente error.

Verifiqué la opción de usar el complemento jQuery directamente en el proyecto angular y solo obtengo opciones para hacerlo en Angular 2.

¿Hay alguna forma de que podamos usar los complementos de jQuery en Angular 4?

Por favor hagamelo saber.

¡Gracias por adelantado!

Sí, puedes usar jquery con Angular 4

Pasos:

1) index.htmlPonga debajo de la línea en la etiqueta.

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

2) En el archivo ts del componente a continuación, debe declarar var así

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

}

Y use este código para el archivo html correspondiente como este:

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

Esto funcionará para ti. Gracias

Instalar jquery con npm

npm install jquery --save

Agregar mecanografía

npm install --save-dev @types/jquery

Agregue scripts a angular-cli.json

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

Construir proyecto y servir

ng build

¡Espero que esto ayude! Disfruta codificando

Instale jQuery usando NPM Jquery NPM

npm install jquery

Instale el archivo de declaración jQuery

npm install -D @types/jquery

Importar jQuery dentro de .ts

import * as $ from 'jquery';

llamar dentro de la clase

export class JqueryComponent implements OnInit {

constructor() {
}

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

}

No es necesario que declare ninguna variable de jQuery cuando instaló @ types / jquery.

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

Debería tener acceso a jQuery en todas partes.

Lo siguiente debería funcionar:

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

No debes usar jQuery en Angular. Si bien es posible (consulte otras respuestas para esta pregunta), se desaconseja. ¿Por qué?

Angular tiene una representación propia del DOM en su memoria y no usa selectores de consulta (funciones como document.getElementById(id)) como jQuery. En cambio, toda la manipulación DOM la realiza Renderer2 (y directivas angulares como * ngFor y * ngIf accediendo a ese Renderer2 en el fondo / código de marco). Si manipula DOM con jQuery usted mismo, tarde o temprano ...

1. Tiene problemas de sincronización y las cosas aparecen incorrectamente o no desaparecen en el momento adecuado de su pantalla
2. Tiene problemas de rendimiento en componentes más complejos, ya que la representación DOM interna de Angular está vinculada a zone.js y su mecanismo de detección de cambios, por lo que actualizar el DOM manualmente siempre bloqueará el hilo en el que se ejecuta su aplicación.
3. Tiene otros errores confusos cuyo origen no conoce.
4. No poder probar la aplicación correctamente (Jasmine requiere que sepa cuándo se han renderizado los elementos)
5. No poder usar Angular Universal o WebWorkers

Si realmente quieres incluir jQuery (para tapar algún prototipo que definitivamente desecharás al 100%), te recomiendo que al menos lo incluyas en tu package.json en npm install --save jquerylugar de obtenerlo del CDN de Google.

TLDR: para aprender a manipular el DOM en forma angular, primero consulte el tutorial oficial del tour de héroes: https://angular.io/tutorial/toh-pt2 Si necesita acceder a elementos más altos en la jerarquía DOM (padre o document body) o por alguna otra razón, directivas como *ngIf, *ngFordirectivas personalizadas, tuberías y otras utilidades angulares como [style.background], [class.myOwnCustomClass] no satisfacen sus necesidades, use Renderer2: https://www.concretepage.com/angular-2/angular-4 -renderer2-ejemplo

Prueba esto:

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

O agregue scripts a angular-cli.json:

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

y en su archivo .ts:

declare var $: any;

Puede actualizar su versión de jquery typing así

npm install --save @types/jquery@latest

Tuve este mismo error y he estado en si durante 5 días navegando por la red en busca de una solución. Funcionó para mí y debería funcionar para usted

Si tiene la necesidad de utilizar otras bibliotecas en proyectos --typescript-- no solo en proyectos - angle - puede buscar tds's (Archivo de declaración de TypeScript) que sean depares y que tengan información de métodos, tipos, funciones, etc. que puede ser utilizado por TypeScript, normalmente sin necesidad de importar. declare var es el último recurso

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

Puede utilizar webpack para proporcionarlo . Luego se inyectará DOM automáticamente.

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

  ]
};

Intente usar - declare let $: any;

o importar * como $ desde 'jquery / dist / jquery.min.js'; proporcionar la ruta exacta de la biblioteca

la solución al texto mecanografiado:

Paso 1:

npm install jquery

npm install --save-dev @types/jquery

paso2: en Angular.json agregue:

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

o en index.html agregar:

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

paso 3: en * .component.ts donde desea usar jquery

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

Entonces puedes usar jquery igual que javaScript. De esta manera, VScode admite la sugerencia automática de Typecript

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