After upgrading to RC2, links under defer blocks with control statement e.g. @if takes 2 clicks to navigate #58690
Description
Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
Yes
Description
After upgrading to RC2, links under defer blocks with control statement e.g. @if now takes 2 clicks to navigate
For the below code its now taking two clicks for the actual navigation to complete.
The first click hydrates this code and removes ngb="d9" attribute from the anchor tag and then clicking it again actully takes the user to the next page.
@defer(on idle; hydrate on interaction) {
<div class="mat-chip-list layout-row layout-wrap layoutalign-center-center pl10 pr10 mb20">
@for (item of topCities(); track item.name; let index = $index) {
<a [routerLink]="['/jobs/',urlCountry(),item.url]" class="mat-chip">Jobs in {{item.name}}</a>
}
@if (telecommute()) {
<a [routerLink]="['/jobs/',urlCountry(),'online']" class="mat-chip">Online Jobs</a>
}
<a [routerLink]="['/jobs/',urlCountry()]" title="Jobs in {{country()}}" class="mat-chip">Jobs in {{_gs.country()}}</a>
</div>
}
On the otherhand the below code seems to be working as expected:
@defer(on idle; prefetch on immediate; hydrate on interaction) {
<div class="text-center mt30 mb30 pt5 pb5">
<a ripple [routerLink]="isBrowser() ? null : '/account/register'" (click)="login('/account/dashboard')" rel="nofollow" class="signup-button">Start Your Job Search – Join Now!</a>
</div>
}
You can try this on the reproduction repo I shared below.
- Clone the repo
- Run
ng serve - Click any link from the top nav and you will notice that the first click hydrates the component and then the second click actully take you to the next page
If you remove the if condition (https://github.com/naveedahmed1/incremental-hydration-demo/blob/54f41384ec5aa01e70ab2127f1b83015580185d1/src/app/app.component.html#L5) it will work just fine.
Please provide a link to a minimal reproduction of the bug
https://github.com/naveedahmed1/incremental-hydration-demo
Please provide the exception or error you saw
Links under defer blocks with control statement e.g. @if takes 2 clicks to navigate
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 19.0.0-rc.2
Node: 20.12.2
Package Manager: npm 10.6.0
OS: win32 x64
Angular: 19.0.0-rc.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, ssr
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1900.0-rc.2
@angular-devkit/build-angular 19.0.0-rc.2
@angular-devkit/core 19.0.0-rc.2
@angular-devkit/schematics 19.0.0-rc.2
@schematics/angular 19.0.0-rc.2
rxjs 7.8.1
typescript 5.6.3
zone.js 0.15.0
Anything else?
No response