title: Why $onInit method is not invoked in the example below?
body: <p>I would like to use angular's component method, but it seems something is wrong. I have been double checking this code for a while. There is no typo, it seems it fits for the documentation, but, still, it is not working.</p>
  
  <p>I have <a href="https://stackoverflow.com/questions/36317578/about-angular-1-5-component-lifecycle-hooks">checked</a>, Angular 1.5.3 is installed.</p>
  
  <p>There is no output on the console. According to the <a href="https://docs.angularjs.org/guide/component" rel="nofollow noreferrer">documentation</a> and <a href="https://toddmotto.com/exploring-the-angular-1-5-component-method/" rel="nofollow noreferrer">this</a> blog entry I should see the "onInit" text.</p>
  
  <p>The component's template is displayed correctly, and I can see the the template is loaded, but it seems the controller is not instantiated / fired.</p>
  
  <p>My app is written in Typescript.</p>
  
  <p><strong>The component</strong>:</p>
  
  
  
  <pre><code>module sayusiando.dilib.spa {
  
      export class LeftHandMenuComponent implements ng.IComponentOptions {
  
          public transclude: boolean = false;
          public controller: Function = LeftHandMenuController;
          public controllerAs: string = "vm";
          public templateUrl: string = "app/layout/leftHandMenu/leftHandMenuTemplate.html";
  
      }
  
      angular
          .module("dilib")
          .component("dilibLeftHandMenu", new LeftHandMenuComponent());
  }
  </code></pre>
  
  <p><strong>compiled code</strong>:</p>
  
  
  
  <pre><code>var sayusiando;
  (function (sayusiando) {
      var dilib;
      (function (dilib) {
          var spa;
          (function (spa) {
              var LeftHandMenuComponent = (function () {
                  function LeftHandMenuComponent() {
                      this.transclude = false;
                      this.controller = spa.LeftHandMenuController;
                      this.controllerAs = "vm";
                      this.templateUrl = "app/layout/leftHandMenu/leftHandMenuTemplate.html";
                  }
                  return LeftHandMenuComponent;
              })();
              spa.LeftHandMenuComponent = LeftHandMenuComponent;
              angular
                  .module("dilib")
                  .component("dilibLeftHandMenu", new LeftHandMenuComponent());
          })(spa = dilib.spa || (dilib.spa = {}));
      })(dilib = sayusiando.dilib || (sayusiando.dilib = {}));
  })(sayusiando || (sayusiando = {}));
  </code></pre>
  
  <p><strong>Layout template</strong>:</p>
  
  
  
  <pre><code>&lt;div&gt;
      &lt;dilib-left-hand-menu class="col-lg-2"&gt;&lt;/dilib-left-hand-menu&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>LeftHandMenuController</strong>:</p>
  
  
  
  <pre><code>module sayusiando.dilib.spa {
      "use strict";
  
      export interface ILeftHandMenuController {
      }
  
  
      export class LeftHandMenuController implements ILeftHandMenuController {
  
          $onInit: Function = (() =&gt; {console.log("onInit");});
  
  
          static $inject = ["LeftHandMenuService"];
          constructor(leftHandMenuService: sayusiando.dilib.spa.ILeftHandMenuService) {
  
              console.log("con");
              this.leftHandMenuService = leftHandMenuService;
  
              //this.activate();
              console.log("construct");
          }
  
          activate() { //activate logic }
  
      }
  
      angular
          .module('dilib')
          .controller('leftHandMenuController', LeftHandMenuController);
  
  }
  </code></pre>
  
  <p><strong>Compiled controller code</strong>:</p>
  
  
  
  <pre><code>var sayusiando;
  (function (sayusiando) {
      var dilib;
      (function (dilib) {
          var spa;
          (function (spa) {
              "use strict";
              var LeftHandMenuController = (function () {
                  function LeftHandMenuController(leftHandMenuService) {
                      this.$onInit = (function () { console.log("onInit"); });
                      console.log("con");
                      this.leftHandMenuService = leftHandMenuService;
                      //this.activate();
                      console.log("construct");
                  }
                  LeftHandMenuController.prototype.activate = function () {
                      var _this = this;
                      this.leftHandMenuService.getLeftHandMenu()
                          .then(function (result) {
                          _this.leftHandMenu = result;
                      });
                  };
                  LeftHandMenuController.$inject = ["LeftHandMenuService"];
                  return LeftHandMenuController;
              })();
              spa.LeftHandMenuController = LeftHandMenuController;
              angular
                  .module('dilib')
                  .controller('leftHandMenuController', LeftHandMenuController);
          })(spa = dilib.spa || (dilib.spa = {}));
      })(dilib = sayusiando.dilib || (sayusiando.dilib = {}));
  })(sayusiando || (sayusiando = {}));
  </code></pre>