jquery - 如何在 angular2 webpack 中使用 jquery？获取 $ not defined

Question

我克隆了以下内容: https://github.com/AngularClass/angular2-webpack-starter

我想使用 jquery 和 bootstrap。我这样做:

npm install jquery bootstrap --save

然后我去 vendor.ts 添加导入..

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

然后我转到 webpack.common.js 并添加到“plugins:[...]”:

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

为了对此进行测试，我修改了 home.component.html 并向其中一个 div 添加了一个 id="testdiv"。

在 home.component.ts 中，我添加了“$('#testdiv').html('Jquery Works')”。

当我 npm run start 时，我得到了一堆错误:

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

我该如何解决这个问题？我还尝试使用以下内容修改 webpack.common.js:

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

也没用...

如果我转到我的 index.html 页面...如果我添加:

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

它有效，但我想避免这样做......

Answer 1

npm install jquery --save

npm install @types/jquery --save-dev

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

更多关于她的信息

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

不要使用 window.jQuery