router-outlet used in Modal page navigation causing problem

[liuwei108]

Make sure to check the existing issues in this repository

If there is no issue for your problem, tell us about it

The doc introduced how to create Modal Dialog Navigation. I followed it to create:
modal page's main component and two inner modal page. It works.
However, If i change the
<page-router-outlet></page-router-outlet>
in modal page's main component to

<StackLayout>
    <router-outlet></router-outlet>
</StackLayout>

werid issue appears then:

In android, if I open the modal second time, an error occur and I click navigate to second inner modal page:

ERROR Error: Uncaught (in promise): Error: Cannot activate an already activated outlet
JS: Error: Cannot activate an already activated outlet
JS:     at RouterOutlet.activateWith 

In iOS, not such error occur, but if I open modal second time, the 2 inner modal page content shows in 1 page.

Which platform(s) does your issue occur on?

• iOS/Android/Both

Please, tell us how to recreate the issue in as much detail as possible.

I created a demo in playground
Note the modal.component.html content is:

<StackLayout>
	<router-outlet></router-outlet>
</StackLayout>

That is the one to cause the problem. in a non-modal situation, changing root <page-router-outlet></page-router-outlet> to

<StackLayout>
    <router-outlet></router-outlet>
</StackLayout>

doesn't cause such problem.

[NickIliev]

@liuwei108 you are right - currently, only page-router-outlet is supported for navigation within modal pages. Using router-outlet is not supported at this moment. Here you can find a number of scenarios that are supported at this very moment for modal navigation. We are currently investigating the possibility to enable opening a modal from a modal without navigation but at this moment the navigation option is supported only via page-router-outlet.

Why do you explicitly need router-outlet instead of page-router-outlet for the modal navigation?

[liuwei108]

Hi Nick,

Because I want to avoid caching angular components and memory leak. and keeps the mobile version codes as much reusable as possible in web version. if the subscriptions can't be unsubscribed when navigate forward, it can cause many confusion in my app. considering I need write many extra code to take care of these, I'd prefer to using router-outlet.
I thought an workaround that use a empty container component with page-router-outlet, and route to an inner component with router-outlet. It looks works fine now.

Thanks!