HMR Story Update for 6rc2

[cwilsn]

Versions

Angular CLI: 6.0.0-rc.2
Node: 9.11.1
OS: darwin x64
Angular: 6.0.0-rc.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 6.0.0-rc.2
@angular-devkit/architect: 0.5.4
@angular-devkit/build-angular: 0.5.4
@angular-devkit/build-optimizer: 0.5.4
@angular-devkit/core: 0.5.4
@angular-devkit/schematics: 0.5.4
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 6.0.0-rc.2.4
@schematics/angular: 0.5.4
@schematics/update: 0.5.4
typescript: 2.7.2
webpack: 4.5.0

Repro steps

• Fresh install using ng new
• Following HMR setup story
• yarn run hmr

Changes needed?

Run script

"scripts": {
  ...
  "hmr": "ng serve --hmr -e=hmr"
}

becomes

"scripts": {
  ...
  "hmr": "ng serve --hmr"
}

angular.json

"environmentSource": "environments/environment.ts",
"environments": {
  "dev": "environments/environment.ts",
  "hmr": "environments/environment.hmr.ts",
  "prod": "environments/environment.prod.ts"
},

becomes

"configurations": {
  "hmr": {
    "fileReplacements": [
      {
        "src": "src/environments/environment.ts",
        "replaceWith": "src/environments/environment.hmr.ts"
      }
    ]
  },
  "production": {
  ...

After making the above changes, the app will be served but I get an console error with the following

dev-server.js:60 Uncaught Error: [HMR] Hot Module Replacement is disabled.
    at Object../node_modules/webpack/hot/dev-server.js

[filipesilva]

Fixed via angular/devkit#703

[seanmcintyre]

This is not fixed.

Angular CLI: 6.0.0-rc.5
Node: 9.10.1
OS: darwin x64
Angular: 6.0.0-rc.5
... animations, cli, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.7
@angular-devkit/build-angular     0.5.7
@angular-devkit/build-optimizer   0.5.7
@angular-devkit/core              0.5.7
@angular-devkit/schematics        0.5.7
@angular/language-service         6.0.0-rc.1
@ngtools/json-schema              1.1.0
@ngtools/webpack                  6.0.0-rc.5
@schematics/angular               0.5.7
@schematics/update                0.5.7
rxjs                              6.0.0-uncanny-rc.7
typescript                        2.7.2
webpack                           4.5.0

Using ng serve --hmr --configuration=hmr with:

angular.json

        "build": {
          "configurations": {
            "hmr": {
              "fileReplacements": [
                {
                  "src": "src/environments/environment.ts",
                  "replaceWith": "src/environments/environment.hmr.ts"
                }
              ]
            }
          }
        }

and

        "serve": {
          "configurations": {
            "hmr": {
              "browserTarget": "lighthouse-front-ng6:build"
            }
          }
        },

results in full page reloads on change.

[enten]

@seanmcintyre
Is the error below thrown when the page loaded in the browser?

dev-server.js:60 Uncaught Error: [HMR] Hot Module Replacement is disabled.
    at Object../node_modules/webpack/hot/dev-server.js

If the error isn't thrown: did you notice the [HMR] connected message in the browser's console log?

The pull request angular/devkit#703 fixes that error and not a full page reload problem.

[seanmcintyre]

No.

[HMR] Waiting for update signal from WDS...

and

[WDS] Hot Module Replacement enabled.

which seems correct.

This issue should not be closed. The original problem of bad documentation for enabling HMR is not solved. @filipesilva

[ycpaladin]

i have this problem too. it is seems correct, no error, but it will refresh the all page when any changes.

[enten]

@seanmcintyre @ycpaladin Can you sharing a repository which reproduce that issue? I would like to reproduce that issue.