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

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
– Rolando, Commented Oct 14, 2016 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
– gelliott181, Commented Oct 14, 2016 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
– gelliott181, Commented Oct 14, 2016 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
– dokkis, Commented Oct 14, 2016 at 20:07

Prithvi Uppalapati · Accepted Answer · 2016-10-18 12:30:06Z

10

+25

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, 2016 at 12:30

Prithvi Uppalapati

8009 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SrAxi Over a year ago

Why this is not correct? Just to not give the 25 extra points?

RickNo Over a year ago

Doesn,t work when another library expect to have access to 'window.jQuery' although window.$ is actually available.

pkozlowski.opensource · Accepted Answer · 2016-10-16 07:55:38Z

4

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

answered Oct 16, 2016 at 7:55

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

Comments

user5307109 · Accepted Answer · 2016-10-23 04:58:34Z

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, 2016 at 4:58

user5307109

3731 gold badge5 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related