如何在 angular2 webpack 中使用 jquery？获取 $ 未定义答案

【问题标题】：How to use jquery with angular2 webpack? Getting $ not defined如何在 angular2 webpack 中使用 jquery？获取 $ 未定义
【发布时间】：2017-02-24 06:18:23
【问题描述】：

我克隆了以下内容： 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>

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

【问题讨论】：

How to use jQuery with Angular2?的可能重复
我认为 typescript 与没有任何 typescript 定义的库兼容...我想避免执行打字安装...如果可能的话，因为我想使用的大多数 javascript 库都做没有打字。
要在不输入的情况下使用它，您仍然必须将其作为代码中的对象提供给 TypeScript 的编译器。该问题也涵盖了这样做，大约低于接受的三个答案。
我不明白你为什么不安装类型，这是 TypeScript 的一半，如果你不想要类型，Angular2 可以用 JS 编写。
如果你想在没有打字稿定义的情况下使用，只需编写 declare var $ : any;并使用$，无论如何我建议按照gelliott181所说的那样安装类型；）

标签： jquery angular webpack

【解决方案1】：

虽然它不能直接回答您的问题，但我建议采用不同的 Angular + Bootstrap 集成方法：有些库提供 Bootstrap 小部件的本机实现。这样你就不需要包含 jQuery 并且不需要 Bootstrap 的 CSS。

检查https://ng-bootstrap.github.io，它很容易安装：https://ng-bootstrap.github.io/#/getting-started

【讨论】：

【解决方案2】：

npm install jquery --save

npm install @types/jquery --save-dev

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

不要使用 window.jQuery

【讨论】：

为什么这不正确？只是为了不给 25 加分？
Doesn,t work when another library 希望访问 'window.jQuery' 尽管 window.$ 实际上是可用的。

【解决方案3】：

在 home.component.ts 中导入 jquery。

const $ = require('jquery');

最初在 vendor.ts 文件中导入 jquery 的优点是引导程序可以扩展它。 Webpack 不需要对 jquery 进行任何特殊配置。

【讨论】：