A simple test app used to resolve an issue with having nested components

(function() {


  var helloComponenet = ng.core.Component({
      selector: 'hello-comp',
      template: '<h2> Hello Component </h2>'
    })
    .Class({
      constructor: function() {}
    });

  var myApp = ng.core.Component({
      selector: 'my-app',
      template: '<h1> Does Something </h1> <br>'+ '<hello-comp></hello-comp>'
    })
    .Class({
      constructor: function() {},
      directives: [helloComponenet]
    });


  document.addEventListener('DOMContentLoaded', function() {
    ng.platform.browser.bootstrap(myApp);
  });



}());

<!DOCTYPE html>
<html>

<head>
  <title>Angular 2 Troubleshooting</title>

  <script src="https://code.angularjs.org/2.0.0-beta.9/Rx.umd.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.9/angular2-polyfills.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.9/angular2-all.umd.dev.js"></script>


  <!-- 2. Load our 'modules' -->
  <script src='app/main.js'></script>

</head>

<!-- 3. Display the application -->

<body>
  <my-app>Loading...</my-app>
</body>

</html>