web-dev-qa-db-fra.com

Comment ajouter bootstrap 3 au projet basé sur Angular2 Webpack

J'ai installé les packages npm pour jquery & bootstrap, puis ajouté des importations dans vendor.ts, mais je n'ai toujours pas de style d'amorçage affiché sur le navigateur.

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

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

J'ai également essayé d'ajouter une autre entrée dans webpack.common.js, mais cela n'a pas aidé non plus.

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

Toute aide serait très appréciée, merci.

jquerytwitter-bootstrapangularwebpack
7
Shahzad

Vous pouvez simplement utiliser l’un des projets de semences angulaires disponibles. Par exemple, celui-ci https://github.com/preboot/angular2-webpack

pour installer bs, lancez simplement npm install jquery bootstrap --save

puis ajoutez ce qui suit à vendor.ts

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

et ajoutez ce qui suit à wepback.common.js

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

Pour plus de détails, consultez le 4ème commentaire sur le lien suivant: https://github.com/AngularClass/angular2-webpack-starter/issues/696

a travaillé pour moi. J'avais l'habitude de me plaindre de jquery introuvable mais cela a résolu mon problème.

15
kirqe

Je pense que vous devez indiquer au point d'entrée Webpack où trouver le fichier d'amorçage. 

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