Pregunta ¿Cómo incluir jQuery correctamente en angular cli 1.0.0-rc.0?


Uso el componente select2 basado en jQuery en mi proyecto AngularJS. Tuve un problema similar al de los muchachos aquí: https://github.com/fronteed/icheck/issues/322, y lo resolvió usando consejos de allí. Para ser exacto, recibí un error TypeError: $(...).select2 is not a function cuando no estás usando ese consejo.

es decir, agregué las siguientes líneas a la configuración de Webpack en @angular/cli/models/webpack-configs/common.js.

plugins: [
  new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
]

¿Es la mejor manera posible de habilitar jQuery en angular / cli?

No creo que haga lo mismo que en https://github.com/angular/angular-cli/wiki/stories-global-lib es la forma correcta, porque

a) paquetes web jQuery sin necesidad de especificarlo en scripts

b) todavía arroja TypeError: $(...).select2 is not a function error cuando lo incluye como se describe en la historia.


10
2018-02-28 13:40


origen


Respuestas:


uso jQuery en mi proyecto de la siguiente manera.

  1. Instalar jQuery

    npm install --save jquery
    
  2. Instale la definición de tipo jQuery para la verificación de tipos.

    npm install --save-dev @types/jquery
    
  3. Agregue una referencia del archivo jquery en la matriz "scripts" dentro del archivo angular-cli.json.

    "scripts": [
        "../node_modules/jquery/dist/jquery.min.js"
     ]
    
  4. importe jquery en cualquier componente que quiera usar.

    import * as jQuery from 'jquery';
    

Eso es. de la misma manera también puedes usar otras bibliotecas como moment.js , d3.js etc.


27
2018-03-01 08:49



También podrías usar expose-loader. El siguiente ejemplo está escrito para el paquete web 2,

{ test: /[\/]jquery\.js$/,
    use: [
      { loader: 'expose-loader', query: 'jQuery' },
      { loader: 'expose-loader', query: '$' }
    ]
  },

1
2018-03-08 19:39



Si lo agrega de la misma manera que el enlace que proporcionó, garantizará que esté cargado. De lo contrario, intente a continuación en su componente.

npm install jquery

Luego use en su componente

declare var $:any;
var $ = require('jquery');

0
2018-02-28 14:14



Logré lo que necesitaba al exponer Webpack. Utilizar ng eject mando.

Primero, instale jQuery usando npm install -S jquery (y también instalé npm install -S select2, porque yo también necesitaba eso).

Luego, asegúrese de hacer una copia de seguridad de su archivo package.json, ya que durante ng eject Angular CLI intentará agregar sus dependencias de Webpack dentro de su package.json.

Después ng eject terminado de trabajar, dentro webpack.config.js yo añadí

// ... Inside require/imports part
const ProvidePlugin = require('webpack/lib/ProvidePlugin');

// ... Inside `plugins` section of Webpack configuration
new ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })

Y ahora select2 agrega $(...).select2 ¡Funcione al objeto jQuery global correctamente!

Para usar jQuery con select2 dentro de su archivo .ts, puede agregar las siguientes líneas al comienzo de ese archivo:

import "select2";
import "jquery";
declare var $: any;

// Somewhere deep within component
// ...

$(this.input.nativeElement)
    .select2(config)
    .on("change select2:select select2:unselect", (e: any) => this.onSelect2ElementChange(e));

// ...

0
2018-03-03 17:38