Jak poprawnie włączyć jQuery w kanciastym cli 1.0.0-rc.0?

Question

Używam komponentu select2 opartego na jQuery w moim projekcie AngularJS. Miałem podobny problem, jak tutaj: https://github.com/fronteed/icheck/issues/322, i rozwiązałem go, korzystając z porady tam. Aby być dokładnym, otrzymałem błąd TypeError: $(...).select2 is not a function, gdy nie korzystałem z tej porady.

tj. Dodałem kolejne linie do konfiguracji Webpacka w @angular/cli/models/webpack-configs/common.js.

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

Czy to najlepszy sposób na włączenie jQuery w kanciastym/cli?

Nie sądzę, że robi tak samo jak w https://github.com/angular/angular-cli/wiki/stories-global-lib jest poprawny sposób, ponieważ

a) WebPack wiązki jQuery bez konieczności podać go w skryptach

b) wciąż rzuca TypeError: $(...).select2 is not a function błąd podczas m.in. to jak opisano w opowiadaniu.

Answer 1

Udało mi się osiągnąć to, czego potrzebowałem, eksponując Webpack. Użyj polecenia ng eject.

Najpierw zainstaluj jQuery za pomocą npm install -S jquery (a także zainstalowałem npm install -S select2, ponieważ również tego potrzebowałem).

Następnie upewnij się, że wykonałeś kopię zapasową pliku package.json, ponieważ podczas ng eject Angularny interfejs CLI spróbuje dodać swoje zależności Webpack do pliku package.json.

Po ng eject zakończeniu pracy wewnątrz webpack.config.js dodałem

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

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

A teraz select2 dodaje $(...).select2 funkcję globalnego obiektu jQuery poprawnie!

użyć jQuery z Select2 wewnątrz pliku twoi .ts, można dodać następujące linie na początku tego pliku:

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)); 

// ... 

Answer 2

Dodanie go w taki sam sposób jak podanego linku zagwarantuje jego załadowanie. W przeciwnym razie spróbuj poniżej w swoim komponencie.

npm install jquery 

Następnie użyj w składniku

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

Answer 3

używam jQuery w moim projekcie w następujący sposób.

1. Instalacja jQuery

   npm install --save jquery 
   

2. Instalacja typu jQuery defination dla typu kontroli.

   npm install --save-dev @types/jquery 
   

3. Dodaj refenece pliku jquery w "scripts" tablicy wewnątrz pliku kątowe-cli.json.

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

4. importuj jquery w dowolnym komponencie, którego chcesz użyć.

   import * as jQuery from 'jquery'; 
   

to wszystko. w ten sam sposób możesz również korzystać z innych bibliotek, takich jak moment.js, d3.js itd.

Answer 4

Można również użyć expose-loader. Poniższy przykład jest napisany dla pakietu sieciowego 2,

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