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

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

WebStorm told me to make the constructor protected. So I did. Caused this problem on a webpack restart. Removing the protected keyword again fixed it.

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.

Answer 4

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 ]
})