HMR stories. `configuration` is not present in angular.json schema

[Dok11]

https://github.com/angular/angular-cli/wiki/stories-configure-hmr

This key are not presented in https://github.com/angular/angular-cli/wiki/angular-workspace

[tinesoft]

Hi,

I think it is just a typo, just replace with configurations instead.

Also, i had to remove the "fileReplacements" part because i was getting:

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

angular.json

        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "<YOUR-APP>:build",
            "hmrWarning": false
          },
          "configurations": {
            "production": {
              "browserTarget": "<YOUR-APP>:build:production"
            },
            "hmr": {
              "hmr": true
            }
          }
        }, 

note: the "hmrWarning": false is optional, i added it to get rid of the warning displayed by the cli (to remind you that you must add/modify additional files to have "hmr" truly working)

[Silthus]

But the documentation states that the environment.hmr.ts file must replace the environment.ts file. Without the fileReplacements that is not possible.

[tinesoft]

I was confused about that too... But just the **"hmr": true** was sufficient for me. When the app starts, there is a log that confirms that the Dev server is running in HMR mode...

…

On Sun, May 6, 2018, 15:47 Silthus ***@***.***> wrote: But the documentation states that the environment.hmr.ts file must replace the environment.ts file. Without the fileReplacements that is not possible. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#10663 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AD3YZDFNaP4zK_TkAej_OySHtvatTFToks5tvv7pgaJpZM4Tzl3I> .

[Dok11]

Yes, later I found what HMR working without any manual configuration just with `ng serve --hmr

[collinstevens]

Background

@tinesoft @Dok11 I've been able to get the message that HMR is running when using "ng s -c hmr --hmr", but it isn't properly switching to environments.env.ts.

It will still do full page refreshes because it is using the environments.ts. If I place "hmr": true inside of the environments.ts, it will actually do HMR because it is using it now..

This documentation, https://github.com/angular/angular-cli/blob/v6.0.0-rc.8/packages/%40angular/cli/lib/config/schema.json#L1324-L1518, is not giving me any insight on how to fix the issue from what I can read.

This documentation, https://github.com/angular/angular-cli/wiki/stories-configure-hmr, is out of date. The "fileReplacements" property is invalid; it is being kicked back by the @angular/cli.

Interestingly, running "ng -s -c production" will use environments.prod.ts, but I don't see this configured anywhere except on the "build" property for angular.json (in the fileReplacements property of the "build" object).

Solution

I've managed to find a solution, but I don't know if it is the official solution. This fixes the currently broken HMR story and assumes that you've completed it's steps.

Inside of angular.json under architect/build/configurations, add a configuration named "hmr". Add the fileReplacements property to replace your regular environment.ts with the environment.hmr.ts.

"hmr": {
  "fileReplacements": [{
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.hmr.ts"
  }]
}

You will also need to modify angular.json again under architect/serve/configurations. Add a configuration as follows:

"configurations": {
  "hmr": {
    "hmr": true,
    "browserTarget": "loan-depot-devtools:build:hmr"
  }
}

The architect/server/configurations/hmr/browserTarget property will cause the @angular/cli to use the architect/build/configurations/hmr/fileReplacements property.

Question

I'm assuming there is a new place to put the fileReplacements property in angular.json so that it will properly replace the environments files?

[wkjesus]

Im agree with @collinstevens you need to do the configuration he talk about. the story must be update with this issue.