"At least one route resolver didn't emit any value" Navigation error on parent route resolver...

I have an inconsistent navigation issue when authenticating on my website. On authentication from the login page, there is a navigation to the home page (auth only).

On occasion, the navigation fail, and I stay on the login page (though I am already logged in). Any other navigation attempt (from the navbar that appear when logged in) will also fail in that scenario. Refreshing the page fix the issue.

I first thought the problem was with the guards I use :

• unauthGuard for the login pages
• authGuard for the rest of the pages

But testing showed that they were operating perfectly : when trying to redirect, the resolver detect authent and returns true.

I noticed then that there was a problem with a resolver : API calls in the resolver were not send.

Activating navigation logs raised this issue : NavigationCancel {reason: "At least one route resolver didn't emit any value."}

My routes look like that :

{
path: 'login',
canActivateChild: [noAuthGuard()],
children: [
{
path: '',
loadComponent: () => import('@pages/authentication/login/login.component')
},
{
path: 'confirmation',
loadComponent: () => import('@pages/authentication/login-confirmation/login-confirmation.component')
}
]
},
{
path: '',
canActivateChild: [authGuard()],
resolve: {
init: referentialDataInitResolver
},
children: [
{
path: '',
redirectTo: '/distributors',
pathMatch: 'full'
},
{
path: 'distributors',
loadComponent: () => import('@pages/distributors/page-distributors-list/page-distributors-list.component')
},
...
]
}


The routes are categorised in two "groups", unauth and auth pages. all pages are defined as children of one of the two groups (no parent page) referentialDataInitResolver purpose is to init Data for the whole site, but authent is needed to call it.

The issue is with this resolver, referentialDataInitResolver. Resolver code:

export const referentialDataInitResolver: ResolveFn<boolean> = () =>
inject(ReferentialService).initReferentialData().pipe(map(() => true));


map => true, because the result isn't to be used, the idea is just to init data in the ReferencialService. It used to be map => undefined, but I suspected it could be the cause of the issue.

initReferentialData(): Observable<readonly unknown[]> {
return forkJoin([
this.getSuppliers$(),
this.getCurrencies$(),
this.getPriceLists$()
]);
}

// get all known suppliers
private getSuppliers$(): Observable<SupplierApiModel[]> {
if (!this.suppliers$) {
this.suppliers$ = this.suppliersApi.getAllSuppliers().pipe(
shareReplay(1),
tap((suppliers: SupplierApiModel[]) => this.suppliers = suppliers)
);
}
return this.suppliers$;
}

...


this is basically a forkjoin of 3 HTTP GET. the rest is just saving the data (via shareReplay on the GET observable, and via this.suppliers property)

I don't think there is a problem with the resolver itself, so my guess is that there is a problem with how the Routes file is constructed. Is it possible ? What could explain the resolver not triggering at all, and this error "At least one route resolver didn't emit any value." raising ?

Continue reading...