How to include jQuery and Twitter Bootstrap 3 using Angular 2 and Webpack

[hombrew]

Hello,

Probably this is a noob question, but i've been trying to include jQuery and twitter bootstrap 3 to a project configured like this:

• Angular 2
• TypeScript
• Webpack
• Sass

I've previously installed jQuery and bootstrap with npm install jquery bootstrap --save and tried to include them in /src/index.ts

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

but always got problems with bootstrap fonts. tried to add them too, but that also gave me errors. Also tried:

...
import 'jquery'
import 'bootstrap';
...

and that didn't gave me errors, except for that the page didn't showed up anything. Then I noticed the problem was with import 'bootstrap';, after removing that line of code, the project started.

Then tried to use jQuery in a Component, but that gave me errors too. After reading this and this I noticed I had to typings install dt~jquery --global --save, in order to reference jQuery in any file with declare var $: JQueryStatic;, but whenever I try to do anything with jQuery, the project just doesn't work.

how can I include these libraries in my project?

thanks in advance for any help you can offer.

[bas87]

Hi, I had the same issue and elegant solution is to use css-loader.

Follow this link link for detailed explanations.