Angular: Cookie not available in the first execution of APP_INITIALIZER function, component...

In my Angular v18 project with SSR enabled, I am trying to get hold of a cookie inside the APP_INITIALIZER function. I'm using ngx-cookie-service and set it up with their instructions for SSR.

The app.config.ts

export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({eventCoalescing: true}),
provideRouter(routes),
provideClientHydration(),
provideHttpClient(withFetch()),
{
provide: APP_INITIALIZER,
useFactory: () => {
const cookieService = inject(SsrCookieService);
const authService = inject(AuthService);

return () => new Promise((resolve, reject) => {
const isAuthenticated = cookieService.check("idToken");
console.log(isAuthenticated);

if (isAuthenticated) {
const idToken = cookieService.get("idToken");
authService.setUserCredentials(idToken);
console.log(authService.getIsAuthenticated());

}

resolve(true);
});
},
multi: true,
}
]
};


In nav-bar.component.ts

private authService = inject(AuthService);
isAuthenticated = this.authService.getIsAuthenticated();


And in the nav-bar.component.ts template

@if (!isAuthenticated) {
<button routerLink="login">Login</button>
} @else {
<button routerLink="profile">My Account</button>
}


The result is that in the IDE terminal, the console log in app.config.ts is false, then in the browser console it's true. This causes the first render of the navigation bar to show Login and then immediately re-render and show My Account.

The <app-nav> is in the AppComponent

<app-nav/>
<router-outlet/>
<app-footer/>


I've tried injecting the DOCUMENT and calling document.cookie, but the page loads with the NotYetImplemented error.

I've also tried with a BaseComponent on / route and a Resolve on it and passing a boolean as a required input to <app-nav/>, but the effect is the same: Login on first render and My Account on second.

I am a bit confused as to what's happening and not sure what knowledge I am missing to be able to achieve the value public isAuthenticated: boolean = false; in AuthService to be true before the app's first render.

Any help is appreciated, thank you!

Continue reading...