<p dir="auto">I have a router definition like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const routes: Routes = [
{
    &quot;path&quot;: &quot;member&quot;,
    &quot;loadChildren&quot;: &quot;app/member/member.module#MemberModule&quot;
},
{
    &quot;path&quot;: &quot;&quot;,
    &quot;loadChildren&quot;: &quot;app/video/video.module#VideoModule&quot;
},
{
    &quot;path&quot;: &quot;**&quot;,
    &quot;redirectTo&quot;: &quot;&quot;
}
]"><pre class="notranslate"><code class="notranslate">const routes: Routes = [
{
    "path": "member",
    "loadChildren": "app/member/member.module#MemberModule"
},
{
    "path": "",
    "loadChildren": "app/video/video.module#VideoModule"
},
{
    "path": "**",
    "redirectTo": ""
}
]
</code></pre></div>
<p dir="auto">MemberRouter definition like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const routes: Routes = [
{
    &quot;path&quot;: &quot;order&quot;,
    &quot;component&quot;: MemberComponent,
    &quot;loadChildren&quot;: &quot;app/member/order/order.module#OrderModule&quot;
},
{
    &quot;path&quot;: &quot;&quot;,
    &quot;component&quot;: MemberComponent,
    &quot;loadChildren&quot;: &quot;app/member/index/index.module#IndexModule&quot;
}
]"><pre class="notranslate"><code class="notranslate">const routes: Routes = [
{
    "path": "order",
    "component": MemberComponent,
    "loadChildren": "app/member/order/order.module#OrderModule"
},
{
    "path": "",
    "component": MemberComponent,
    "loadChildren": "app/member/index/index.module#IndexModule"
}
]
</code></pre></div>
<p dir="auto">OrderRouter definition like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const routes: Routes = [
{
    &quot;path&quot;: &quot;list&quot;,
    &quot;outlet&quot;: &quot;member&quot;,
    &quot;component&quot;: OrderComponent,
    &quot;loadChildren&quot;: &quot;app/member/order/list/list.module#ListModule&quot;
},
{
    &quot;path&quot;: &quot;&quot;,
    &quot;outlet&quot;: &quot;member&quot;,
    &quot;component&quot;: OrderComponent
}
]`

ListRouter definition like this:
`const routes: Routes = [
{
    &quot;path&quot;: &quot;&quot;,
    &quot;outlet&quot;: &quot;order&quot;,
    &quot;component&quot;: ListComponent
}
]"><pre class="notranslate"><code class="notranslate">const routes: Routes = [
{
    "path": "list",
    "outlet": "member",
    "component": OrderComponent,
    "loadChildren": "app/member/order/list/list.module#ListModule"
},
{
    "path": "",
    "outlet": "member",
    "component": OrderComponent
}
]`

ListRouter definition like this:
`const routes: Routes = [
{
    "path": "",
    "outlet": "order",
    "component": ListComponent
}
]
</code></pre></div>
<p dir="auto">It dose not work at "/member/order/list"</p>
<p dir="auto">It is working at "/member/order"</p>
<p dir="auto">"OrderRouter" rules can not be matched when "MemberRouter" is lazy loaded</p>
<p dir="auto">"loadChildren" dose not work when nested</p>
<p dir="auto">Please help me solve, thank you!</p>
<p dir="auto"><a href="https://embed.plnkr.co/r0ofl7keNwlSvcU7sxdF/" rel="nofollow">Plunker Demo</a> Click "product/detail/item" button dose no work.</p>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[ X ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[ X ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
MetaService, or any other service, doesn't support setting/adding <code class="notranslate">&lt;link rel="canonical" href="..."&gt;</code> tags.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Like the HEAD services that allow addition of <code class="notranslate">&lt;title&gt;</code> and <code class="notranslate">&lt;meta&gt;</code> tags, adding <code class="notranslate">&lt;link&gt;</code> tags should be supported as well.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
N/A</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
In the universal/server context, it is often useful to be able to set a rel="canonical" link element to prevent search engines from duplicating results. See <a href="https://en.wikipedia.org/wiki/Canonical_link_element" rel="nofollow">Canonical Link Element</a> for more details.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
4.0.1</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong><br>
All</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
All</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =<br>
N/A</p>
</li>
</ul>