Skip to content

Conversation

@crisbeto
Copy link
Member

@crisbeto crisbeto commented Nov 1, 2024

Adjusts the HMR initialization to avoid the edge case where a developer makes change to a non-rendered component that exists in a lazy loaded chunk that has not been loaded yet. The changes include:

  • Moving the import statement out into a separate function.
  • Adding a null check for d.default before calling replaceMEtadata.
  • Triggering the import callback eagerly on initialization.

Example of the new generated code:

(() => {
  function Cmp_HmrLoad(t) {
    import(
      /* @vite-ignore */ "/@ng/component?c=test.ts%40Cmp&t=" + encodeURIComponent(t)
    ).then((m) => m.default && i0.ɵɵreplaceMetadata(Cmp, m.default, [/* Dependencies go here */]));
  }
  (typeof ngDevMode === "undefined" || ngDevMode) && Cmp_HmrLoad(Date.now());
  (typeof ngDevMode === "undefined" || ngDevMode) &&
    import.meta.hot &&
    import.meta.hot.on("angular:component-update", (d) => d.id === "test.ts%40Cmp" && Cmp_HmrLoad(d.timestamp));
})();

@crisbeto crisbeto added action: review The PR is still awaiting reviews from at least one requested reviewer area: compiler Issues related to `ngc`, Angular's template compiler target: rc This PR is targeted for the next release-candidate labels Nov 1, 2024
@ngbot ngbot bot added this to the Backlog milestone Nov 1, 2024
@angular-robot angular-robot bot added area: compiler Issues related to `ngc`, Angular's template compiler and removed area: compiler Issues related to `ngc`, Angular's template compiler labels Nov 1, 2024
@ngbot ngbot bot modified the milestone: Backlog Nov 1, 2024
@crisbeto crisbeto marked this pull request as ready for review November 1, 2024 08:59
@AndrewKushnir AndrewKushnir removed the action: review The PR is still awaiting reviews from at least one requested reviewer label Nov 1, 2024
Adjusts the HMR initialization to avoid the edge case where a developer makes change to a non-rendered component that exists in a lazy loaded chunk that has not been loaded yet. The changes include:
* Moving the `import` statement out into a separate function.
* Adding a null check for `d.default` before calling `replaceMEtadata`.
* Triggering the `import` callback eagerly on initialization.

Example of the new generated code:

```js
(() => {
  function Cmp_HmrLoad(t) {
    import(
      /* @vite-ignore */ "/@ng/component?c=test.ts%40Cmp&t=" + encodeURIComponent(t)
    ).then((m) => m.default && i0.ɵɵreplaceMetadata(Cmp, m.default, [/* Dependencies go here */]));
  }
  (typeof ngDevMode === "undefined" || ngDevMode) && Cmp_HmrLoad(Date.now());
  (typeof ngDevMode === "undefined" || ngDevMode) &&
    import.meta.hot &&
    import.meta.hot.on("angular:component-update", (d) => {
      if (d.id === "test.ts%40Cmp") {
        Cmp_HmrLoad(d.timestamp);
      }
    });
})();
```
@crisbeto crisbeto force-pushed the rework-hmr-initializer branch from 7cb95c0 to 3d28681 Compare November 1, 2024 16:40
@angular-robot angular-robot bot added area: compiler Issues related to `ngc`, Angular's template compiler and removed area: compiler Issues related to `ngc`, Angular's template compiler labels Nov 1, 2024
@crisbeto crisbeto added the action: merge The PR is ready for merge by the caretaker label Nov 1, 2024
thePunderWoman pushed a commit that referenced this pull request Nov 1, 2024
Adjusts the HMR initialization to avoid the edge case where a developer makes change to a non-rendered component that exists in a lazy loaded chunk that has not been loaded yet. The changes include:
* Moving the `import` statement out into a separate function.
* Adding a null check for `d.default` before calling `replaceMEtadata`.
* Triggering the `import` callback eagerly on initialization.

Example of the new generated code:

```js
(() => {
  function Cmp_HmrLoad(t) {
    import(
      /* @vite-ignore */ "/@ng/component?c=test.ts%40Cmp&t=" + encodeURIComponent(t)
    ).then((m) => m.default && i0.ɵɵreplaceMetadata(Cmp, m.default, [/* Dependencies go here */]));
  }
  (typeof ngDevMode === "undefined" || ngDevMode) && Cmp_HmrLoad(Date.now());
  (typeof ngDevMode === "undefined" || ngDevMode) &&
    import.meta.hot &&
    import.meta.hot.on("angular:component-update", (d) => {
      if (d.id === "test.ts%40Cmp") {
        Cmp_HmrLoad(d.timestamp);
      }
    });
})();
```

PR Close #58465
@thePunderWoman
Copy link
Contributor

This PR was merged into the repository by commit 7d0ba0c.

The changes were merged into the following branches: main, 19.0.x

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 2, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker area: compiler Issues related to `ngc`, Angular's template compiler target: rc This PR is targeted for the next release-candidate

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants