angular2 dynamic component loading

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular2 playground</title>
</head>

<body>
    <app></app>
</body> 

<!-- ES6-related imports -->
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
 
<script>
    //configure system loader
    System.config({
        //defaultJSExtensions: true,
        transpiler: 'typescript',
        typescriptOptions: {
          emitDecoratorMetadata: true
        },
        map: {
          typescript: 'https://cdn.rawgit.com/robwormald/9883afae87bffa2f4e00/raw/8bca570a696c47a4f8dd03a52c98734676e94cea/typescript.js',
        }
    });
</script>
<!-- Angular2 import -->
<script src="http://code.angularjs.org/2.0.0-alpha.35/angular2.js"></script>
<script src="http://code.angularjs.org/2.0.0-alpha.35/router.dev.js"></script>

<script>
    //bootstrap the Angular2 application
    System.import('./app.ts').catch(console.log.bind(console));
</script>

</html>

{
  "stage": 1,
  "modules": "system"  
}

import {
  Component,
  View,
  bootstrap,
  CORE_DIRECTIVES,
  ElementRef,
  DynamicComponentLoader,
  LifecycleEvent,
  Attribute
  
} from 'angular2/angular2';

class MyComponentLoader {
  loadComponentConfig(url){
    return fetch(url)
      .then(res => res.json())
      .then(componentList => 
        Promise.all(componentList.map(config => 
          this.loadComponent(config))))
  }
  loadComponent(configObject){
    return System.import(configObject.path)
      .then(componentModule => 
        componentModule[configObject.component])
  }
}

@Component({
    selector: 'widget-container',
    bindings: [MyComponentLoader]
})
@View({
    template: `<div #content></div>`,
    directives: [CORE_DIRECTIVES]
})
export class WidgetContainer {
    constructor(
      myLoader: MyComponentLoader,
      loader: DynamicComponentLoader,
      elementRef:ElementRef,
      @Attribute('src') configPath) {
        myLoader.loadComponentConfig(configPath)
          .then(components => 
            Promise.all(components.map(comp => 
              loader.loadIntoLocation(comp,elementRef,'content'))));
    }
}

import {Component, View} from 'angular2/angular2';

@Component({
  selector: 'widget1'
})
@View({
  template: `<div>i'm widget 1</div>`
})
export class Widget1 {}

import {Component, View} from 'angular2/angular2';

@Component({
  selector: 'widget2'
})
@View({
  template: `<div>i'm widget 2</div>`
})
export class Widget2 {}

import {Component, View} from 'angular2/angular2';

@Component({
  selector: 'widget3'
})
@View({
  template: `<div>i'm widget 3</div>`
})
export class Widget3 {}

[
  {"component": "Widget1", "path": "./widget1.ts"},
  {"component": "Widget2", "path": "./widget2.ts"},
  {"component": "Widget3", "path": "./widget3.ts"}
]

import {bootstrap, Component, View} from 'angular2/angular2'
import {WidgetContainer} from './widgetContainer.ts'

@Component({
  selector: 'app'
})
@View({
  template: '<widget-container src="./config.json"></widget-container>',
  directives: [WidgetContainer]
})
class App {}

bootstrap(App)