import { AfterContentInit , Component , ElementRef , OnInit , ViewChild , ViewContainerRef } from '@angular/core' ; import { ActivatedRoute } from '@angular/router' ; import { registry } from '../registry' ; @ Component ( { template : '<div #vc></div>' , } ) export class WrapperComponent implements AfterContentInit { @ ViewChild ( 'vc' , { read : ElementRef , static : true } ) vc : ElementRef ; constructor ( private route ) { } ngAfterContentInit ( ) { const elementName = this . route . snapshot . data [ 'elementName' ] ; const importName = this . route . snapshot . data [ 'importName' ] ; const importFn = registry [ importName ] ; importFn ( ) . then ( _ => console . debug ( `element ${ elementName } loaded!` ) ) . catch ( err => console . error ( `error loading ${ elementName }:` , err ) ) ; const element = document . createElement ( elementName ) ; this . vc . nativeElement . appendChild ( element ) ; } }