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

[sherkhanz]

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"

[sherkhanz]

Looks like this issue is happening only on my end?

[mpalenov]

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

[mpalenov]

I found one of the reasons of that problem: check carefully your package.json, if you have @angular/cli dependency and some webpack dependencies the last one forces to install the wrong version of webpack and @angular/cli package isn't able to work properly.

[trumbitta]

Same here on Angular 8, with no additional Webpack dependency

[TheAifam5]

@trumbitta I removed the webpack from devDependencies and works :)

[trumbitta]

@TheAifam5 as I wrote above, I don't have any Webpack dependency

[CreativeHouseDotOrg]

@TheAifam5 as I wrote above, I don't have any Webpack dependency

@TheAifam5 Same here on Angular 8, with no additional Webpack dependency

Yup same Issue after updating from Angular 7 to 8

[TheAifam5]

Please provide your configuration or reproducible project. Would be much easier to find the issue.

[trumbitta]

As of my most recent tests I was able to use HMR on a plain CLI project, whereas the same configurations don't work in Nx 8 (they worked in Nx 7).

So for me the problem seems to be in Nx, not in @angular/cli.

But since @angular/cli uses Webpack, direct support in @angular/cli for HMR without third-party modules and all the configuration drama would be much appreciated.

[trumbitta]

Update on my end: it works.
I don't know what I exactly updated to make it work, but I generally updated Nx and Angular to the latest versions.
Also, very important, remember to delete package-lock.json as well as node_modules and reinstall after every update.

[raducostea]

Update on my end: it works.
I don't know what I exactly updated to make it work, but I generally updated Nx and Angular to the latest versions.
Also, very important, remember to delete package-lock.json as well as node_modules and reinstall after every update.

After upgrading from Angular 7 to 8, had the same issue. Removing node_modules and package-lock.json resolved my issue.

[alan-agius4]

Closing as this seems to be solvable by removing node_modules and package-lock.json.

If the problem persists, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}