Hot reload does not seem to work with Angular

[wuyuMk7]

• Node Version: 9.9.0
• NPM Version: 5.6.0
• koa Version: 2.5.1
• koa-wepback Version: 4.0.0

// client/config/webpack.dev.js
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
var webpack = require('webpack');

module.exports = webpackMerge(commonConfig, {
    devtool: 'cheap-module-eval-source-map',
    mode: 'development',

    output: {
        path: helpers.root('..', 'public', 'dist'),
        publicPath: '/',
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },

    plugins: [
        new ExtractTextPlugin('[name].css'),
        new webpack.NamedModulesPlugin()
        //new webpack.HotModuleReplacementPlugin()
    ],

    devServer: {
        historyApiFallback: true,
        stats: 'minimal',
        hotOnly: true
    }

});

// client/src/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';

import { AppModule } from './app/app.module';

declare var module: any;

if (process.env.ENV === 'production') {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

if (module.hot) {
    module.hot.accept();
}

// server/server.js
const Koa = require('koa');
const app = new Koa();

const serve = require('koa-static');

const staticFiles = __dirname + '/../public/dist';
const opts = {};

if (app.env != 'production') {
    const webpack = require('webpack');
    const koaWebpack = require('koa-webpack');
    const webpackConfig = require('../client/config/webpack.dev');
    let compiler = webpack(webpackConfig);
    console.log(compiler.options.output);

    app.use(koaWebpack({compiler: compiler}));
}

app.listen(4000);
console.log('Listening port 4000.');

All these codes have been pushed to my repo: https://github.com/wuyuMk7/development-kits/tree/angular-koa

Expected Behavior

The page can be updated by HMR when its code is modified.

Actual Behavior

The hot module reloading does not work. Every time I modify my file, such as the stylesheet file, the client can receive the hot-update file and messages from the server but the page keeps unchanged.

However, if I use webpack-dev-server and HotModuleReplacementPlugin instead of koa-webpack, the hot reloading works well. I am confused about that. I am not sure if the angular needs some extra configuration to work with the koa-webpack.

How can we reproduce the behavior?

Just run yarn dev and modify one file under client/src/app folder. Open the developer tools and you will see that the client can receive messages and files from the server but the page is not changed.

Thank you for your help.

[shellscape]

Thanks for the well-written issue 🍺 but unfortunately we don't provide support here, as per the issue template. koa-webpack is known to work with React, Angular, Vue, and non-framework setups and is in active use in webpack-serve, which would receive a metric poopton of issues if something was awry. koa-webpack also only composes webpack-dev-middleware and webpack-hot-client as per the README. If you were to find a bug in either package, this wouldn't be the place for the issue.

webpack-dev-server and koa-webpack have absolutely nothing in common, so any attempted comparison there will be a goose chase.

You likely have a problem with your particular setup or environment. I'd recommend starting from a minimal working test case with TypeScript and adding complexity a bit a time to identify the cause.

[wuyuMk7]

In fact, it works well except the HMR. I will check the configuration again as you said. Thanks so much for your prompt reply.