title: Angular app bundled successfully by webpack but not loading
body: <p>I have an angular5 app which I am trying to bundle with webpack 4. I do not get any errors in webpack process nor in the browser, and at the networking tab I can see all relevant bundles loaded successfully. But the app is stuck at showing the spinner that I use to wait while angular loads (), and it seems that nothing else is loading, as if the app didn't bootstrap.</p>
  
  <p>webpack.config.js:</p>
  
  <pre><code>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
        }
      )
    ]
  
  };
  </code></pre>
  
  <p>package.json:</p>
  
  <pre><code>{
      "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"
      }
  }
  </code></pre>
  
  <p>tsconfig.json:</p>
  
  <pre><code>{
      "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
      }
  }
  </code></pre>