Angular2 , Webpack et Bootstrap 3

1
npm install jquery bootstrap font-awesome --save

Dans le fichier vendor.browser.ts, ajouter:

1
2
import 'jquery';
import 'bootstrap/dist/js/bootstrap';

Dans le fichier webpack.common.js

1
2
3
4
5
new webpack.ProvidePlugin({
       jQuery: 'jquery',
       $: 'jquery',
       jquery: 'jquery'
     }),

Dans le fichier app.css

1
2
@import "../../node_modules/bootstrap/dist/css/bootstrap.css";
@import "../../node_modules/font-awesome/css/font-awesome.css";

Dans le fichier app.component.ts

1
2
3
4
5
6
@Component({
    selector: 'app',
    templateUrl: 'app.html',
    encapsulation: ViewEncapsulation.None,
    styleUrls: ['./app.css'],
})

Angular2 , Webpack et Bootstrap 4

1
2
npm install jquery bootstrap@4.0.0-alpha.5 font-awesome tether --save
npm install --save-dev sass-loader raw-loader file-loader node-sass

Dans le fichier vendor.browser.ts, ajouter:

1
2
3
import 'jquery';
import 'tether';
import 'bootstrap';

Dans le fichier webpack.common.js

1
2
3
4
5
6
{ test: /\.scss$/, loaders: ['raw-loader', 'sass-loader'] },

       { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url?limit=10000&name=[name].[ext]' },

       // Bootstrap 4
       { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery' },
1
2
3
4
5
6
7
new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery',
      jquery: 'jquery',
      "window.jQuery": "jquery",
      "window.Tether": 'tether'
    }),

Dans le fichier app.scss

1
2
@import "../../node_modules/bootstrap/scss/bootstrap";
@import "../../node_modules/font-awesome/scss/font-awesome";

Dans le fichier app.component.ts

1
2
3
4
5
6
7
@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
    styleUrls: [
        'application.scss'
    ],
 })