Angular 2 | Directives L'argument de type '{}' n'est pas assignable à l'utilisateur.

Question

Je suis novice avec Angular 2. Je fais des tutoriels sur YouTube, mais tous les tutoriels ont la directives: la partie où je suis coincé.

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

La sortie d'erreur est :

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

Voici une capture d'écran de l'erreur

Answer 1

directives a été supprimée dans RC.6

Vous devriez le déplacer vers declarations propriété de votre NgModule décorateur

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

Answer 2

Si vous utilisez RC6 alors vous devez faire ce qui suit,

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

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

Answer 3

Il s'agit d'un problème très courant auquel vous êtes confronté si vous êtes nouveau dans le domaine de la santé. angular2 et cette réponse est probablement destinée à ceux qui sont confrontés au même type de problème.

Tout d'abord, n'oubliez pas d'importer la classe du composant enfant (ici, HeadComponent) dans votre composant Root( app.component.ts ) comme suit:-

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

Vous devez alors le déplacer vers les déclarations dans app.module.ts suit:-

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

Je suppose que ça devrait aider.

Answer 4

WebStorm m'a dit de rendre le constructeur protégé. C'est ce que j'ai fait. Cela a causé ce problème lors d'un redémarrage de webpack. La suppression du mot-clé protected l'a à nouveau réglé.

Answer 5

Je suis également confronté au même problème.

Veuillez vérifier cette image d'erreur J'utilise angulaire7

J'ai inclus ce HeaderComponent dans le NgModule, mais cela ne fonctionne pas. erreur : Argument de type '{ selector : string ; directives : (typeof HomeComponent)[] ; template : string ; }' n'est pas affectable au paramètre de type 'Component'. Un objet littéral ne peut spécifier que des propriétés connues, et 'directives' n'existe pas dans le type 'Component'. .

import { HeaderComponent } from './components/header/header.component' 

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent,HeaderComponent],                      
  bootstrap:    [ AppComponent ]

})``