web-dev-qa-db-fra.com

Impossible d'ajouter un nouveau composant à mon application angular 2 avec le manuscrit

J'utilise Angular 2 CLI et j'ai créé le composant "MyComponent" avec le ng generate component MyComponent. Autant que je sache, je dois ajouter le composant à la directive key paire-valeur du décorateur @Component, mais la compilation TypeScript échoue à ce stade, en disant que

ERROR in [default] /Users/Philip/Desktop/Angular2/src/app/app.component.ts:8:2 
Argument of type '{ selector: string; template: any; styles: any[]; directives: typeof MyComponentComponent[]; }' is not assignable to parameter of type 'Component'.
  Object literal may only specify known properties, and 'directives' does not exist in type 'Component'.

Ceci est mon code pour l'application:

import { Component } from '@angular/core';
import { MyComponentComponent } from './my-component/my-component.component'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  directives: [MyComponentComponent],
})
export class AppComponent {
  title = 'app works!';
}

Je n'ai pas touché le code du composant généré, mais juste au cas où:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})

export class MyComponentComponent implements OnInit {

  constructor() {

  }

  ngOnInit() {
  }

}
angulartypescriptatom-editorangular-components
17
Philip Feldmann

Erreur elle-même indique que les directives n'existent pas dans Composant car elles sont obsolètes. essayez ce code ci-dessous,

import { MyComponentComponent } from './my-component/my-component.component'
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';

@NgModule({
   ...
   ...
   declarations:[AppComponent,MyComponentComponent], //<---need to declare 
   schemas:     [CUSTOM_ELEMENTS_SCHEMA]             //<---added this line
})

Et supprimez les directives: [MyComponentComponent] de AppComponent .

18
micronyks

Les décorateurs de composants Angular2 n'utilisent plus ces composants pour intégrer d'autres composants. Nous devrons utiliser à la place une nouvelle métadonnée appelée entryComponents. Voir ci-dessous à titre d'exemple ...

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  entryComponents:[VehicleListComponent]
})

Vehicle-List-Component contient les métadonnées suivantes:.

@Component({
  selector: 'app-vehicle-list',
  templateUrl: './vehicle-list.component.html',
  styleUrls: ['./vehicle-list.component.css'],
  providers: [VehicleService]
})
35
user6878305

Nul besoin de faire quoi que ce soit avec ANGULAR 4 ou supérieur après l'exécution de la commande create composant. L'erreur est probablement que vous n'utilisez pas le nom du sélecteur de droite du nouveau fichier de métadonnées du composant (par exemple, nomcomposant.component.ts).

1
Jujhar Singh

si vous utilisez l'interface de ligne de commande angulaire, le nouveau composant sera automatiquement importé et ajouté à la section de déclaration de @ngmodule dans app.module.ts Nous n'avons pas besoin d'écrire de code pour cela. 

1
Surajit Mukherjee

Vous avez deux options:

1: Utiliser la balise entryComponents à l'intérieur du composant

2: Utilisez la CLI angulaire qui l'importe automatiquement. Il n'est donc pas nécessaire d'écrire explicitement le code correspondant.

0
Piyush Nikam