Angular Routing - Nested router outlets (One main + two named outlets) - Error on navigating to third router-outlet

Question

I have a problem regarding nested router-outlets. I have three router-outlets, where two are named.

The second router-outlet is nested inside the main router-outlet. The third router-outlet is nested inside the second router-outlet.

All router-outlets are seperated through different modules. However, when I try to navigate to activate the third router-outlet, I always get an error that the route does not exist.

I have created an example on stackblitz: Example link

The second router-outlet works just fine, as you can see with the "Overview" route. The problem occurs with the "Command Options" route. The initial route works fine, but then when you click "Permissions" an error will show.

Answer 1

Actually you don't need named router outlets in this case. you can achieve this without named router outlets. You can refer to

https://medium.com/@aakashgarg19/the-art-of-nested-router-outlets-in-angular-dafb38245a30

for understanding nested routing without named router outlets.

If you still want to go for named outlets use router.navigate statement like this :-

this.router.navigate(["app",{ outlets: {server: ["commandOptions", {outlets: {"commandOptions": ["permissions"] }}]}}]);