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

@Component({
  selector: 'my-cmp'
})
@View({
  directives: [CORE_DIRECTIVES],
  template: `
<div>
    <div *ng-for="#i of values">{{i}}</div>
</div>
`
})
class MyCmp {
  constructor() {
    this.values = [1, 2, 3]
  }
}

@Component({
  selector: 'my-app'
})
@View({
  directives: [MyCmp],
  template: `
<div>static:<my-cmp></my-cmp><div>
<button (click)="load()">Load</button>
`
})
class MyApp {
  constructor(elementRef: ElementRef, loader: DynamicComponentLoader) {
    this.elementRef = elementRef;
    this.loader = loader;
  }

  load() {
    this.loader.loadNextToLocation(MyCmp, this.elementRef).then((ref) => {
      document.querySelector("body").appendChild(ref.location.nativeElement);
    });
  }
}

bootstrap(MyApp);

EXCEPTION: No provider for function (factories) {! (function (viewContainer, templateRef, iterableDiffers, cdr) { -> function (factories) {)