¿Cómo usar jQuery Plugin con Angular 4?

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

Funciona bien durante la comstackción, pero cuando bash comstackrlo para la implementación, arroja el siguiente error.

enter image description here

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

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

Por favor hagamelo saber.

¡Gracias por adelantado!

Sí, puedes usar jquery con Angular 4

Pasos:

1) En index.html ponga debajo de la línea en la etiqueta.

2) En el archivo ts componentes a continuación, debe declarar var como este

 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 = 'abgular 4 with jquery'; toggleTitle(){ $('.title').slideToggle(); // } } 

Y use este código para el archivo html correspondiente de esta manera:

 

{{title}}

Esto funcionará para ti. Gracias

Instalar jquery con npm

 npm install jquery --save 

Agregar tipings

 npm install --save-dev @types/jquery 

Agregar scripts a angular-cli.json

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

Desarrollar proyecto y servir

 ng build 

¡Espero que esto ayude! Disfruta de la encoding

No es necesario que declare ninguna variable jQuery a medida que 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(); 

Instalar jQuery usando NPM Jquery NPM

 npm install jquery 

Instala el archivo de statement 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'); }); } } 

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; 

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

Angular tiene una representación propia del DOM en su memoria y no utiliza selectores de consulta (funciones como document.getElementById(id) ) como jQuery. En su lugar, toda la manipulación DOM se realiza mediante Renderer2 (y directivas angulares como * ngFor y * ngIf que acceden a Renderer2 en el código de fondo / marco). Si manipulas DOM con jQuery, tarde o temprano …

  1. Se encuentra con problemas de sincronización y tiene cosas que aparecen incorrectamente o que no desaparecen en el momento correcto de su pantalla
  2. Tiene problemas de rendimiento en componentes más complejos, ya que la representación DOM interna de Angular está ligada a zone.js y su mecanismo de detección de cambios, por lo que la actualización manual del DOM siempre bloqueará el hilo en el que se ejecuta su aplicación.
  3. Tiene otros errores confusos que desconoce el origen de.
  4. No poder probar la aplicación correctamente (Jasmine requiere que sepas cuándo se han renderizado los elementos)
  5. No poder usar Angular Universal o WebWorkers

Si realmente quieres incluir jQuery (para grabar un prototipo que eliminarás definitivamente al 100%), te recomiendo que al menos lo incluyas en tu paquete. npm install --save jquery con npm install --save jquery lugar de obtenerlo desde el CDN de Google .

TLDR: para aprender a manipular el DOM de forma angular, primero consulte el tutorial oficial de los héroes de la gira: https://angular.io/tutorial/toh-pt2 Si necesita acceder a los elementos más arriba en la jerarquía DOM. (padre o document body ) o por alguna otra razón, directivas como *ngIf , *ngFor , directivas 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-example

Puede actualizar su versión de typings jquery como tal

 npm install --save @types/jquery@latest 

Tuve el mismo error y estuve 5 días navegando por la red buscando una solución. Me funcionó y debería funcionar para usted

Si tiene la necesidad de utilizar otras bibliotecas en proyectos –typescript– no solo en proyectos – angle – puede buscar los archivos de statement de TypeScript (tds) que son depares y que tienen información de métodos, tipos, funciones, etc. que puede ser utilizado por TypeScript, generalmente sin la necesidad de importar. declare var es el último recurso

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

Puede usar el paquete web 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' }), ] }; 
 ngOnInit() { const $ = window["$"]; $('.flexslider').flexslider({ animation: 'slide', start: function (slider) { $('body').removeClass('loading') } }) }