angular-cli: HMR stuck on "[WDS] App hot update..."

Bug Report or Feature Request (mark with an x)

- [x] bug report
- [ ] feature request

Area

- [x] devkit
- [ ] schematics

Versions

node: v8.11.2 npm: 5.6.0 Windows: 10 Angular CLI: 6.0.8

Repro steps

I updated the project from 5.0.1 to version 6. Everything seems to be working fine except for HMR. Configurations for HMR in the project are as follow:

angular.json

    "build": {
              "configurations": {
                "hmr": {
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.hmr.ts"
                    }
                  ]
                }
              }
            },
 "serve": {
          "configurations": {
            "hmr": {
              "hmr": true,
              "browserTarget": "appHit:build:hmr"
            },
          }
        },

hmr.js

import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';

export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
  let ngModule: NgModuleRef<any>;
  module.hot.accept();
  bootstrap().then(mod => ngModule = mod);
  module.hot.dispose(() => {
    const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
    const elements = appRef.components.map(c => c.location.nativeElement);
    const makeVisible = createNewHosts(elements);
    ngModule.destroy();
    makeVisible();
  });
};

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

import { hmrBootstrap } from './hmr';

if (environment.production) {
  enableProdMode();
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.hmr) {
  if (module[ 'hot' ]) {
    hmrBootstrap(module, bootstrap);
  } else {
    console.error('HMR is not enabled for webpack-dev-server!');
    console.log('Are you using the --hmr flag for ng serve?');
  }
} else {
    bootstrap().catch(err => console.log(err));
}

Commands used: ng serve --hmr

ng serve --hmr --configuration hmr

ng serve --configuration hmr

The log given by the failure

In Terminal, I can see the app being watched and getting compiled on changes to the file. In browser, I get the following logged in console:

[WDS] App updated. Recompiling… [WDS] App hot update…

But after that nothing happens. The app is kinda stuck on the App hot update.

Desired functionality

Components getting hot reloaded in the browser.

Mention any other details that might be useful

package.json

  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "^6.0.8",
    "@angular/compiler-cli": "^6.0.4",
    "@angularclass/hmr": "^2.1.3",
    "@angularclass/hmr-loader": "^3.0.4",
    "@types/core-js": "^2.5.0",
    "@types/hammerjs": "^2.0.34",
    "@types/jasmine": "^2.8.8",
    "@types/jquery": "^3.3.2",
    "@types/node": "^10.1.4",
    "add-asset-html-webpack-plugin": "^2.1.3",
    "angular-router-loader": "^0.8.5",
    "angular2-template-loader": "^0.6.2",
    "copy-webpack-plugin": "^4.5.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "ts-helpers": "^1.1.2",
    "ts-node": "^6.1.0",
    "tslib": "^1.9.2",
    "tslint": "^5.10.0",
    "tslint-loader": "^3.6.0",
    "typescript": "^2.7.2",
    "webpack": "^4.12.0",
    "webpack-dev-server": "~3.1.4",
    "webpack-dll-bundles-plugin": "^1.0.0-beta.5",
    "webpack-merge": "^4.1.2"