After conducting further research (this time on Reddit), I was able to find the information I needed. Here is the article that helped me (you can skip everything before
Making the Side Menu adjust to the current Url
but read after). Please note that the answers provided may not be entirely accurate, as they were obtained through experimentation.
How does a child module add its routing configurations to the root configurations? Does lazy loading have any impact on this process? Is it simply appended to the object like so?:
[
// children module routes
{
path: 'dashboard', component: DashboardComponent, children: [
{ path: 'competitions', component: CompetitionsListComponent},
{ path: '', component: DashboardNavComponent, outlet: 'sidebar'},
{ path: 'create', component: CreateComponent, outlet: 'details'},
]
},
{ path: '', pathMatch: 'full', redirectTo: 'dashboard'}
...other children module routes...
// root module routes
{path: '**', component: NotFoundComponent},
];
Yes, it functions as described where children routes are added at the beginning of the root config array. Lazy loading does not affect this process; it simply loads a module in the specified route. How did I verify this? I included Router as a dependency in one of my components and upon a button click, I logged the config variable of the Router instance.
Why doesn't NotFoundComponent work in certain cases (when errors occur)? Shouldn't it cover every path, or do auxiliary routes need to follow a specific pattern for each outlet like this:
{path: '**', component: NotFoundComponent, outlet: 'sidebar'}
{path: '**', component: NotFoundComponent, outlet: 'details'}
Regarding this issue, in my scenario with the URL path
localhost:4200/dashboard/competitions(details:create)
, this method works and prevents the error from being thrown when you specify the pattern on the same level as the auxiliary component rather than in the root. However, if I change the segment to the correct one with an incorrect auxiliary path (referencing the last point) such as
localhost:4200/dashboard/(competitions//wrong:aux-path)
, then one primary pattern in the root handles this situation. Any clarification on this matter would be highly appreciated.
How does an auxiliary route determine which named outlet to use? Does it search for the first parent with the appropriate outlet and if not found, throw an error (excluding the case from the previous point)?
Based on my understanding, No, it functions similarly to regular (primary) routes by using the parent above to identify suitable outlets. If it cannot find a suitable outlet in the direct parent, the content is not rendered. More detailed explanations can be found in the following point.
Lastly, why isn't localhost:4200/dashboard/competitions(details:create) resolving to DashboardComponent with CreateComponent inside? Do I need to specify the URL for auxiliary routes differently? Specifically, how are auxiliary paths resolved when they are children of other non-auxiliary route components?
From the previously referenced article, the explanation I gathered is as follows:
What does a multiple outlet URL look like?
By triggering the programmatic navigation call above, the browser will display the following URL: /courses/(development//sidemenu:development)
This URL signifies:
- the courses URL segment is active
- inside it, the primary route is set to /courses/development
- the auxiliary child route 'development' is active for the outlet sidemenu
Therefore, in my case, I should utilize localhost:4200/dashboard(competitions//details:create)
where:
/dashboard - active segment(competitions//details:create) - multiple outlets for the segment separated by //competitions - primary outlet routedetails:create - auxiliary outlet route