javascript - Angular2でWebpackホットリロード?

Question

webpack ホット リロード ミドルウェアと angular 2. で最も奇妙な問題が発生しています。単純な index.html があり<my-app></my-app>ます。私の webpack 設定も非常にシンプルです。以下です。

私のアプリは HMR ドキュメント ( 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
}));

最初のロードでは、これはうまく機能します。アプリが起動し、index.html が含ま<script type="text/javascript" src="http://localhost:3000/main.js"></script>れています。次に、テストとしてアプリで何かを変更すると、コンソールで webpack が正常に再構築されることがわかりますが、ブラウザーは更新されません。そのため、リロードを押してみましたが、スクリプト タグが完全に消えているように見えるため、アプリは読み込み中のバナーでスタックします。

誰もこれを見たことがありますか？これを機能させる方法はありますか？

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()
    ]
};