How to declare nested components in Angular2

Question

In the Angular2 tutorial a detail component is introduced by adding it to the @NgModule.

Instead, I would like to add it by the outer component (AppComponent) somehow importing it, so that only the outer component refers to the inner component.

I can't figure out how to do it. Old examples refer to the directives property, but directives no longer exist in the type ComponentMetadtaType. So this does not work

import { HeroDetailComponent } from './hero-detail.component';

@Component({
    selector: 'my-app',
    [..]
    directives: [HeroDetailComponent]
})

Answer 1

You have to add directives and components to declarations: [] of a module.
If you want to only one component to be able to use a component, create a module that consists only of these two components.

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent, FooComponent, BarDirective],
  ...
})