How to use jquery with angular2 webpack? Getting $ not defined

Question

I cloned the following: https://github.com/AngularClass/angular2-webpack-starter

I want to use jquery and bootstrap. I do:

npm install jquery bootstrap --save

I then go to vendor.ts add imports..

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

I then went to webpack.common.js and added to "plugins:[...]":

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

Just to test this out, I modified home.component.html and added an id="testdiv" to one of the divs.

Within home.component.ts, I add "$('#testdiv').html('Jquery Works')".

When I npm run start, I get a bunch of errors:

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

How do I get around this? I also tried modifying webpack.common.js with the following:

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

Also did not work...

If I go to my index.html page... if I add:

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

It works, but I want to avoid doing that...

Answer 1

npm install jquery --save

npm install @types/jquery --save-dev

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

more info her

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

Dont use window.jQuery

Answer 2

While it doesn't answer your question directly I would suggest a different approach to Angular + Bootstrap integration: there are libraries that provide native implementation of Bootstrap widgets. This way you don't need to include jQuery and don't need Bootstrap's CSS.

Check https://ng-bootstrap.github.io which is pretty easy to install: https://ng-bootstrap.github.io/#/getting-started