angular

angular copied to clipboard

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

@hansl do this issue belongs to the CLI ?

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.

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.

Would appreciate an update on this issue.

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

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

+1

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();
  });
};

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

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

@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. https://github.com/angular/angular-cli/issues/6381#issuecomment-605862609

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

great, finally, I see a little attention on this

@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.

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

any interest here ? that a very long time with no visible progress, and no real documentation about it.

Is there any pointers to some doc, some code that could be useful to maintain the state between refresh ?

The use case is to not run api call each time there is a reload as it can take a huge amount of time for some api call ...

@angularclass/hmr sounds like not up to date anymore ... any other way to do it ?

I think Angular needs a full hot reload support. Currently enabling hmr has some weird side effects and just don't work well with Angular. It still hard reloads and clears history, etc. I want to change some text in HTML without reloading app. Just like hot reload from Flutter. As I see this ticket is only about CSS. Other tickets for general hot reload for e.g. HTML etc. are closed in favor of this issue. But it's only CSS. But ok...

@infacto, this is something that we definitely want to improve. However, based on our comment it doesn't seem you are opted to use HMR. When HMR is enabled there is no hard reload nor clearing of history. Currently, our approach to HMR, is to re-bootstrap the application on every change as such any "local" state which is lost.

Still no progress after 6 years?

I am leaving Angular ASAP!

+1 Any progress on this ? we are doing a full redesign of our app and this is really painful having to reload all the page when making any. change , text/css/ts .. not preserving state is ok but at least changing styles without a full reload of the app is an absolute necessity.

@infacto, this is something that we definitely want to improve. However, based on our comment it doesn't seem you are opted to use HMR. When HMR is enabled there is no hard reload nor clearing of history. Currently, our approach to HMR, is to re-bootstrap the application on every change as such any "local" state which is lost.

What is functionally the difference between hmr and non-hmr in that case? If we're re-bootstrapping the whole application, it doesn't really sound like we're reloading a module.

This is a real productivity killer when it comes to styling, especially when we're doing css changes in a deep, nested workflow. Modern build tools can show css changes in ~20ms. In Angular, it can take 20s+ in complex workflows to see any css changes.

I suppose our only real solution here is: storybook everything and don't test styling changes in the app, which is quite unfortunate from a DX perspective.

Unfortunately we all have to admit that HMR doesn't work in Angular, v15, 7 years after the release - and it's 2023.

Will there be any ETA in this issue? Would it be possible to prevent a re-bootstrap after the application has been hot-reloaded? Vue seems to be similar in terms of architecture with Angular and hot reloading has been achieved long ago so are there any angular-sprcific obstacles here?

I hope someone from the Angular team could provide an update on the status of HMR.

It would be greatly appreciated if we could receive some insight, even if it requires a bit of creative storytelling considering it is xxxx 2023.

Was struggling with getting this to work this morning. Now I'm realizing it's not me that's broken, but Angular! At least I will stop wasting time on trying to fix this issue myself...

I've been doing Angular for few years now and every new version I keep hoping that HMR would work. Angular itself is great but I just can't recommend this framework without full HMR support. At least can we have HMR with just the HTML/CSS only? As one UI dev to another, please make this happen.

I've been doing Angular for few years now and every new version I keep hoping that HMR would work. Angular itself is great but I just can't recommend this framework without full HMR support. At least can we have HMR with just the HTML/CSS only? As one UI dev to another, please make this happen.

I totally agree with you, we need this feature ASAP, it's really awful to wait for the browser to finish loading each time you change a single word in your HTML/CSS, I recently moved from React to Angular, and I loved Angular instantly, but one thing that I like about react, is how you can update your code and see those updates automatically in the browser without reloading the whole thing.

so please ANGULAR TEAM make this happen asap, you guys have done an amazing job with this framework, coding in it feels good, you feel like you are doing things the right way, but please we need HMR, pleeeease!!!

The team is investigating using Signals but they can't do HMR right .... smh