Angular 19: Issue with Style Flickering When Switching Views (ng serve)

[grzegorzszymonik]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

Hello everyone,

The problem occurs when starting the project via npm run start (i.e. ng serve). When the project is built, the problem does not occur.

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.

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

Example in stackblitz: https://stackblitz.com/edit/stackblitz-starters-rb8wat

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

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-rb8wat

Please provide the exception or error you saw

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. As if there was a delay in loading the styles.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 19.0.3
Node: 20.13.1
Npm: 8.3.0

Angular: 19.0.3

@angular-devkit/build-angular: "19.0.3",
@angular/cli: "19.0.3",
@angular/compiler-cli: "19.0.3",

Anything else?

No response

[shannonvc]

We also had this in our project.
It is indeed caused by the way HMR loads styles seperately from the components.
In the repro link, running the app with ng serve --no-hmr (or changing he npm start script to include the flag) will work as it did before.

[otodockal]

I just wanted to report this issue and have created a demo repository to reproduce it: https://github.com/otodockal/ng-host.

In my case, the flickering occurs when combining styles declared in :host and HMR (which is default now).

ng-host.mov

[WebTechnolog]

I encounter the same issue. And it also strangely affects mat-table with sticky columns.
I have a table in a dialog and 2 sticky columns positioned next to each other. But with this issue there are gaps between these columns. Their left positions are not properly calculated.
ng serve --no-hmr fixes the issue, but HMR is a cool feature of v19, and would be great to have it fixed.

[joewIST]

I am experiencing the same issue even with HMR off.

[e-oz]

@joewIST then it, perhaps, is a different bug and requires a different reproduction example.

[joewIST]

All I can see is that on v19, when a component is lazy loaded, there is an asynchronous request to load that component's stylesheet (even if it's already been loaded):

This wasn't happening on v18:

[RafalSzczuka]

It is worth noticing that this issue does not occur in Firefox browser. Turning off hmr flag helps for me as well.

[joewIST]

We still get the flickering on Firefox (which occurs while the styles are loaded). The only difference is that on Firefox, once the styles have been loaded, they are not reloaded whenever the component is reused. On Edge/Chrome, they seem to be loaded every time the component is requested, which causes the flicker to occur a lot.

For reference, this is only happening when a) a component is dynamically rendered (e.g. something in a dropdown that gets initialised when the dropdown is opened or b) a component is wrapped in an @if block and is only rendered after a user interaction (e.g. a loading state in a button).

[joewIST]

I have been able to remove the flickering, based on the asynchronous loading of styles, but for our project it only works when I set the "live-reload" flag to false. The "hmr" flag seems to have no impact. When I serve the application with this flag set, the styles are working as they did before upgrading to v19.

Obviously, there is a cost with this, as the app requires a manual refresh for any changes to be reflected, so it would be good to have this fixed!

Thanks

[hakimio]

@joewIST are you testing with --hmr false or --no-hmr flag?

[joewIST]

@hakimio I have tried it with both and neither have any impact. Like I said, the only thing that has made a difference is turning live reload off...

[AndSokolov]

I also created a similar issue #59129.
Another way to fix this is to replace builder in angular.json with "builder": "@angular-devkit/build-angular:browser"

[ZixZux]

I have the same issue.

But it's the smallest of the problem - the key problem is that now ngAfterViewInit is called before the styles of component are loaded.

It's very huge impact on the application.

I've created separated issue: "Angular 19: Component initialization logic is broken by HMR #59151".

[SebastianPodgajny]

FYI
Nx dev-server ignores hmr option for Angular@19
https://github.com/nrwl/nx/blob/master/packages/angular/src/builders/dev-server/lib/normalize-options.ts#L24
possible fix nrwl/nx#29322

[Tom-ITietz]

Hi Everyone i got the same Issue even after Deployment using ng build

[avicarpio]

Also having this issue.

[JeanMeche]

Important

To help us investigate, please provide the specific version of the software you're using. This will help us pinpoint the issue more effectively

