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.

@JS_astronauts Yes, I know that will work. But i'm trying to do it using vendor.js. — Shahzad
– Shahzad, Commented Jun 15, 2016 at 16:04
the loaders part, did you add exclude: /node_modules/ in your loader options? — MarkoCen
– MarkoCen, Commented Jun 15, 2016 at 16:22

kirqe · Accepted Answer · 2016-09-18 23:30:31Z

15

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.

edited Sep 18, 2016 at 23:30

answered Aug 24, 2016 at 13:53

kirqe

2,4704 gold badges40 silver badges64 bronze badges

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

2 Comments

marquesm91 Over a year ago

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

Misi Over a year ago

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

Trafalgar · Accepted Answer · 2016-06-15 16:08:47Z

0

I think you need to tell to the Webpack entry point where to find the bootstrap file.

entry: {
    app: './app.ts',
    vendor: [
        'bootstrap/dist/css/bootstrap.css'
    ]
}

answered Jun 15, 2016 at 16:08

Trafalgar

4011 gold badge6 silver badges15 bronze badges

1 Comment

Shahzad Over a year ago

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

Collectives™ on Stack Overflow

How to add bootstrap 3 to Angular2 webpack based project

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related