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...

Possible duplicate of [How to use jQuery with Angular2?](http://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular2) — gelliott181, Oct 14 '16 at 18:15
I thought typescript is compatible with libraries that do not have any typescript definitions... I want to avoid having to execute typings install... if possible since majority of the javascript libraries I want to use do not have typings. — Rolando, Oct 14 '16 at 18:17
To use it without typings you still have to make it available to TypeScript's compiler as an object in your code. Doing so is also covered in that question, about three answers below the accepted. — gelliott181, Oct 14 '16 at 19:13
I don't see why you wouldn't install the typings though, that's half the point of TypeScript, and Angular2 can be written in JS if you don't want types. — gelliott181, Oct 14 '16 at 19:15
if you want to use without typescript definition just write declare var $ : any; and use $, anyway I suggest to install typings as gelliott181 said ;) — dokkis, Oct 14 '16 at 20:07
I have thrid party libraries I use that don't have typings I am sure, seems impractical to have to expose any tax.... like isotope for example, thee are no typings. I like being able to just use inclide the script and call on available functions like normal JavaScript. — Rolando, Oct 15 '16 at 04:44

score 10 · Answer 1 · answered Oct 18 '16 at 12:30

10

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

answered Oct 18 '16 at 12:30

Prithvi Uppalapati

800
8
27

Why this is not correct? Just to not give the 25 extra points? – SrAxi Jun 22 '17 at 14:10
Doesn,t work when another library expect to have access to 'window.jQuery' although window.$ is actually available. – RickNo Aug 10 '17 at 21:19

score 4 · Answer 2 · answered Oct 16 '16 at 07:55

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

score 3 · Answer 3 · answered Oct 23 '16 at 04:58

3

Import jquery in home.component.ts.

const $ = require('jquery');

The virtue of importing jquery initially in the vendor.ts file is so that bootstrap can extend it. Webpack shouldn't need any special configuration for jquery.

answered Oct 23 '16 at 04:58

ryannjohnson

373
1
5
13

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

3 Answers3