[abdurrahmanarikan]

Using v18 on my mac without nx, it happens when the main page is loading. After the loading, whenever I press refresh (f5) it also happens

[muhamedkarajic]

Under here I made a minimal reproduction when using the flag npm run serve and npm run serve-no-hmr the issue is obvious cause when hmr is enabled the red circle moves when opening the page or refreshing it while its not like that without hmr. The red circle is in my case a navbar and its not a great dev experience that the style transitions. I think that should somehow get patched if possible cause by me even it causes the smooth scroll to not work properly cause there is a layout shift.

All details of my OS, etc I wrote already under:
#59318

Update: When building it and running it from a server its not happening. Its purly in my case solved by not using hmr.

NOTE: On my website, when transitioning pages I have the hmr issue as well. So this is NOT only when opening the page for the first time and refreshing but also when navigating trough the pages e.g. home, about, etc.

[muhamedkarajic]

I spent so far 7h on this, updating node version, adding back standalone, making a open source version so someone can reproduce it, writing down everything.

I don't mind the time. However I'm afraid of the frameworks reputation cause people will update, devs will experience this issue and be lost. Maybe keep v18 again as I did in the first place.

I get that the milions of tests, that google has, has not catched this issue cause its a purly developer experience issue but on the other hand I never ever saw a developer updating the hole project and then first running its tests before opening the page once and looking at it. Maybe at least in some projects the tests have to be also executed serving the project not building it then this bug would have been noticed.

Please revert the HMR as a default or fix the issue but this can not stay until v20 like this, not even until 19.1 I think.

[muhamedkarajic]

FYI Nx dev-server ignores hmr option for Angular@19 https://github.com/nrwl/nx/blob/master/packages/angular/src/builders/dev-server/lib/normalize-options.ts#L24 possible fix nrwl/nx#29322

I have Nx v20, yesterday updated using latest flag. Had the issue as everyone else. So its not true that its ignoring it. At least not right now.

[CryshotX]

I am experiencing the same issue.

Since I updated my project to Angular v19, I am experiencing style flickering for a split second, everytime I am navigating my application using the internal angular router. It also happens when refreshing the app with F5.

Disabling HMR fixes the issue, although I'd really like to use it.

[mk-16]

i openened an issue, but was immidiatly closed because of duplication....
ViewContainerRef createComponent UI Flickering #59372

there, i point out source/underlying issue & quick workaround without compromising on project, enjoy

[hakimio]

This late/lazy HMR style loading breaks Material Sidenav. mat-sidenav-content margin is calculated incorrectly.

HMR enabled:

HMR disabled:

The demo project with steps to reproduce the issue: Material Sidnav style HMR bug

@clydin it's crazy that some 6 year old bugs are not fixed because the fix causes Google internal tests to break. Yet it feels like this new style HMR was enabled by default without any testing at all.
Is there a fix coming anytime soon or is this considered a low priority issue?

[jamesstztu]

The issue went away for me when I turned hmr off.
You can do it via ng serve --hmr=false
or update your angular.json
"hmr": off

[vinuram1729]

When "hmr": off is added to the angular.json file, the issue is resolved, but it negatively impacts the application's performance. For example, when opening a modal, there is a noticeable delay.

…

On Thu, Jan 16, 2025 at 1:15 AM James Tu (Starz) ***@***.***> wrote: The issue went away for me when I turned hmr off. You can do it via ng serve --hmr=false or update your angular.json "hmr": off — Reply to this email directly, view it on GitHub <#59058 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALEDTY2T7YKOFIW5ULBKGF32K23EVAVCNFSM6AAAAABTBIVW2WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKOJTG44TKNJSGU> . You are receiving this because you commented.Message ID: ***@***.***>

[AndSokolov]

As an alternative you can change your builder in angular.json to "builder": "@angular-devkit/build-angular:browser". And the flickering will disappear.

[alan-agius4]

Thanks for reporting this issue. Luckily, it has already been fixed in one of the recent releases. Please update to the most recent version to resolve the problem.

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