feat(vite-plugin-angular): introduce support for Angular v19 HMR/live reload

[brandonroberts]

PR Checklist

Closes #1524

What is the new behavior?

When using the liveReload option in the analog plugin with Angular v19, the new HMR code generated by the compiler is handled by the vite plugin, enabling HMR updates without full page reloads.

• Inline styles and templates are supported
• External styles and templates are supported
• Page reloads occur when classes are changed (logic copied from Angular compilation)

/// <reference types="vitest" />

import { defineConfig } from 'vite';
import analog from '@analogjs/platform';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  // ..other config
  plugins: [analog({ liveReload: true })],
}));

Does this PR introduce a breaking change?

• Yes
• No

Other information

Links
https://vite.dev/guide/api-plugin.html#handlehotupdate
https://bjornlu.com/blog/hot-module-replacement-is-easy#importmetahotaccept

[optional] What gif best describes this PR or how it makes you feel?

[netlify]

✅ Deploy Preview for analog-docs ready!

Name	Link
🔨 Latest commit	e6be185
🔍 Latest deploy log	https://app.netlify.com/sites/analog-docs/deploys/676ecf8178251f0008672033
😎 Deploy Preview	https://deploy-preview-1523--analog-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for analog-app ready!

Name	Link
🔨 Latest commit	e6be185
🔍 Latest deploy log	https://app.netlify.com/sites/analog-app/deploys/676ecf812be41c00089d7797
😎 Deploy Preview	https://deploy-preview-1523--analog-app.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for analog-blog ready!

Name	Link
🔨 Latest commit	e6be185
🔍 Latest deploy log	https://app.netlify.com/sites/analog-blog/deploys/676ecf81aa0cb90008c4f097
😎 Deploy Preview	https://deploy-preview-1523--analog-blog.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for analog-ng-app ready!

Name	Link
🔨 Latest commit	e6be185
🔍 Latest deploy log	https://app.netlify.com/sites/analog-ng-app/deploys/676ecf819e55540008820c16
😎 Deploy Preview	https://deploy-preview-1523--analog-ng-app.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[sawa-ko]

Finally someone did what angular has never been able to, HMR without reloading the page completely.

I still don't understand how the community has been asking for it for years but they can't do it...

[brandonroberts]

Finally someone did what angular has never been able to, HMR without reloading the page completely.

I still don't understand how the community has been asking for it for years but they can't do it...

@sawa-ko that's incorrect. It's enabled in Angular v19 already through the Angular CLI and will be the default for new apps in 19.1. We integrated the HMR functionality into Analog.

[sawa-ko]

Hum, but the angular HMR keeps reloading the entire page when a component changes, right?

And no, I don't mean the CSS HMR.

[brandonroberts]

@sawa-ko By default yes, HMR has to be enabled manually using an environment variable.

NG_HMR_TEMPLATES=1 ng serve

This will be enabled by default for newly created Angular apps in Angular v19.1 which hasn't been released yet. You can also enable it with the liveReload: true option for the project in the angular.json.

PR: angular/angular-cli#29114