Components inside a nested router-outlet are recreated when navigating

[vakrilov]

The Scenario

We have a following app scenario:

• The app has root navigation using <page-router-outlet>
• On one of the pages (let's name it "main") there is a nested navigation using the stock angular <router-outlet>. Navigating the nested router outlet is usually controlled with RadSideDrawer.

There are sample implementations described in #343 and in this gist by @NathanWalker

The Problem

When navigating form "main" page to another page(let's name it "detail") and then back again, the content of the nested <router-outlet> inside the main page is loaded after the page animation is finished:

There are two different issues at hand:

1. The component that was previously shown inside the <rotuer-outlet> is re-created and not reused.
2. The actual instantiation of the component happens after the page animations has finished. This is triggered in the <page-router-outlet> implementation and happens in page.navigatedFrom event. Which means the "main" page is empty during the animation and the content is loaded after the navigations has finished.

Additional Information

The reason why page.navigatED From event is used instead page.navigatING From is that in IOS you can start a back navigation using swipe gesture, but cancel it in the middle:

If we trigger the angular back navigation on the page.naivgatING event, angular will remove
the components form the current page and instantiate the component on the page you are navigation to. However, if you then cancel the animation you will end up with a page that has been cleared and corrupted navigations stack.

[manojdcoder]

@vakrilov Do you think it is possible to disable the router-outlet from listening for changes in url and enable back when detail page is closed.

[vakrilov]

@manojdcoder Good thinking!
However, the router-outlet is more "passive" - it does not subscribe or listens for events. It just implements a bunch of methods that the router calls when needed. I'm not aware of any APIs that will allow you to freeze and unfreeze the content of the state of the outlet.

The closes thing is the RouteReuseStrategy feature in angular, but it is poorly documented and the best resource I found about it is this SO thread.

[manojdcoder]

@vakrilov Any idea about focusing on this issue during v3.2 release, along with other improvements on Angular layer.

[vakrilov]

We still haven't done any planning for 3.2.

For 3.1(mid-late June) we are focusing mainly on more high priority bugs, so we won't be able to work on this.

[triniwiz]

@vakrilov any updates on this ?

[Jcook894]

Is there anymore information on this issue? I am having the exact problem

[vakrilov]

We have released [email protected] yesterday with some major improvements in how page-router-outlet works. This issue should be fixed with this version.