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