HMR with Ionic causes inputs to not be restored

[mhartington]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: ....

No, as HMR did not exist 😄

Description

A clear and concise description of the problem...

While serving an app with Ionic and HMR enabled, if certain Ionic components are present in the DOM, HMR is not able to save and restore input values. This is because certain ionic components make use of hidden inputs.

As hmr-accept.ts gets updates, it queries for all inputs in the dom, including the hidden ones. After the dom is rebuilt, the hidden input in Ionic is not rendered, causing a mismatch in the old/new inputs. Since the inputs do not match, it currently just prints a warning to the dev tools

    else if (oldInputs.length) {
        console.warn('[NG HMR] Cannot restore input/textarea values.');
    }

A PR to address this is on it's way 😬

🔬 Minimal Reproduction

https://github.com/mhartington/hrm-ionic-test

🔥 Exception or Error

🌍 Your Environment

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 11.0.1
Node: 12.16.1
OS: darwin x64

Angular: 11.0.0
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.1
@angular-devkit/build-angular   0.1100.1
@angular-devkit/core            10.0.8
@angular-devkit/schematics      10.0.8
@angular/cli                    11.0.1
@schematics/angular             10.0.8
@schematics/update              0.1100.1
rxjs                            6.5.5
typescript                      4.0.5

[mhartington]

#19386

[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.}