Wie Bootstrap 3 zu Angular2 Webpack-basierten Projekt hinzufügen

Question

Ich habe die npm-Pakete für Jquery & Bootstrap installiert, und dann Importe in vendor.ts hinzugefügt, aber ich habe noch keine Bootstrap-Styling zeigt sich auf dem Browser.

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

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

Ich habe auch versucht, einen weiteren Eintrag in webpack.common.js Zugabe, aber das entweder nicht helfen.

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

Jede Hilfe wäre sehr geschätzt, danke.

Answer 1

Ich denke, Sie müssen dem Webpack-Einstiegspunkt mitteilen, wo die Bootstrap-Datei zu finden ist.

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

Answer 2

Sie können einfach eines der verfügbaren eckigen Seed-Projekte verwenden. Folgendes wepback.common.js

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

Weitere Details Zum Beispiel dieses https://github.com/preboot/angular2-webpack

bs zu installieren, führen Sie nur npm install jquery bootstrap --save

dann auf die folgenden Add vendor.ts

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

und fügen Überprüfen Sie den 4. Kommentar von folgendem Link: https://github.com/AngularClass/angular2-webpack-starter/issues/696

arbeitete für mich. Ich habe früher Beschwerden über Jquery bekommen, aber es hat mein Problem gelöst.