Currently, I am working on an Angular 7 project that involves a route matcher function. My goal is to make an API call to retrieve an array and then check if that array contains a specific URL slug.
My Attempts So Far: I attempted to call the API using APP_INITIALIZER and store the data in localStorage. However, I encountered issues with Angular Universal not supporting localStorage, and I was unable to inject services like CookieService or HttpClient into a function outside of a TypeScript class. I also experimented with an Angular guard, but I'm unsure of how to gracefully move to the next object in the routes config array when the URL is not found in the categories array.
Current Implementation:
export function DealsMatcher(url: UrlSegment[]): UrlMatchResult {
if (url.length === 0) {
return null;
}
let categories: HeaderCategoriesModel[];
// TODO: need to get categories from API
const param = url[0].toString();
const index = categories.findIndex(category => {
return category.title_translit === param;
});
if (index !== -1) {
return ({consumed: url, posParams: {slug: url[0]}});
}
return null;
}
const routes: Routes = [
{
path: ':slug',
matcher: DealsMatcher,
component: DealsComponent,
},
{
path: ':slug',
matcher: DealsDetailMatcher,
component: DealsDetailComponent,
resolve: {
deal: DealsDetailResolve
}
}
]
I am currently exploring ways to inject services into the DealsMatcher function or make an AJAX request without dependency injection. Additionally, I am seeking a solution to skip to the next route in case of a failed URL check using an Angular guard.