Jak korzystać z jquery z webpack'em kątowym2? Pierwsze $ niezdefiniowane

I sklonowany następujące: https://github.com/AngularClass/angular2-webpack-starter

chcę użyć jQuery i bootstrap. zrobić:

npm install jquery bootstrap --save

I następnie przejdź do vendor.ts dodać importu ..

import 'jquery'; 
import 'bootstrap/dist/js/bootstrap'; 
import 'bootstrap/dist/css/bootstrap.min.css';

Poszedłem do webpack.common.js i dodane do "wtyczek: [...]" :

new webpack.ProvidePlugin({ 
    jQuery: 'jquery', 
    $: 'jquery', 
    jquery: 'jquery' 
})

tylko to przetestować na został zmodyfikowany home.component.html i dodano id = "testdiv" do jednego z div.

W pliku home.component.ts dodaję "$ ('# testdiv'). Html ('Jquery Works')".

Kiedy NPM uruchomić start, mam kilka błędów:

error_handler.js:46 EXCEPTION: Uncaught (in promise): ReferenceError: $ is not definedErrorHandler.handleError @ error_handler.js:46next @ application_ref.js:298schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:81onError @ ng_zone.js:123onHandleError @ ng_zone_impl.js:62ZoneDelegate.handleError @ zone.js:336Zone.runGuarded @ zone.js:242_loop_1 @ zone.js:508drainMicroTaskQueue @ zone.js:515ZoneTask.invoke @ zone.js:437 
error_handler.js:51 ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:51next @ application_ref.js:298schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:81onError @ ng_zone.js:123onHandleError @ ng_zone_impl.js:62ZoneDelegate.handleError @ zone.js:336Zone.runGuarded @ zone.js:242_loop_1 @ zone.js:508drainMicroTaskQueue @ zone.js:515ZoneTask.invoke @ zone.js:437 
error_handler.js:52 Error: Uncaught (in promise): ReferenceError: $ is not defined

Jak to obejść? Próbowałem też modyfikując webpack.common.js z następujących czynności:

new webpack.ProvidePlugin({ 
    'window.jQuery': 'jquery', 
    'window.$': 'jquery', 
})

również nie działa ...

Jeśli pójdę do mojej strony index.html ... jeśli dodam:

<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>

to działa, ale chcę uniknąć robi to ...

Źródło

2016-10-14 Rolando

Możliwy duplikat [Jak używać jQuery z Angular2?] (Http://stackoverflow.com/questions/30623825/how-to-use-jquery-withangular- 2) – gelliott181

Myślałem, że maszynopis jest zgodny z bibliotekami, które robią nie mam żadnych definicji maszynopisu ... Chcę uniknąć konieczności wykonywania instalacji typowania ... jeśli to możliwe, ponieważ większość bibliotek javascript, które chcę używać, nie ma typowań. – Rolando

Aby użyć go bez typowania, musisz go udostępnić kompilatorowi TypeScript jako obiekt w kodzie. Czyni to również w tym pytaniu, o trzech odpowiedziach poniżej zaakceptowanych. – gelliott181

Choć nie bezpośrednio odpowiedzieć na pytanie chciałbym zaproponować inne podejście do integracji kątowa + Bootstrap: istnieją biblioteki, które zapewniają rodzimy implementacja widżetów Bootstrap. W ten sposób nie musisz włączać jQuery i nie potrzebujesz kodu CSS Bootstrapa.

Sprawdź https://ng-bootstrap.github.io co jest dość łatwe do zainstalowania: https://ng-bootstrap.github.io/#/getting-started

Źródło

2016-10-16 07:55:38

npm install jquery --save 

npm install @types/jquery --save-dev 

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

więcej informacji jej

https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-jQuery

nie używaj window.jQuery

Źródło

2016-10-18 12:30:06 Prithvi

Dlaczego to nie jest poprawne? Po prostu nie dać 25 dodatkowych punktów? – SrAxi

Nie działa, gdy inna biblioteka oczekuje dostępu do "window.jQuery", chociaż okno. $ Jest faktycznie dostępne. – RickNo

importu jquery w home.component.ts .

const $ = require('jquery');

Cnota importowania jquery początkowo w pliku vendor.ts polega na tym, że bootstrap może go rozszerzyć. Webpack nie powinien wymagać specjalnej konfiguracji jQuery.

Źródło

2016-10-23 04:58:34 ryannjohnson

Jak korzystać z jquery z webpack'em kątowym2? Pierwsze $ niezdefiniowane

Odpowiedz

Powiązane problemy