HMR not working according to the documentation

[rbasniak]

Versions

Angular CLI: 6.0.5
Node: 8.9.4
OS: win32 x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.5
@angular-devkit/build-angular     0.6.5
@angular-devkit/build-optimizer   0.6.5
@angular-devkit/core              0.6.5
@angular-devkit/schematics        0.6.5
@angular/cli                      6.0.5
@ngtools/webpack                  6.0.5
@schematics/angular               0.6.5
@schematics/update                0.6.5
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

Repro steps

• create new application with cli

• follow the steps on https://github.com/angular/angular-cli/wiki/stories-configure-hmr

• one of the steps instructs to edit angular.json serve section according to this:

   "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "hmrWarning": false,
        "browserTarget": "hmrtest:build"
      },
      "configurations": {
        "hmr": {
            "hmr": true,
            "fileReplacements": [
              {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.hmr.ts"
              }
            ]
          },
        "production": {
          "browserTarget": "hmrtest:build:production"
        }
      }
    },
  

• when I do that, there's a lint error telling me that the fileReplacements property is not allowed

• run the project with ng serve --configuration hmr

Observed behavior

• project won't compile with the following error:

Schema validation failed with the following errors:
Data path "" should NOT have additional properties(fileReplacements).

Desired behavior

Project compiling and HMR working

Mention any other details that might be useful (optional)

I managed to make it compile using the angular.json from #10668, this way the project runs, and the console prints:

NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.

Also, the in the browser console I can see the message

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

But when I make any change in the project, the page is fully reloaded like it does without HMR.

[danieldiazastudillo]

Any updates on this? Docs story instructions not working at all

[mikelfcosta]

@danieldiazastudillo The changes done on #11029 have worked for me. Try to follow the instructions on that PR until it is approved, see if it works for you aswell.

[danieldiazastudillo]

@mikelfcosta works ok. Nonetheless, there are some issues wtih the provided code: a trailing comma after fileReplacements array and in main.ts inside else block the bootstrap function doesn't implement catch promise. BUT, the configurations works OK. Hope to see this merged in official docs.

[rbasniak]

@danieldiazastudillo @mikelfcosta I tried the new instructions, and they work, meaning the project compiles and runs. But, HMR doesn't seem to be working as I expected,

I created a simples <input > in index.html of a new cli project and typed something on it, then I add a new h1 element on this same HTML and save the file. The new element appears on the browser, but the value of the input is not held. Wasn't HMR supposed to keep this state? Or I got the wrong idea about HMR?

[danieldiazastudillo]

@rbasniak made my own tests and in fact, the state is lost in that case. I dont recall if working with HMR with AngularJS and Gulp tasks, in something that now looks like ancient history, worked liked that.

Another "unpleasent" behaviour it's the main reason that i was looking to work with an HMR dev-server was to work with some "drawer" menus, unfortunately, the animation state is lost and i have to open the desired drawer after every change. It would be nice to have some config for something like this (maybe it's already there).

[angular-automatic-lock-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.}