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

Question

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

I want to use jquery and bootstrap. I AM:

npm install jquery bootstrap --save 

Then I go to vendor.ts add import.

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

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

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

To test this, I changed home.component.html and added id = "testdiv" to one of the divs.

In home.component.ts I add "$ ('# testdiv'). Html (" JQuery Works ").

When I start npm, 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 changing webpack.common.js as follows:

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

Also did not work ...

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

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

This works, but I want to avoid this ...

Answer 1

 npm install jquery --save npm install @types/jquery --save-dev plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery' }) ] 

more information about her

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

Do not use window.jQuery

Answer 2

While it does not answer your question directly, I would suggest a different approach to Angular + Bootstrap integration: there are libraries that provide their own implementation of Bootstrap widgets. Thus, you do not need to include jQuery and do not need Bootstrap CSS.

Check out https://ng-bootstrap.imtqy.com , which is pretty easy to install: https://ng-bootstrap.imtqy.com/#/getting-started

Answer 3

Import jquery to home.component.ts.

 const $ = require('jquery'); 

The advantage of importing jquery is initially in the vendor.ts file so that bootstrap can extend it. Webpack does not need any special configuration for jQuery.