The Wayback Machine - https://web.archive.org/web/20210218172816/https://github.com/angular/angular-cli/issues/19867
Skip to content

/ angular-cli

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

`ng serve --hmr` should apply changes in component styles without reinitialization of the whole app #19867

Open
th0r opened this issue Jan 25, 2021 · 5 comments
Open

`ng serve --hmr` should apply changes in component styles without reinitialization of the whole app #19867

th0r opened this issue Jan 25, 2021 · 5 comments
Labels
comp: devkit/build-angular devkit/build-angular: dev-server need: investigation type: feature
Milestone
Backlog

Comments

@th0r
Copy link

@th0r th0r commented Jan 25, 2021 •
edited

🚀 Feature request

Command (mark with an x)

  • new
  • build
  • serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • extract-i18n
  • run
  • config
  • help
  • version
  • doc

Description

Currently during ng serve --hmr any change in component styles triggers reinitialization of the whole app. This behavior is far from ideal as route components in most of the apps need to load data asynchronously and their reinitialization triggers this process again, so applying a change in component's styles can't be reviewed immediately (as it should and as it's done in other frameworks like Vue or React).

I've created a reproduction repo:

  1. Clone it, run npm ci && npm start and open localhost:4200
  2. You'll see Initializing page... and then Page ready. TestPageComponent simulates data loading in it's ngOnInit method.
  3. Change this line to something like background-color: blue.
  4. TestPageComponent will be reinitialized and you'll be able to review the change only after 3 seconds.

Describe the solution you'd like

I expect changes in component styles to be applied immediately without reinitialization of the host component.

By the way, changes in global styles are applied immediately, as they should.
@alan-agius4
Copy link
Collaborator

@alan-agius4 alan-agius4 commented Jan 25, 2021

I did look into a way to achieve this in the past.

This is a non-trivial problem to solve, I will do some investigation but i think the the Framework needs to provide an API. See: angular/angular#39367
@ngbot ngbot bot modified the milestone: Backlog Jan 25, 2021
@alan-agius4 alan-agius4 mentioned this issue Jan 28, 2021
Closed
1 of 15 tasks complete
@mtuzinskiy
Copy link

@mtuzinskiy mtuzinskiy commented Feb 4, 2021 •
edited

One addition: it's not only about the styles.
When I change the lazy componet's code, I can see that only the lazy component module is being reloaded in Network tab (as it should be), but still the whole app reinitializes, which basically makes HMR useless.
In other words, HMR still doesn't work in Angular 11.1.1, in 2021.
@Y2zz
Copy link

@Y2zz Y2zz commented Feb 4, 2021

I am very helpless, which means that Angular is not suitable for building large applications
@sebastian-zarzycki-es
Copy link

@sebastian-zarzycki-es sebastian-zarzycki-es commented Feb 9, 2021

I am also a bit flummoxed, how hot reloading is still a problem for Angular. Current solution seems very heavy handed, as it reloads whole module. For single-module applications, or applications with bigger modules, that does almost nothing.
@mtuzinskiy
Copy link

@mtuzinskiy mtuzinskiy commented Feb 12, 2021

Any hopes that this will be addressed any time soon?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
comp: devkit/build-angular devkit/build-angular: dev-server need: investigation type: feature
Projects
None yet
Milestone
Backlog
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
@Y2zz @th0r @mtuzinskiy @sebastian-zarzycki-es @alan-agius4