Angular应用程序由webpack成功捆绑但未加载

Question

我有一个angular5应用程序，我试图捆绑webpack 4.我没有在webpack进程或浏览器中得到任何错误，在网络选项卡我可以看到所有相关的包成功加载。但是应用程序停留在显示我用来等待角度加载（）的微调器时，似乎没有其他任何东西正在加载，就像应用程序没有引导一样。

webpack.config.js：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var helpers = require('./helpers');
const path = require('path');

module.exports = {

  mode: 'development',

  entry: {
    main: './app/main.ts',
    vendor: './webpack/vendor.ts',
    polyfills: './webpack/polyfills.ts'
  },

  output: {
    path: helpers.root('./', '/dist'),
    filename: '[name].js'
  },

  resolve: {
    extensions: ['.ts', '.js']
  },

  module: {
    rules: [{
        test: /\.ts$/,
        use: [{
          loader: 'awesome-typescript-loader',
          options: {
            configFileName: helpers.root('./', 'tsconfig.json')
          }
        }, 'angular2-template-loader'],
        exclude: [/node_modules/]
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        // exclude: helpers.root('./', 'preStyles'),
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
          // ,'style-loader'
        ]
      },
      {
        test: /\.css$/,
        exclude: helpers.root('./'),
        use: 'raw-loader'
      },
      {
        test: /\.html$/,
        use: 'html-loader'
      },
    ]
  },

  optimization: {
    splitChunks: {
      cacheGroups: {
        main: {
          test: /[\\/]node_modules[\\/]/,
          name: 'main',
          chunks: "all"
        },
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: "all"
        },
        polyfills: {
          test: /[\\/]node_modules[\\/]/,
          name: 'polyfills',
          chunks: "all"
        }
      }
    }
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "main.css"
    }),
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      // For Angular 5, see also https://github.com/angular/angular/issues/20357#issuecomment-343683491
      /\@angular(\\|\/)core(\\|\/)esm5/,
      helpers.root('./', 'app'), // location of your src
      {
        // your Angular Async Route paths relative to this root directory
      }
    )
  ]

};

的package.json：

{
    "main": "server.js",
    "private": true,
    "repository": {
        "type": "git"
    },
    "scripts": {
        "webpack": "webpack --progress",
        "start": "node server"
    },
    "license": "ISC",
    "engines": {
        "node": "8.5.0",
        "npm": "5.4.2"
    },
    "dependencies": {
        "@angular/animations": "^5.2.9",
        "@angular/common": "^5.2.9",
        "@angular/compiler": "^5.2.9",
        "@angular/compiler-cli": "^5.2.9",
        "@angular/core": "^5.2.9",
        "@angular/forms": "^5.2.9",
        "@angular/http": "^5.2.9",
        "@angular/platform-browser": "^5.2.9",
        "@angular/platform-browser-dynamic": "^5.2.9",
        "@angular/platform-server": "^5.2.9",
        "@angular/router": "^5.2.9",
        "angular2-template-loader": "^0.6.2",
        "body-parser": "^1.18.2",
        "core-js": "^2.5.4",
        "express": "^4.16.3",
        "file-loader": "^1.1.11",
        "mongoose": "^4.13.12",
        "path": "^0.12.7",
        "reflect-metadata": "^0.1.12",
        "rxjs": "^5.5.8",
        "zone.js": "^0.8.20"
    },
    "devDependencies": {
        "awesome-typescript-loader": "^4.0.1",
        "css-loader": "^0.28.11",
        "dotenv": "^5.0.1",
        "mini-css-extract-plugin": "^0.4.0",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.1.0",
        "raw-loader": "^0.5.1",
        "style-loader": "^0.20.3",
        "typescript": "^2.8.1",
        "webpack": "^4.4.1",
        "webpack-cli": "^2.0.13",
        "webpack-dev-server": "^3.1.1"
    }
}

tsconfig.json：

{
    "compilerOptions": {
        "target": "es6",
        "lib": ["es6", "es2016", "es2015", "es5", "es7", "dom"],
        "outDir": "./js",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": true,
        "noImplicitAny": false
    }
}