Angular 10 auxiliary router outlet not working when placed in lazy loaded module

Question

I have a problem with second router outlet when it's created in lazy-loaded module.

I started with this example where auxiliary routes https://stackblitz.com/edit/angular-nested-auxiliary-routes-irixxy work correctly.

My app is a bit more complicated and I use lazy loaded modules. In the new module, I wanted to use a second router outlet to dynamically show components. But I found out there is a problem with auxiliary routes when they are added in another module than the app module.

To check if the problem is in my app's routing I've created an example https://stackblitz.com/edit/angular-nested-auxiliary-routes-bpuswu which is similar to the base example but with added lazy-loaded module where routing (primary and secondary) is configured. Problem is that links with the secondary outlet path are not working giving the error Cannot match any routes. URL Segment: 'level-0'. Created invalid links are like [...]/level-0/(level-1//outlet1:aux-1). The same problem was in my app project.

Anyone has a similar problem and know how to fix it? Is there something wrong with my routine? Or is it a bug in the router?

Answer 1

I think your links are not correct:

Try this: <a [routerLink]="['/level-0/level-1', { outlets: { outlet1: 'aux-1' } }]">L1-A1 |

And also there should be an primary and auxilary in templates:

   <router-outlet></router-outlet>
<router-outlet name="outlet1"></router-outlet>`

Answer 2

The Problem

I managed to isolate the problem to the line

 outlet2: 'aux-3'

If we check the link created for <a [routerLink]="['/level-0', { outlets: { primary: ['level-1', { outlets: { primary: ['level-2', { outlets: { primary: ['level-3'], outlet2: 'aux-3' } }] } }], outlet1: 'aux-1' } }]">L1-A1/L2/L3-A3</a> we see that it produces

/level-0/(level-1/(level-2/(level-3//outlet2:a/u/x/-/3))//outlet1:aux-1)

It seems that aux-3 is converted to a/u/x/-/3. which is definitely not expected. It looks like the letters have been split and joint with /.

Solution/ Workaround

As stated earlier it seems an array was expected in the router outlet, so a simple solution is to pass an array instead

 outlet2: ['aux-3']

<a [routerLink]="['/level-0', { outlets: { primary: ['level-1', { outlets: { primary: ['level-2', { outlets: { primary: ['level-3'], outlet2: ['aux-3'] } }] } }], outlet1: ['aux-1'] } }]">L1-A1/L2/L3-A3</a>

Now the correct link is produced and the routes work correctly

Is there somethink wrong with my routing?

Your routes are working correctly. But as you may have noticed there is some inconsistency in the way the links are produced. I tried a simple router-link in This Stackblitz and it produces the same link.

<a [routerLink]="['/', { outlets: { outlet1: ['ab'] } }]">Link 1|</a> <br />
<a [routerLink]="['/', { outlets: { outlet1: 'ab' } }]">Link 2</a>

Below is the result of implementing the above

Working stackblitz demo

Auxilliary routes on Lazy loaded modules

A simple explanation to the problem you are facing is highlighted in this question Named router outlet and lazy loaded modules with a link provided in this answer https://stackoverflow.com/a/49367379/13680115 i.e auxilliary routes are not supported out of the box

Lazy load auxilary #10981

In the above post, In this comment the user highlights below

It seems that lazy load and auxiliary routes are not widely used together. We can see a lot of demos, separated but that's it. It's like no one uses it in a medium/large app 😮

In the same post there seems to be a workaround here

We create a nested route with a componentless parent route. I have implemented that in the demo below and it works for the 1st level lazy loaded module. For the next level the routes are properly matched with no errors but unfortunately the component is not loaded, I believe a solution is to simply move the one level to the parent component. This way, one level of the auxilliary routes is loaded in the parent module while the other in the lazy loaded module

Demo Stackblitz

Answer 3

Is it really important to have different routers? Can I ask what is the reason for that? I manage to get it work with one router. Can you check it?

Here is the updated example: https://stackblitz.com/edit/angular-nested-auxiliary-routes-w1tcn4?file=src/app/app.component.html