Angular 2 | Directives Argument of type '{}' is not assignable to

Question

I am noob with Angular 2. I am doing YouTube tutorials, but every tutorial have the directives: part where i am stuck.

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 { }

The error output is:

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 { }

Here's an screenshot of the error

Answer 1

directives property was removed in RC.6

You should move it to declarations property of your NgModule decorator

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

Answer 2

If you are using RC6, then only you should do following,

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

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

Answer 3

This is a very common problem faced if you are new to angular2 and this answer is probably for those who are stuck with the similar kind of problem.

First of all, don't forget to import the child component class(here, HeadComponent) in your root component(app.component.ts) as follows:-

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

Then you should move it to declarations in app.module.ts follows:-

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

I guess this should help.