Angular - provideAppInitializer and authGuard: screen flickers before redirection

I have an Angular app that has the following guard:

import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { Store } from '@ngrx/store';
import { map } from 'rxjs';

import { AppState } from '../../../shared/store/app.state';

import { selectFreelancer } from '../../../shared/store/freelancer/freelancer.selectors';

export const unauthGuard: CanActivateFn = (route, state) => {
const store = inject(Store<AppState>);
const router = inject(Router);

return store.select(selectFreelancer).pipe(
map((freelancer) => {
if (freelancer === null) {
return true;
}

router.navigate(['/']);
return false;
}),
);
};


I also use provideAppInitializer in my app.config.ts as below:

provideAppInitializer(() => {
const store = inject(Store<AppState>);

store.dispatch(FreelancerActions.getFreelancer());

return firstValueFrom(
store.select(selectOnGetFreelancer).pipe(
filter((onGetFreelancer) =>
['success', 'error'].includes(onGetFreelancer),
),
take(1),
),
);
}),


It works almost properly. The issue I have is that when I navigate to a route that is disabled while the user is logged in (for example /auth/login), the page briefly appears before redirecting to /. Normally, it shouldn't show the page at all and we should be directly on the / route.

Continue reading...