Add HMR when using component styles and template

[mikkelrd]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[X] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Although the Angular+Webpack docs present the combo as "an excellent alternative to the SystemJS approach", loading component styles via styles or styleUrls results in a full page refresh, instead of style injection, which occurs when using SystemJS+lite-server.

Expected behavior

A core feature of using Webpack+Webpack-dev-server in development is the availability of Hot Module Replacement. It is expected that HMR would work for css injection regardless of the style loading strategy used. Instead, currently changes to css or scss files which are included in a component's styles result in a full page reload.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Speed up the Angular 2 development process for CSS developers

Please tell us about your environment:

• Angular version: 2.0.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript 2.02 | ES6/7 | ES5]

• Webpack version: 1.13.2

• Webpack-dev-server version: 1.14.1

• Node (for AoT issues): node --version = 6.5.0

[vicb]

@hansl do this issue belongs to the CLI ?

[hansl]

This is technically within the Angular Core team, but it's unclear whether this is doable without breaking changes. It might be possible without any changes to Angular as well, if you can unload Components and reload them.

He's asking for HMR support, which would allow API endpoints to replace style/templates of certain components (or delete the component from memory, and reload it from a new source), instead of rebuilding the whole Angular bootstrap.

[kubal5003]

A lot of time has passed since this question was asked. Are there any updates? I've seen people doing HMR with Angular, but never with component level isolation.

[shyamal890]

Would appreciate an update on this issue.

[naivefun]

After tried React hot CSS reload the Angular CSS reload with page reload is unbearable. Really expect this feature!

[vulkanosaure]

any news about that ? i also can have HMR for global scss files, but not for component specific scss files, really look forward to it as well

[pablozandona]

+1

[michaeljota]

This can be doable with proper HMR configuration. I think this can be closed, as this is not related to Angular.

import { ApplicationRef, NgModuleRef } from '@angular/core';
import { createNewHosts, removeNgStyles } from '@angularclass/hmr';

export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>): void => {
  let ngModule: NgModuleRef<any>;
  module.hot.accept();
  bootstrap().then((mod) => (ngModule = mod));
  module.hot.dispose(() => {
    const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
    const elements = appRef.components.map((c) => c.location.nativeElement);
    const makeVisible = createNewHosts(elements);
    removeNgStyles();
    ngModule.destroy();
    makeVisible();
  });
};

[hiepxanh]

how it's going? it been 4 years since this issue open. I belive that it's really important. It's helpful. And it's community voice

[michaeljota]

@hiepxanh You can use @angularclass/hmr library for this.

[hiepxanh]

@michaeljota I already try this.
I even develop this
I have a plugin that allow us to do that. It's emit change base on vscode extention to chrome extention. Fast reload without reload all application https://www.youtube.com/watch?v=W-hWhR5GX_c&t=1s (repos here: https://github.com/xanhtool/SnapCss)
But this is not enough.
angular/angular-cli#6381 (comment)

[alan-agius4]

Also related from angular/angular-cli#19233

Description

I am using HMR with the latest rc of the cli.
Refresh and refill of forms works great, however the app state (saved as variables in services) is lost with each refresh.
It seems that all services are newly created with each reload.

Describe the solution you'd like

The app doesn't loose the current state of the app at an HMR update

[hiepxanh]

great, finally, I see a little attention on this

[twf1985]

@michaeljota I already try this. I even develop this I have a plugin that allow us to do that. It's emit change base on vscode extention to chrome extention. Fast reload without reload all application https://www.youtube.com/watch?v=W-hWhR5GX_c&t=1s (repos here: https://github.com/xanhtool/SnapCss) But this is not enough. angular/angular-cli#6381 (comment)

The work you have done looks very interesting. I would like to follow the best practices the Angular team has defined, but the time penalty for having styles stored in each component is too significant. Perhaps your work will allow us to bridge the gap (somewhat) until this issue is resolved.

[hiepxanh]

long time no see, it is a little complex and have some block that I cannot continue, since I change to use tailwind, it doesn't useful anymore :D. maybe you should try tailwind sir. If I have a solution to update html code On The Fly, it will be so good

[jeudryWepsys]

WE NEED TRHIS!!

[3dyuval]

Just came in here to say that this is 2024 and we still need this

[scarqin]

We need this

[tayambamwanza]

@rohit-techolution have you tried Angular 18? It seems like hmr has improved on css, it's not 100% but there seems like an improvement, do they are working on it it seems.

[rohit-techolution]

@rohit-techolution have you tried Angular 18? It seems like hmr has improved on css, it's not 100% but there seems like an improvement, do they are working on it it seems.

Enterprises cannot update to latest version as soon it is released. We are on 16-17.
Angular team should really prioritise it as it will improve developer experience. No wonder developers love other frameworks.

[tayambamwanza]

@rohit-techolution have you tried Angular 18? It seems like hmr has improved on css, it's not 100% but there seems like an improvement, do they are working on it it seems.

Enterprises cannot update to latest version as soon it is released. We are on 16-17.
Angular team should really prioritise it as it will improve developer experience. No wonder developers love other frameworks.

I believe they have it on priority, since it's improving and on the road map, just because it's not here today doesn't mean it's not coming.

[haskelcurry]

We need this

[DanielMcFluffy]

We need this

[daniel-rrapi]

We still need this

[aniketsuryavanshi093]

@rohit-techolution have you tried Angular 18? It seems like hmr has improved on css, it's not 100% but there seems like an improvement, do they are working on it it seems.

How did you manage to add hmr in angular 18

[Junior-Stalin]

2023, 2024 I'm still waiting for this

[lucas-implanta]

Using Angular 18 here, unfortunately, updating CSS or simple text in components still updates the whole application 😥 (i envy so much react devs)

[hakimio]

Angular 19 now has NG_HMR_TEMPLATES=1 for HMR template updates, but at least for me it's not working.
The console message says Component update sent to client(s). but nothing changes in the browser. Disappointing.

More info on Angular blog

[marcellkiss]

Same here, on a brand new @angular/cli project, version 19.0.0, the only thing the NG_HMR_TEMPLATES=1 is doing, that it turns off refresh on template changes.

(Maybe it should also be removed from the announcement post for now.)

[JeanMeche]

What the blog doesn't say is that template HMR only works for external template files (and not inline templates) for now.

[hakimio]

Tested with external template and it didn't update anything in the browser.

[marcellkiss]

Tried both without success

[JeanMeche]

You're right, a small regression sneaked in just before the release but was already fixed in #58724. It'll be shipped in the next patch release.

[cjosue15]

Currently i have this error in a template file when i use NG_HMR_TEMPLATES=1 ng serve, i'm using the version ^19.0.0

[hakimio]

It's fixed by the PR @JeanMeche mentioned.

[hakimio]

Template and style HMR now works on all platforms with Angular 19.0.4 and Angular CLI 19.0.5.
The only major remaining HMR issue is #59058

[scr2em]

Time to edit my will, I got HMR before my children

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