title: Angular2 with ngUpgrade: Angular does not recognize component in view
body: <p>After few days of playing with Angular 2 Hero tutorial, I decided to play with ngUpgrade.
  So I bootstrap Angular with <code>upgradeAdapter</code> and downgrade Angular 2 component to match Angular 1 version:</p>
  
  <pre><code>///&lt;reference path="../node_modules/angular2/typings/browser.d.ts"/&gt;
  import {UpgradeAdapter} from "angular2/upgrade";
  export const upgradeAdapter: any = new UpgradeAdapter();
  import {TagFormController} from "../tags/form/TagFormController";
  
  (function(): void {
      "use strict";
      upgradeAdapter.bootstrap(
          document.body,
          ["application"],
          {
              strictDi: true
          }
      );
  
      angular
          .module("application")
          .directive("tag-form", upgradeAdapter.downgradeNg2Component(TagFormController));
  })();
  </code></pre>
  
  <p>Typescript <code>TagFormController</code>:</p>
  
  <pre><code>/// &lt;reference path="../../typings/angularjs/angular.d.ts" /&gt;
  ///&lt;reference path="../../custom-ts-types/custom-ts-types.ts"/&gt;
  
  import {Component, Input, Output, OnInit} from "angular2/core";
      @Component({
          selector: "tag-form",
          templateUrl: "src/tags/form/tagForm.html",
      })
      export class TagFormController
      implements IAngularComponent, OnInit {
          @Input()
          public articles: any[];
          @Input()
          public mode: string;
          @Output()
          public saveTag: any;
          @Output()
          public goToEditMode: any;
          public tag: any;
          @Input()
          public tagId: number;
          @Input()
          public tagValue: number;
          @Input()
          public tagArticles: any[];
          @Output()
          public cancel: any;
          constructor() {
              console.log("Running");
          }
  
          public $onInit(): void {
              this.tag = {
                  articles: this.tagArticles,
                  id: this.tagId,
                  value: this.tagValue,
              };
          }
  
          public ngOnInit(): void {
              this.tag = {
                  articles: this.tagArticles,
                  id: this.tagId,
                  value: this.tagValue,
              };
          }
  
          public save(tag: any): void {
              if (typeof tag.id !== "number") {
                  throw new TypeError("Id should be provided for tag, but is " +
                      typeof tag.id + " with value: " + String(tag.id));
              }
              console.log(tag.value);
              this.saveTag({
                  $tag: tag
              });
          }
          public edit(tag: any): void {
              if (typeof this.cancel !== "function") {
                  throw new TypeError("cancel function should be provided and will be checked later!");
              }
  
              if (typeof tag.id !== "number") {
                  throw new TypeError("Id should be provided for tag, but is " +
                      typeof tag.id + " with value: " + String(tag.id));
              }
              this.goToEditMode({
                  $tag: tag
              });
          }
          public cancelEdit(): void {
              this.cancel();
          }
      }
      console.log("I am here!");
  </code></pre>
  
  <p>If I look into Developer Tools in Chrome, everything should be OK, request for <code>TagFormController</code> is sent and <code>I am here</code> is displayed in console.
  But usage of <code>tagForm</code> directive is empty inside, for me it looks like Angular does not recognize it properly. I use <code>tagForm</code> diretcive in this way from other <code>tag</code> directive:</p>
  
  <pre><code>&lt;tag-form
          *ngIf="$ctrl.tagLoaded"
          [articles]="$ctrl.articles"
          [mode]="$ctrl.mode"
          (saveTag)="$ctrl.saveTag($tag)"
          (goToEditMode)="$ctrl.goToEditMode($tag)"
          [tag-id]="$ctrl.tag.id"
          [tag-value]="$ctrl.tag.value"
          [tagArticles]="$ctrl.tag.articles"
          (cancel)="$ctrl.cancel()"&gt;
  &lt;/tag-form&gt;
  </code></pre>
  
  <p>I have to slightest idea what I am doing from. Maybe is important that I don't use SystemJS for Angular 1 part of project, but as I wrote request for <code>TagFormController</code> is sent. Can you see where I make mistake? I will be grateful if anybody help me - thank you in advance!</p>