Angular2 do not load nested components

Question

These should be the simplest possible embedded components, but when I load this (via systemjs), all I see in the browser is “Counters”, and it’s <counter></counter>added to the DOM. There is no indication of "Hello Counter" or any component processing counter.

import angular from 'angular2/angular2';

var AppComponent = angular
  .Component({
    selector: 'my-app',
    template: '<h1>Counters</h1><counter></counter>'
  })
  .Class({
    constructor: function () { }
  });

angular
  .Component({
    selector: 'counter',
    template: '<h2>Hello counter</h2>'
  })
  .Class({
    constructor: function () {}
  });

angular.bootstrap(AppComponent);

Answer 1

You must specify all the directives that are used in your template in the directivesproperty View(or Component). See this plunker . The correct code is:

var Counter = angular
  .Component({
    selector: 'counter',
    template: '<h2>Hello counter</h2>'
  })
  .Class({
    constructor: function () {}
  });

var AppComponent = angular
  .Component({
    selector: 'my-app',
    directives: [Counter], // <-- Here we are!
    template: '<h1>Counters</h1><counter></counter>'
  })
  .Class({
    constructor: function () { }
  });

angular.bootstrap(AppComponent);