如何使Bootstrap与Angular 2和Webpack一起使用

Question

我无法使用Webpack使Bootstrap在我的Angular 2项目中工作。我正在按照https://getbootstrap.com/docs/4.0/getting-started/webpack上的说明进行操作，并在我的basicVendor.js文件中导入引导程序。但是，Bootstrap不会出现在页面的任何位置。这是我的项目的设置方式。我想念什么？

webpack.common.js

var webpack = require('webpack');

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var helpers = require('./helper');

module.exports = {
    entry: {
        'app': './scripts/app/main.ts',
        'polyfills': './scripts/app/polyfills.ts',
        'vendor': './scripts/app/vendor.ts',
        'basicVendor': './scripts/app/basicVendor.ts',
        'pdfVendor': './scripts/app/pdfVendor.ts',
        'kendoVendor': './scripts/app/kendoVendor.ts'
    },
resolve: {
    extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html', '.cshtml']
},

module: {
    rules: [
      {
          test: /\.ts$/,
          loaders: [
            {
                loader: 'awesome-typescript-loader',
                options: { configFileName: helpers.root('', 'tsconfig.json') }
            }, 'angular2-template-loader'
          ]
      },

      {test: /\.html$/,loader: 'html-loader'},
      { test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/, loader: 'url-loader' },
      {
          test: /\.(css)$/,
          loaders: ['style-loader', 'css-loader'],
          include: '/node_modules/'
      },
      {
          test: /\.(css)$/,
          loaders: ['to-string-loader', 'css-loader'],
          exclude: '/node_modules/'
      }


    ]
},

plugins: [

 new CleanWebpackPlugin(['built'], { root: '' }),

   //Workaround for angular/angular#11580
  new webpack.ContextReplacementPlugin(
    // The (\\|\/) piece accounts for path separators in *nix and Windows
    /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
    helpers.root('./scripts/app'), // location of your src
    {} // a map of your routes
  ),

  new webpack.optimize.CommonsChunkPlugin({
      name: "commoncode",        
      filename: "commoncode.js",
      chunks: ["app", "vendor", 'kendoVendor'],
      minChunks: Infinity,
  }),


   new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery"
   })

]

};

basicVendor.js

import 'jquery';
import 'bootstrap';

package.json

{
  "name": "training.web",
  "version": "1.0.0",
  "license": "ISC",
  "main": "webpack.config.js",
  "scripts": {
    "typings": "typings install",
    "build-dev": "SET NODE_ENV=development&& webpack",
    "build-prod": "SET NODE_ENV=production&& webpack"
  },
  "dependencies": {
    "@angular/animations": "^6.0.7",
    "@angular/common": "^6.0.7",
    "@angular/compiler": "^6.0.7",
    "@angular/core": "^6.0.7",
    "@angular/forms": "^6.0.7",
    "@angular/http": "^6.0.7",
    "@angular/platform-browser": "^6.0.7",
    "@angular/platform-browser-dynamic": "^6.0.7",
    "@angular/router": "^6.0.7",
    "@angular/upgrade": "^6.0.7",
    "@progress/kendo-angular-buttons": "^4.1.2",
    "@progress/kendo-angular-dateinputs": "^3.4.2",
    "@progress/kendo-angular-dropdowns": "^3.0.2",
    "@progress/kendo-angular-excel-export": "^2.1.1",
    "@progress/kendo-angular-grid": "^3.5.1",
    "@progress/kendo-angular-inputs": "^3.1.3",
    "@progress/kendo-angular-intl": "^1.4.1",
    "@progress/kendo-angular-l10n": "^1.2.0",
    "@progress/kendo-angular-popup": "^2.4.1",
    "@progress/kendo-angular-resize-sensor": "^3.0.3",
    "@progress/kendo-data-query": "^1.4.0",
    "@progress/kendo-drawing": "^1.5.6",
    "@progress/kendo-popup-common": "^1.6.0",
    "@progress/kendo-theme-default": "^2.38.0",
    "@progress/kendo-ui": "^2018.2.704",
    "@telerik/kendo-dropdowns-common": "^1.0.0",
    "@telerik/kendo-theme-default": "^1.33.4",
    "@types/angular": "^1.6.48",
    "@types/jquery": "^3.3.4",
    "angular-in-memory-web-api": "^0.6.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "https-proxy-agent": "^2.2.1",
    "ie-shim": "~0.1.0",
    "intl": "^1.2.4",
    "jquery": "^2.2.0",
    "ng2-pdf-viewer": "^3.0.8",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^6.2.1",
    "rxjs-compat": "^6.2.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "^6.0.8",
    "@types/core-js": "^0.9.41",
    "@types/node": "^7.0.62",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.4",
    "babel-core": "^6.24.1",
    "bootstrap-loader": "^2.1.0",
    "clean-webpack-plugin": "^0.1.16",
    "concurrently": "^2.2.0",
    "css-loader": "^0.28.1",
    "del": "^2.2.2",
    "es6-shim": "0.35.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.16.1",
    "ie-shim": "^0.1.0",
    "lite-server": "^2.2.2",
    "node-sass": "^4.5.2",
    "raw-loader": "^0.5.1",
    "resolve-url-loader": "^2.0.2",
    "run-sequence": "^1.2.2",
    "sass-loader": "^6.0.3",
    "source-map-loader": "^0.2.1",
    "style-loader": "^0.17.0",
    "systemjs-builder": "^0.15.15",
    "to-string-loader": "^1.1.5",
    "ts-loader": "^2.0.3",
    "typescript": "2.4.2",
    "typings": "^1.4.0",
    "url-loader": "^0.5.8",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.4.1",
    "webpack-merge": "^3.0.0",
    "webpack-notifier": "^1.2.1"
  }
}