Question

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

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

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    scrollView.contentSize = CGSizeMake(view.frame.size.width, view.frame.size.height)
}

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

npm install jquery bootstrap --save

然后我去了webpack.common.js并添加到＆＃34;插件：[...]＆＃34;：

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

为了测试这个，我修改了home.component.html并添加了一个id =＆＃34; testdiv＆＃34;其中一个div。

在home.component.ts中，我添加＆＃34; $（＆＃39;＃testdiv＆＃39;）。html（＆＃39; Jquery Works＆＃39;）＆＃34;。

当我开始运行时，我遇到了一堆错误：

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

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

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

也没用......

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

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

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

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

Answer 2

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

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

Answer 3

在home.component.ts中导入jquery。

const $ = require('jquery');

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

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

3 个答案: