Gewusst wie: hinzufügen von bootstrap 3 zu Angular2 webpack Projekt

Habe ich installiert die npm-Pakete für jquery & bootstrap -, und fügte dann hinzu Importe in vendor.ts, aber ich habe noch nicht alle bootstrap-styling zeigt sich auf dem browser.

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

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

Habe ich auch schon versucht, das hinzufügen eines weiteren Eintrags innerhalb webpack.common.js, aber das hat auch nicht geholfen.

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.

  • was ist Ihr webpack config?
  • Haben Sie versuchen, die bootstrap in der index.html ?
  • welchen Teil der config-Datei wollen Sie sehen?
  • Ja, ich weiß, dass es funktionieren wird. Aber ich versuche, es zu tun mit vendor.js.
  • der Lader ein Teil, haben Sie Hinzugefügt exclude: /node_modules/ in Ihrem loader-Optionen?
  • Ich habe eine exclude: /node_modules/ für less loader, aber nicht für alles, was nötig ist, damit der Bootstrap-3.

InformationsquelleAutor Shahzad | 2016-06-15
  1. 15

    Können Sie einfach mit einem der verfügbaren angular-seed-Projekten.
    Zum Beispiel diese eine https://github.com/preboot/angular2-webpack

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

    dann fügen Sie die folgenden vendor.ts

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

    und fügen Sie die folgenden wepback.common.js

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

    Für mehr details überprüfen Sie den 4. Kommentar unter dem folgenden link:
    https://github.com/AngularClass/angular2-webpack-starter/issues/696

    arbeitete für mich. Ich habe mich immer beschwert, jquery, nicht gefunden, aber es löste mein problem.

    • Ich habe auf der Suche für eine einfache Lösung, und endlich eine. Vielen Dank so viel für diese!
    • Für die js-bootstrap zu arbeiten, ich hatte zum ändern der Reihenfolge der ProvidePlugin Elemente : [$: 'jquery', jQuery: 'jquery'].
    InformationsquelleAutor kirqe
  2. 0

    Ich glaube, man muss sagen das Webpack Eintrag Punkt, wo sich die bootstrap-Datei. 

    entry: {
    app: './app.ts',
    vendor: [
        'bootstrap/dist/css/bootstrap.css'
    ]
}
    • Ich habe meinen Eintrag Objekt in meiner Frage, können Sie mir sagen, wie deine Antwort mit dem, was ich derzeit habe.
    InformationsquelleAutor Trafalgar
Schreibe einen Kommentar