5

I have the following route.

http: // localhost: 4100 / example / 5b8c94cfc5f85728db8bddf2 / 5bb426434722020c569fc5d8 / (p1: .... // p2: .... // p3: ...)

I have 3 secondary routes , I have a problem, when I do the following

this.router.navigate ([<any path>], {relativeTo: this.route})

, I sail in the main outlet, however the secondary outlets p1, p2, p3 are not preserved

Is there something equal to preserveQueryParams? , of navigationExtras? https://angular.io/api/router/NavigationExtras but for secondary routes?

5
  • Is this what you want? angular.io/api/common/http/HttpParams And if you want to make the secondary or third segment work correctly, you will need to configure it properly. e.g. path: 'example /:id'
    – wannadream
    Commented Oct 31, 2018 at 22:16
  • I do not understand ... what I want to preserve are the secondary routes. blog.angularindepth.com/…
    – Kevin AB
    Commented Nov 1, 2018 at 0:43
  • Okay, the author has attached an example: stackblitz.com/edit/secondary-segments-demo. Have you studies it yet?
    – wannadream
    Commented Nov 1, 2018 at 14:24
  • Have you found an answer? Because I am facing the same issue. :( Commented Jun 1, 2020 at 18:59
  • I modified the stackblitz to have two different primary routes, and strangely enough, everything works fine: stackblitz.com/edit/secondary-segments-demo-wpyjfg?file=src/app/… Activate Chat auxiliary route, and try switching between Home and Home 2 routes: secondary outlet is preserved. For some reason it doesn't work this way in my project, maybe because of the nested routes from lazy-loaded modules...
    – Alex Grin
    Commented Nov 30, 2021 at 19:52

2 Answers 2

2

I was also facing the same problem. Unfortunately at this time there (still) doesn't seem to be an out-of-the-box solution for this.

I ended up with a little bit of a hacky work around: get the secondary (auxiliary) routes from the url, and add them to the navigate function.


I only had one secondary route called popup, so I created a regex to get the path for the popup router outlet: const POPUP_ROUTE_FROM_URL_REGEX = /\(popup:([^)]+)\)/.

Then I got the path from the url : const popupRouteResult= POPUP_ROUTE_FROM_URL_REGEX.exec(this.router.url). (this.router is injected in the constructor: private router: Router.) The exec function returns an array where the first item is the full match of the regex (so "(popup:<path...> in this case) and after that the substring matches (so in this case it's only one: "<path...>). so the path of the popup route is in popupRouteResult[1].

In the navigate function you can use it like this:

this.router.navigate(
    [
        <some path>,
        {
            outlets: {
            // the line below ensures that the (possibly present) popup route is preserved when navigating
                ...(!!popupRouteResult&& { popup: popupRouteResult[1] }),
            },
        },
    ]                
);

If you have multiple secondary routes you can adapt the regex to get everything in between the parentheses:

const SECONDARY_ROUTES_FROM_URL_REGEX = /\(([^)]+)\)/;
const secondaryRoutesResult = SECONDARY_ROUTES_FROM_URL_REGEX .exec(this.router.url);

For the example in the question secondaryRoutesResult[1] will give you "p1: .... // p2: .... // p3: ...".

You can split this string on // to get each individual outlet path: const outlets = secondaryRoutesResult[1].split('//), which will result in: ["p1: .... ", " p2: .... ", " p3"]`. It's propably wise to check first if secondaryRoutesResult[1] exists.

Then you can loop over the outlets:

const outletsData = {outlets: {}};
outlets.forEach(outlet => {
   // split by : to get the name of the outlet and the path separated
   const splitOutlet = outlet.split(":");
   const name = splitOutlet[0];
   const path = splitOutlet[1];
   outletsData[name] = path
});

And you can use this data in your navigate function:

this.router.navigate([<some path>, outletsData]);

Hopefully this answer will help someone who stumbles onto the same problem! I hope to see an update in angular so this hack is no longer necessary and there is just a property you can use.

1
  • Seems like the issue is not in Angular, but somewhere in the project code. In normal conditions, auxiliary routes should not disappear on navigation. See my answer for details.
    – Alex Grin
    Commented Nov 30, 2021 at 22:05
0

Auxiliary routes should be retained when you navigate to a different primary route: that's their primary use-case. In this Stackblitz example, you can click on "Chat" link to activate a secondary (auxiliary) route. Then you can click on "Home" and "Home 2" to navigate to different primary routes: it doesn't affect the secondary "chat" route, because it's meant to be independent. Everything works fine in Angular 6+.

If you see that your secondary routes are reset, it's likely a result of some other navigation events interfering in the process. For example, when one navigation begins (with a secondary route unchanged), and then a new navigation event interrupts it, your first navigation might be canceled, and your secondary route might be lost.

So, to find the root cause and fix it, you need to debug your routing process. Here are some tips for debugging Angular Router.

#1: Turn on route tracing where you import your root RouterModule:

RouterModule.forRoot(routes, {
  enableTracing: true
})

Now when you run your app, you should see all navigation events in the console. Try navigating between primary routes with an auxiliary route enabled: you should see the exact moment at which your auxiliary route is lost (at first you see it in all navigation events' url field, and then you don't see it anymore).

#2: Add a debugger for that particular navigation event:

// in any component with a `Router` injected
this.router.events.subscribe((event) => {
  if (event instanceof  NavigationStart && event.url === "/url/without/secondary/route")
        debugger;
    })

In this example, the debugger will be activated when NavigationStart event is fired with url of your interest (the first one where your auxiliary route is absent). Or your could look for NavigationCancel event the same way.

How does it help? When debugger is activated in the right moment, most likely you can find what's causing this event by looking at the stack trace: scroll through the tons of RxJS and Angular functions, and at some point you should find that piece of code in your project which invoked that navigation event. Then you can remove it, or delay it in some ways.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.