I'm facing strange behavior when using angular V16 and the new resolveFN.
If I call the page directly from the browser (entering "localhost:4200/customer/123" for example), the resolver is executed BEFORE the APP_INITIALIZER have finished loading and so generate an error in my resolver because everything are not all load.
Any clues on that strange behavior?
Provider :
{
provide: APP_INITIALIZER,
useFactory: (
injector: Injector) => {
return () => {
const dbService = injector.get(DbService);
return dbService.initialize();
};
},
deps: [Injector],
multi: true
}
Resolver :
export const CustomerResolver: ResolveFn<ICustomer> =
(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot,
customersService = inject(CustomersService),
errorsService = inject(ErrorsService),
) => {
let etag: string | null | undefined = "";
const customer_Id = route.paramMap.get('customer_Id');
if (customer_Id) {
return customersService.getById(customer_Id)
.pipe(
takeLast(1),
catchError(errorsService.catch),
);
}
return EMPTY;
}
Edit 1
For example you can test with a DbService like this one :
export class DbService {
public initialize(): Observable<boolean> {
console.log(`Start ServiceDb`);
const init = new Subject<boolean>();
setTimeout(() => {
init.next(true);
init.complete();
console.log(`End ServiceDb`);
}, 500);
return init;
}
}
And a Resolver like this one :
export const CustomerResolver: ResolveFn<ICustomer> =
(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
) => {
const customer_Id = route.paramMap.get('customer_Id');
console.log('customer resolver');
return EMPTY;
}
You will see in the console :
Start ServiceDb
customer resolver
End ServiceDb
It's like the resolver didn't wait for the init end