Использование компонента Angular 2 в приложении Angular 1

Я следую https://angular.io/docs/ts/latest/guide/upgrade.html шагам, а именно: "Использование угловых 2 компонентов из углового кода 1".

Создали hero-detail.component.ts со следующим кодом:

import { Component } from '@angular/core';
@Component({
  selector: 'hero-detail',
  template: '
    <h2>Windstorm details!</h2>
    <div><label>id: </label>1</div>
  '
})
export class HeroDetailComponent {
}

Затем добавлен требуемый код в main.ts:

import { upgradeAdapter } from './upgrade-adapter'; //this existed already
import { HeroDetailComponent } from './hero-detail.component'; //added

//... here other code inbetween

angular.module('heroApp', [])
  .directive('heroDetail', upgradeAdapter.downgradeNg2Component(HeroDetailComponent));

Теперь я вставляю <hero-detail></hero-detail> в свой html, но ничего не вижу. Чего не хватает?