Webpack Hot Reload with Angular2?

Question

I have the weirdest middleware problem for reloading webpack and angular 2. I have a simple index.html that does <my-app></my-app>. My webpack configuration is pretty simple. This is below.

My application is a clone of HMR docs ( http://andrewhfarmer.com/webpack-hmr-tutorial/ );

app.use(webpackDevMiddleware(compiler, {
    hot: true,
    filename: 'bundle.js',
    publicPath: '/',
    stats: {
        colors: true,
    },
    historyApiFallback: true
}));

app.use(webpackHotMiddleware(compiler, {
    log: console.log,
    path: '/__webpack_hmr',
    heartbeat: 10 * 1000
}));

On first boot, this works great. An application will appear, and index.html has <script type="text/javascript" src="http://localhost:3000/main.js"></script>. Then I go over and change something in the application as a test, and I see on the console that webpack is being restored successfully, but the browser is not updating. So I tried to reload the download and the application got stuck on the boot banner because the script tag seems to completely disappear.

- ? , ?

var webpack = require('webpack');
var helpers = require('./webpack.helpers');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    devtool: 'eval-source-map',
    entry: [
        'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
        './src/client/polyfills.ts',
        './src/client/vendor.ts',
        './src/client/main.ts'
    ],
    module: {
        preLoaders: [
            {test: /\.ts$/, loader: 'tslint'}
        ],
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['ts-loader?configFileName=src/client/tsconfig.json', 'angular2-template-loader']
            },
            {test: /\.json$/, loader: "json-loader"},
            {test: /\.css$/, loader: "style-loader!css-loader"},
            {test: /\.scss$/, loaders: ['raw', 'sass']},
            {test: /\.less/, loader: "style!css!less"},
            {test: /\.png$/, loader: "url-loader?prefix=img/&limit=5000"},
            {test: /\.jpg$/, loader: "url-loader?prefix=img/&limit=5000"},
            {test: /\.gif$/, loader: "url-loader?prefix=img/&limit=5000"},
            {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff"},
            {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
            {test: /\.ttf(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=application/octet-stream'},
            {test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=image/svg+xml'},
            {test: /\.html$/, loader: 'raw'}
        ],
        postLoaders: []
    },
    output: {
        path: helpers.root('../../dist/public'),
        publicPath: 'http://localhost:3000/',
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },
    resolve: {
        cache: false,
        root: helpers.root(),
        extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
    },
    tslint: {
        emitErrors: false,
        failOnHint: false
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/client/public/index.html',
            chunksSortMode: 'dependency'
        }),
        new CopyWebpackPlugin([
            {from: './src/client/public'}
        ]),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};