Cómo incluir jQuery en una app de Angular 4

Actualizado por hace 2 semanas

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.