HMR on Linux Mint

[davayd]

Hi everyone,I'm facing with hot replacement problem.
Here is my webpack.config

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const ATL = require('awesome-typescript-loader');
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const CheckerPlugin = ATL.CheckerPlugin;
const TsConfigPathsPlugin = ATL.TsConfigPathsPlugin;

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: {
            extensions: ['.js', '.ts', 'scss', 'css'], plugins: [
                new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
            ]
        },
        output: {
            filename: '[name].js',
            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                {
                    test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? [{
                        loader: 'ng-router-loader',
                        options: {
                            loader: 'async-import',
                            genDir: 'compiled',
                            aot: !isDevBuild
                        }
                    }, 'awesome-typescript-loader?silent=true', 'angular2-template-loader']
                        : '@ngtools/webpack'
                },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] },
                { test: /\.scss$/, use: ['to-string-loader', 'css-loader', 'sass-loader'] },
                { test: /\.(jpg|png|gif)$/, use: 'file-loader' },
                { test: /\.(woff|woff2|eot|ttf|svg)$/, use: 'file-loader' }
            ]
        },
        plugins: [new CheckerPlugin(), new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/, path.join(__dirname, './client')),]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
        entry: { 'main-client': './ClientApp/boot.browser.ts' },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
                // Plugins that apply in production builds only
                new UglifyJSPlugin(),
                new AngularCompilerPlugin({
                    tsConfigPath: './tsconfig.json',
                    entryModule: path.join(__dirname, 'ClientApp/app/app.module#AppModule')
                })
            ])
    });

    return [clientBundleConfig];
};

After running my angular application i looking on console that [HMR] connected

import './polyfills';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module.browser';
declare const module: any;
// Enable either Hot Module Reloading or production mode
if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => {
        // Before restarting the app, we create a new root element and dispose the old one
        const oldRootElem = document.querySelector('app-root');
        const newRootElem = document.createElement('app-root');
        oldRootElem!.parentNode!.insertBefore(newRootElem, oldRootElem);
        oldRootElem!.remove();
        modulePromise.then(appModule => appModule.destroy());
    });
} else {
    enableProdMode();
}
// Note: @ng-tools/webpack looks for the following expression when performing production
// builds. Don't change how this line looks, otherwise you may break tree-shaking.
const modulePromise = platformBrowserDynamic().bootstrapModule(AppModule);

BUT after editing and saving file nothing is happening. Please help me resolve problem.

Environment

Linux 4.8.0-53-generic #56~16.04.1-Ubuntu SMP Tue May 16 01:18:56 UTC 2017 x86_64 x86_64 x86_64 GNU/Linux

[sokra]

It looks like you just deleted/ignored our lovely crafted issue template. It was there for good reasons. Please help us solving your issue by answering the questions asked in this template. I'm closing this. Please open a new issue with filled issue template. Also make sure your issue is not a question. Questions should be posted on Stack Overflow.