When I apply
decodeURIComponent('concepts%2Fdemand%2Flead-time-demand')
to your URI parameter, originally intended to be an
:id, it translates to
concepts/demand/lead-time-demand;
This confuses the angular router as it looks for a nested route like:
http://localhost:4200/topic/concepts/demand/lead-time-demand
Since this route does not exist, the application defaults back to the base URL.
REVISION FROM THE AUTHOR OF THE QUESTION
I unintentionally coded an Action that combined various Observable events, including one that signals when the Topic store loading is finished.
This action permitted users to choose a topic category (Concepts, Formulas, Guides, etc.) and upon selection, it would lead to a navigation to '' which is where the selected slice is displayed.
If a URL matching the route was pasted into the browser, triggering a reload of the application, it caused the this.s.loadingTopicStore$ event to activate, resulting in the router navigating to ''.
For those curious, here is the structure of the action:
/**
* Note that we're always rendering only
* `searchedTopics$`, but we also keep track
* of `selectedTopics$` because we search
* within this subset when it's selected.
*
* This resets the `topicStore.query`.
*/
onSelectTopicCategory() {
merge(
this.s.loadingTopicStore$,
this.s.activeTopicCategory$).
pipe(untilDestroyed(this)).subscribe(() => {
this.s.selectedTopics$ = combineLatest(
this.s.all$,
this.s.guides$,
this.s.blogs$,
this.s.concepts$,
this.s.formulas$,
this.s.tasks$,
this.s.activeTopicCategory$,
this.s.loadingTopicStore$,
this.onSelectTopicCategoryFunction)
this.s.searchedTopics$ = this.s.selectedTopics$
this.s.topicStore.query = ''
// We have to subscribe to this otherwise
// The combine latest function will never fire.
// Since we are only using searchedTopics in the view,
// we need to manually trigger selectedTopics$.
this.s.selectedTopics$.
pipe(untilDestroyed(this)).
subscribe()
})
}
And the function triggered by the merge:
/**
* Monitor the active topic category.
*
* It navigates to '' upon selecting a category
* to display the selections.
*/
onSelectTopicCategoryFunction(
all,
guides,
blogs,
concepts,
formulas,
tasks,
active,
loading) {
if (loading == false) {
// this.router.navigate([''])
switch (active) {
case TopicCategories.ALL:
return all
case TopicCategories.GUIDES:
return guides
case TopicCategories.BLOGS:
return blogs
case TopicCategories.CONCEPTS:
return concepts
case TopicCategories.FORMULAS:
return formulas
case TopicCategories.TASKS:
return tasks
default:
return all
}
} else return []
}
This implementation includes the @fireflysemantics/slice library:
https://www.npmjs.com/package/@fireflysemantics/slice