angular - transclude parent div into child div through router-outlet -

we have situation third-party plug takes time reload - , it's used on one, nested child route. currently, reloads plug every time go said route, annoying. i'd load once in parent component on startup , transclude child when child component instantiated. i've tried no avail. here's simple version of hoped work

https://plnkr.co/edit/qg7vggyltx6qt5p4q3aa?p=preview

router-outlet , ng-content aren't best of friends, i'm hunting suggestions. thanks!

not sure why i'm supposed attach code, here's of it:

@component({   selector: 'my-app',   template: `<h1>top</h1>   <router-outlet>     <div>i should live in middle of child</div>   </router-outlet>   <h1>bottom</h1>`,   directives: [router_directives] }) export class myappcomponent {   constructor () {   } }  @component({     selector: 'child',     directives: [router_directives],     template: `     <h2>child component top</h2>     <ng-content></ng-content>     <h2>child component bottom</h2>     ` })