Come aggiungere bootstrap 3 al progetto basato sul webpack Angular2

Question

Ho installato i pacchetti npm per bootstrap jquery & e aggiunto le importazioni in vendor.ts, ma non ho ancora alcuno stile di bootstrap visualizzato sul browser.

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

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

ho anche provato ad aggiungere un'altra voce all'interno webpack.common.js, ma questo non ha aiutato neanche.

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

Qualsiasi aiuto sarebbe molto apprezzato, grazie.

Answer 1

Penso che sia necessario indicare al punto di ingresso Webpack dove trovare il file di bootstrap.

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

Answer 2

È possibile utilizzare solo uno dei progetti angolari disponibili. Per esempio questo https://github.com/preboot/angular2-webpack

installare bs, basta eseguire npm install jquery bootstrap --save

quindi aggiungere il seguente al vendor.ts

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

e aggiungere il seguente al wepback.common.js

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

Per maggiori dettagli controllare il 4 ° commento dal seguente link: https://github.com/AngularClass/angular2-webpack-starter/issues/696

ha funzionato per me. Mi lamentavo del jquery non trovato ma risolveva il mio problema.