Angular 2 | Директивы Аргумент типа '{}' не присваивается

Я noob с Angular 2. Я занимаюсь учебными материалами YouTube, но каждый учебник имеет часть directives:, где я застрял.

app.component.ts

import { Component } from '@angular/core';
import { HeaderComponent } from './components/header/header.component'
@Component({
  selector: 'my-app',
  template: '<h1>Hello</h1><header></header>',
  directives: [HeaderComponent]
})
export class AppComponent { }

Выход ошибки:

Argument of type '{ selector: string; template: string; directives: typeof HeaderComponent[]; }' is not assignable to parameter of type 'ComponentMetadataType'.at line 6 col 3

header.component.ts

import { Component } from '@angular/core';

@Component ({

  selector: 'header',
  template: '<h2>hit!</h2>'

})
export class HeaderComponent { }

Вот скриншот ошибки

Ответ 1

directives свойство было удалено в RC.6

Вы должны перенести его в свойство declarations вашего декоратора NgModule

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, HeaderComponent ], <== here
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Ответ 2

Это очень распространенная проблема, возникшая, если вы новичок в angular2, и этот ответ, вероятно, для тех, кто застрял в подобной проблеме.

Прежде всего, не забудьте импортировать дочерний компонент класса (здесь, HeadComponent) в ваш корневой компонент (app.component.ts) следующим образом: -

//inside app.component.ts
import{ HeadComponent} from'./components/header/header.component';

Затем вы должны переместить его в объявления в app.module.ts следующим образом: -

import{ TutorialsComponent} from'./components/header/header.component';
@NgModule({
    declarations: [
       AppComponent,HeadComponent]

Я думаю, это должно помочь.

Ответ 3

Если вы используете RC6, то только вы должны сделать следующее,

import { HeaderComponent } from './components/header/header.component' //<----added this line

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent,HeaderComponent],                       //<----added HeaderComponent
  bootstrap:    [ AppComponent ]
})