Skip to content

feat: HMR support for inline template changes#209

Merged
Brooooooklyn merged 1 commit intovoidzero-dev:mainfrom
BenjaminDobler:feat/inline-template-hmr
Apr 3, 2026
Merged

feat: HMR support for inline template changes#209
Brooooooklyn merged 1 commit intovoidzero-dev:mainfrom
BenjaminDobler:feat/inline-template-hmr

Conversation

@BenjaminDobler
Copy link
Copy Markdown
Contributor

Problem

When a component uses an inline template (template: \...`), any change to the .tsfile triggers a full page reload — even if only the template string was modified. External.htmltemplates get proper HMR via the customfs.watchhandler, but inline templates don't benefit from this because the template is embedded in the.ts` file.

This means developers using inline templates (common in Angular 17+ standalone components) get a significantly worse DX than those using external templates.

Reproduction

  1. Create a component with template: \

    Hello

    ``
  2. Run dev server with liveReload: true
  3. Change the template to template: \

    World

    ``
  4. Observe: full page reload instead of HMR

Fix

In handleHotUpdate, before triggering a full reload for a component .ts file change, check if only the inline template portion changed:

  1. Cache inline template content during transform — store the template string for each component file
  2. On file change, diff old vs new — extract the new template, compare with cached version
  3. If only the template changed — add to pendingHmrUpdates and send angular:component-update event (same mechanism as external templates)
  4. If non-template code also changed — fall through to full reload (unchanged behavior)

The existing HMR middleware endpoint already handles inline templates via extractInlineTemplate(), so no middleware changes are needed — it just needs a pendingHmrUpdates entry to serve the update.

Test plan

  • Inline template edit → verify HMR live update (no full reload)
  • Non-template .ts edit (e.g., change a method) → verify full reload still triggers
  • Mixed change (template + class code) → verify full reload
  • External template edit → verify existing HMR still works (no regression)
  • Component with no inline template → verify no change in behavior

When a component .ts file changes and only the inline `template: `...``
portion differs, route it through the existing component HMR mechanism
instead of triggering a full page reload.

This gives inline template components the same fast HMR experience as
external .html templates.

Implementation:
- Cache inline template content during transform
- In handleHotUpdate, compare old vs new template content
- If only the template changed, add to pendingHmrUpdates and send
  angular:component-update event (same path as external templates)
- The existing HMR middleware endpoint already handles inline templates
  via extractInlineTemplate(), so no middleware changes needed
- Falls back to full reload if non-template code also changed
@BenjaminDobler BenjaminDobler force-pushed the feat/inline-template-hmr branch from e803857 to 06c9945 Compare April 3, 2026 12:28
@Brooooooklyn Brooooooklyn merged commit 581f4ed into voidzero-dev:main Apr 3, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants