#Angular 19: Issue with Style Flickering When Switching Views

4 messages · Page 1 of 1 (latest)

onyx python
#

Hello everyone,

I'd like to inform you about a problem I've encountered after updating to Angular 19. When navigating from one view to another and back, I've noticed a flickering effect related to the styles of a specific component. As the component loads, it appears without any styles for a split second before the styles are applied and everything returns to normal.

Interestingly, this issue did not occur in Angular 18.

How to reproduce the problem:

  • Create a new project in Angular 19.
  • Create two routable components, e.g., view1 and view2.
  • Add HTML elements to each component, such as <h1>, <p>, and a <button> with a routerLink navigating between view1 and view2.
  • Add styles to these components, like background, font-size, etc.
  • Run the application and navigate to the main page. If you refresh the page directly or using the refresh button, everything works correctly.
  • Navigate using the button with routerLink to the second view and back. You'll notice that for a moment, the components are displayed without styles, and then the styles load.

Additional Information:

  • Browser: Google Chrome 131.0.6778.70

Has anyone else encountered a similar issue or has any ideas on what might be causing it? I would appreciate any guidance.

Example in stackblitz: https://stackblitz.com/edit/stackblitz-starters-nxy13i?file=src%2Fmain.ts

loud fossil
loud fossil
#

Seems like this bug is bound to the HMR of stylesheets cause once built, there is no bug anymore

onyx python
#

I think so too, after build there is no problem. During development it is a bit annoying.