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

发布时间：2020-12-17 06:57:25 所属栏目：安全来源：网络整理

导读：我克隆了以下内容： https://github.com/AngularClass/angular2-webpack-starter 我想使用jquery和bootstrap. 我做： npm install jquery bootstrap --save 然后我去vendor.ts添加导入.. import 'jquery';import 'bootstrap/dist/js/bootstrap';import 'boot

我克隆了以下内容：
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时,我收到一堆错误：

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>

它有效,但我想避免这样做……

解决方法

npm install jquery --save

npm install @types/jquery --save-dev

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

更多信息她

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

不要使用window.jQuery

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!