fix(vite-plugin-angular): correctly implement HMR of component styles

[mattlewis92]

PR Checklist

Follow up to #1539

What is the new behavior?

In #1539 I thought I had fixed HMR, but actually what that change did was disable HMR for component stylesheets and trigger a full reload 🤦‍♂️

So this followup implements the missing pieces:

1. Implements the appropriate callback for component stylesheets in the handleHotUpdate plugin hook to reimplement HMR of component styles
2. Handles ViewEncapsulation.Emulated components by using the encapsulateStyle helper

Does this PR introduce a breaking change?

• Yes
• No

Relevant bits from the CLI where I based this code from:

• https://github.com/clydin/angular-cli/blob/602081d18f3c5e0a878f4bf0986461d8b6041130/packages/angular/build/src/builders/dev-server/vite-server.ts#L479-L514
• https://github.com/angular/angular-cli/blob/ddae37fdf3c1c93bd2ae9c51812a9d469b68bd77/packages/angular/build/src/tools/vite/middlewares/assets-middleware.ts#L84-L135

Other information

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

[netlify]

✅ Deploy Preview for analog-app ready!

Name	Link
🔨 Latest commit	691ee70
🔍 Latest deploy log	https://app.netlify.com/sites/analog-app/deploys/677d30c411bbf20008258e93
😎 Deploy Preview	https://deploy-preview-1542--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	691ee70
🔍 Latest deploy log	https://app.netlify.com/sites/analog-blog/deploys/677d30c4ba3e2e0008203293
😎 Deploy Preview	https://deploy-preview-1542--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-docs ready!

Name	Link
🔨 Latest commit	691ee70
🔍 Latest deploy log	https://app.netlify.com/sites/analog-docs/deploys/677d30c49a431e0008819d90
😎 Deploy Preview	https://deploy-preview-1542--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-ng-app ready!

Name	Link
🔨 Latest commit	691ee70
🔍 Latest deploy log	https://app.netlify.com/sites/analog-ng-app/deploys/677d30c42f8a03000881fbe3
😎 Deploy Preview	https://deploy-preview-1542--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.

[brandonroberts]

Do you know what version this was introduced in? We support Angular v17-19

[mattlewis92]

Looks like it was added in 17.1.0: angular/angular@f0377d3

I can just make it lazy as we only need it if liveReload is enabled, which will only work in v19+

[brandonroberts]

Good idea

[mattlewis92]

Done! 5b3dbfe (#1542)

[brandonroberts]

@mattlewis92 something has broken with the styles in the PR preview

https://deploy-preview-1542--analog-app.netlify.app/

https://analog-app.netlify.app/

[mattlewis92]

@mattlewis92 something has broken with the styles in the PR preview

deploy-preview-1542--analog-app.netlify.app

analog-app.netlify.app

I think this should fix it! 9ca000a (#1542)

[brandonroberts]

@mattlewis92 that does fix the build, but the development server is still the same if you run nx serve analog-app and go to http://localhost:3000

[brandonroberts]

I think it was this PR that introduced the regression #1539

[mattlewis92]

I think it was this PR that introduced the regression #1539

Yep it's definitely that. The problem seems to be specific to component inline styles rather than external styleUrls

The vite plugin inlines the style into the href of the stylesheet:

Whereas the angular cli creates a virtual file that contains the compiled css:

[mattlewis92]

OK this should do the trick! 691ee70 (#1542)

[brandonroberts]

@mattlewis92 thanks! Will you add this back in this PR? #1539

I reverted it on beta so we can keep it all as one change

[brandonroberts]

Thanks again @mattlewis92. Works great!