Angular 2 - Submodule routing and nested <router-outlet> : <p>I'm looking for a solution with Angular 2 for the scenario explained below:</p>

<p><a href="https://i.stack.imgur.com/JOXsO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JOXsO.png" alt="enter image description here"></a></p>

<p>In this scenario, the top-nav contains links to load submodules and sub-nav has links to update the submodule's contents.</p>

<p>The URLs should map as:</p>

<ul>
<li>/home => loads the home page in main component router outlet</li>
<li>/submodule => loads the submodule in the main component router outlet and by default should show the submodule's home page and sub navbar</li>
<li>/submodule/feature => loads the feature inside the submodule's router outlet</li>
</ul>

<p>The app module (and app component) contains a top navbar to navigate to different submodules and the app component template could look like this</p>

<pre><code>&lt;top-navbar&gt;&lt;/top-navbar&gt;
&lt;router-outlet&gt;&lt;/router-outlet&gt;
</code></pre>

<p>But here is the complexity. I need my submodules to have similar layout with a second level nav bar and their own router outlet to load their own components. </p>

<pre><code>&lt;sub-navbar&gt;&lt;/sub-navbar&gt;
&lt;router-outlet name='sub'&gt;&lt;/router-outlet&gt;
</code></pre>

<p>I tried every options and search everywhere but couldn't find a solution to have a default template (like app component) in the sub-module with router outlet and also load the contents of submodule in the inner router outlet without losing the sub-nav.</p>

<p>I would appreciate any input or ideas</p>
