Cómo incluir jQuery en una app de Angular 4

Por · Permalink

Estoy trabajando en una app de Angular 4 en la cuál tengo la necesidad de utilizar algunos plugins jQuery y para mi sorpresa no es un proceso tan straightforward como pensaba, por lo que estuve investigando cuál era la manera de lograrlo.

Les quiero compartir lo que funcionó para mi:

Paso 1: Instalamos jQuery con npm

  
     npm install jquery --save
  

De esta manera aseguramos que jQuery se agregue como una dependencia de nuestro proyecto y sea incluido en nuestro package.json.

Paso 2: Actualizamos ./angular-cli.json

Después de eso tenemos que ir al archivo ./angular-cli.json ubicado en la raíz de nuestro proyecto Angular CLI, abrirlo y dentro de la propiedad scripts incluimos el path de la librería jQuery que acabamos de instalar:

  
     “scripts”: [ “../node_modules/jquery/dist/jquery.min.js” ]
  

Paso 3: Utilizamos jQuery en nuestra aplicación

Ahora podemos disponer de jQuery en nuestra aplicación, para hacerlo tenemos que importarlo en nuestro archivo app.component.ts:

  
     import * as $ from ‘jquery’;
     import * as jQuery from ‘jquery’;
  

Y eso sería todo lo que hay que hacer, en realidad no es tan complicado, pero para principiantes como yo fue algo tricky descubrir la manera correcta de hacerlo.

Twittea este post y para recibir notificaciones sigue a @luiscarlospando o usa este RSS.