HMR not working

[CedricBojoly]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search for issues before submitting
- [ ] feature request

Versions.

keycloak-angular 8.1.0 keycloak 11.0.3

Repro steps.

• Set up a new angular app.

• Setup keycloak in your angular project.

• Start angular with ng serve --hmr

• add: <span>test: title</span> <input type="text"> to app.component.html

• navigate to localhost:4200

• enter some text in input field

• change the text of the span and save.

input field value is not restored.

if you remove the keycloak.init method call from initializeKeycloak and just return true everything works as intended. The input field value is restore if you change something on app.component.html

The log given by the failure.

Desired functionality.

If you make some changes on your source code but already have entered some values in an input field the value of the input field should be restored.

[Bbemol]

Reproduced here too. This bug is clearer now that angular 11 update has HMR native support.

[Waterstraal]

I would really like to enable HMR, but this bug is preventing me from do so.

[fellmann]

I found a very hacky solution, that apparently works. Add to initializeKeycloak:

function initializeKeycloak(keycloak: KeycloakService) {
  return () => {
    if (!environment.production) {
      if ((window as any).keycloak) {
        Object.assign(keycloak, (window as any).keycloak);
        return true;
      } else {
        (window as any).keycloak = keycloak;
      }
    }

    return keycloak.init({
      // ...
    });
  };
}

Still, this ticket is almost one year old, and the project has more than 45.000 downloads per week, so I would expect official support for HMR.