Ng serve with hmr is not applying styles in time

Command

serve

Is this a regression?

[ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I have a component that reads offsetWidth of div element.

import { Component, effect, ElementRef, viewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<div #div></div>',
  styles: `div { width: 250px; }`,
})
export class AppComponent {
  private _element = viewChild('div', { read: ElementRef });
  constructor() {
    effect(() =>
      console.log(
        'offsetWidth effect ' + this._element()?.nativeElement.offsetWidth
      )
    );
    setTimeout(
      () =>
        console.log(
          'offsetWidth timeout ' + this._element()?.nativeElement.offsetWidth
        ),
      100
    );
  }
}

If I run ng serve with hmr enabled: ng serve --hmr=true I get incorrect offsetWidth due to styles not being applied yet. If I run ng serve with hmr disabled: ng serve --hmr=false I get correct result.

Minimal Reproduction

Create new application
Paste code from above

Exception or Error

Your Environment

Angular CLI: 19.0.0
Node: 18.20.4
Package Manager: npm 10.7.0
OS: win32 x64

Angular: 19.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1900.0
@angular-devkit/build-angular   19.0.0
@angular-devkit/core            19.0.0
@angular-devkit/schematics      19.0.0
@schematics/angular             19.0.0
rxjs                            7.8.1
typescript                      5.6.3
zone.js                         0.15.0

Anything else relevant?