Angular2 webpack ile jquery nasıl kullanılır? <a href="https://github.com/AngularClass/angular2-webpack-starter" rel="noreferrer">https://github.com/AngularClass/angular2-webpack-starter</a></p> <p>Jquery ve ön yükleme alanı kullanmak istiyorum: $

Question

tanımlanmamış Başlarken aşağıdaki klonlanmış. Yapmam: vendor.ts ithalatı eklemek

npm install jquery bootstrap --save 

Sonra gidip ..

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

Sonra webpack.common.js gitti ve ilave "eklentileri: [...]" :

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

Sadece ben home.component.html modifiye ve div birine bir id = "testdiv" eklendi, bu test etmek.

home.component.ts içinde "$ ('# testdiv') ekleyin. Html ('Jquery Works')". Bunun etrafında nasıl alabilirim

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 

: Ben başlangıç ​​çalıştırmak NPM

, ben hataların bir demet olsun? Ben de birlikte webpack.common.js değiştirerek çalıştı aşağıdaki:

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

Ayrıca işe yaramadı ...

benim index.html sayfasına giderseniz ... Ben eklerseniz:

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

o inşaat, ama bunu yaparken önlemek istiyorum ...

Answer 1

o sorunuza cevap etmese de doğrudan ben Açısal + Bootstrap entegrasyonuna farklı bir yaklaşım öneririm: yerli sağlayan kütüphaneler vardır Bootstrap widget'larının uygulanması. Bu şekilde jQuery eklemeniz gerekmez ve Bootstrap'in CSS'sine ihtiyacınız yoktur. oldukça kolaydır

Kontrol https://ng-bootstrap.github.io yüklemek için: home.component.ts içinde https://ng-bootstrap.github.io/#/getting-started

Answer 2

npm install jquery --save 

npm install @types/jquery --save-dev 

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

fazla bilgi onu

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

Dont kullanmak window.jQuery

Answer 3

İthalat jquery .

const $ = require('jquery'); 

vendor.ts dosyasında başlangıçta jquery ithal erdem olduğunu önyükleme uzatabilirsiniz böyledir. Webpack'in jquery için herhangi bir özel yapılandırmaya ihtiyacı yoktur.