How to add bootstrap 3 to Angular2 webpack based project

Question

I have installed the npm packages for jquery & bootstrap, and then added imports into vendor.ts, but I still don't have any bootstrap styling showing up on the browser.

...
import 'jquery/dist/jquery.js'

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

I have also tried adding another entry within webpack.common.js, but that didn't help either.

entry: {
    'bootstrap': './node_modules/bootstrap/dist/css/bootstrap.min.css',
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'main': './src/main.browser.ts'
}

Any help would be much appreciated, thanks.

Solution

You can just use one of the available angular seed projects. For example this one https://github.com/preboot/angular2-webpack

to install bs, just run npm install jquery bootstrap --save

then add the following to vendor.ts

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

and add the following to wepback.common.js

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

For more details check 4th comment from the following link: https://github.com/AngularClass/angular2-webpack-starter/issues/696

worked for me. I used to get complains about jquery not found but it solved my problem.

Comments

[Shahzad]

I've added my entry object into my question, can you tell me how your answer would work with what I have currently.

[marquesm91]

I've been looking for a simple solution and finally got one. Thank you so much for this!

[Misi]

For the js bootstrap to work I had to change the order of the ProvidePlugin elements to : [$: 'jquery', jQuery: 'jquery'].