HMR stuck on "[WDS] App hot update..."

[abbasharoon]

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"

[abbasharoon]

Looks like this issue is happening only on my end?

[maximpn]

I have the same problem.

[magnolo]

i got this problem too because i wanted to fix a dependency warning for webpack not explicitly installed for webpack-cli. so i added latest webpack and suddenly hmr was not working.

for now i decided to live with the warning and removed webpack from my devDeps cause angular-devkit seems to install it.

but would be great to hear about a solution for this

"devDependencies": {
"@angular-devkit/build-angular": "~0.6.8",
"@angular/cli": "^6.1.0",
"@angular/compiler-cli": "6.1.0",
"@angular/language-service": "6.1.0",
"@angularclass/hmr": "^2.1.3",
"@compodoc/compodoc": "^1.1.3",
"@types/d3": "^5.0.0",
"@types/hammerjs": "^2.0.35",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~9.4.6",
"codelyzer": "~4.2.1",
"jasmine-core": "~3.1.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.4.1",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"nodemon": "^1.17.1",
"npm-run-all": "^4.1.2",
"protractor": "~5.3.0",
"ts-loader": "^4.3.0",
"ts-node": "~6.0.3",
"tslint": "~5.9.1",
"typescript": "2.7.2",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.0.3",
"webpack-node-externals": "^1.6.0"
}

[antonevane]

The same issue with Angular CLI: 6.1.2 and
"@angular-devkit/build-angular": "~0.7.2",

[roldengarm]

Same issue, removing webpack from my devdependencies solved the issue!

[LanderBeeuwsaert]

Jep, same here.

[sunnygb]

Same here on angular 6

[clarkmclean]

Same here on angular 7