Closed
Description
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
I don't know
Description
I have the following component template for a sign-in page
- if the user is signed in, we show some user info
- else we show the login form
- we also have some content inside the
@elseblock for diagnostic purposes- "user with div" - text inside an html tag
- "user without div" - text existing without an html tag
- this is a zoneless app
- change detection strategy was onPush
<div class="rounded-md bg-white shadow shadow-z1 p-4 px-8">
@if (user$(); as user) {
<fa-icon [icon]="icons.faCheckCircle" class="mx-auto text-xl text-emerald-400"></fa-icon>
<div class="text-center text-sm">
<p class="mt-4">Signed in as</p>
<p class="mt-2">{{user.displayName}}</p>
<p class="text-gray-500">{{user.email}}</p>
</div>
<button class="mt-8 mx-auto text-sm stroked-button" mat-ripple
(click)="signOut()">
Sign Out
</button>
}
@else {
<div>
user (with div)
</div>
user (without div)
<!-- <form> login form </form>-->
}
</div>On the server side, user is always null, because we do not pass authentication headers to the ssr server.
Therefore, the html from ssr includes the login form
However, it is possible for a user to be detected in the browser (localstorage/cookies/indexeddb/firebase/etc).
In that scenario, the user$ signal is populated, and user info is to be shown, while the login form is to be hidden.
However, the rendered html looks like this
Points to note:
- ✔️ the user info was shown
- ✔️ the "user without div" part was hidden
- ❌ the "user with div part was not hidden
- ❌ the login form was not hidden
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 18.1.1
Node: 20.16.0
Package Manager: pnpm 9.4.0
OS: linux x64
Angular: 18.1.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, material-luxon-adapter
... platform-browser, platform-browser-dynamic, platform-server
... router, ssr
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1702.2
@angular-devkit/build-angular 18.1.1
@angular-devkit/core 18.1.1
@angular-devkit/schematics 18.1.1
@schematics/angular 18.1.1
ng-packagr 18.1.0
rxjs 7.8.1
typescript 5.5.3
Anything else?
This is similar to #54201