How to declare nested components in Angular2

Question

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

Instead, I would like to add it with an external component ( AppComponent ) somehow importing it, so that only the external component refers to the internal component.

I can’t figure out how to do this. Older examples relate to the directives property, but directives no longer exists in the ComponentMetadtaType type. So it does not work.

 import { HeroDetailComponent } from './hero-detail.component'; @Component({ selector: 'my-app', [..] directives: [HeroDetailComponent] }) 

Answer 1

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

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

Answer 2

You must declare its ad metadata as shown below.

 import { HeroDetailComponent } from './hero-detail.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent,HeroDetailComponent], //<----here providers: [], bootstrap: [ AppComponent ] })