La directive angulaire 2 composants ne fonctionne pas

Je suis débutant en angulaire 2 et je veux faire fonctionner ma première application. J'utilise TypeScript. J'ai l' app.component.ts dans lequel j'ai fait une directive à un autre composant appelé todos.component mais je reçois l'erreur suivante au moment de la compilation:

[0] app/app.component.ts(7,3): error TS2345: Argument of type '{ moduleId: string; selector: string; directives: typeof TodosComponent[]; templateUrl: string; s ...' is not assignable to parameter of type 'Component'. [0] Object literal may only specify known properties, and 'directives' does not exist in type 'Component'. 

Mon code est comme ceci:

  • Comment importer un baril par nom de dossier uniquement?
  • Angulaire 2 données de retour de RxJs s'abonner
  • Utilisation de bibliothèques externes JS dans mon projet angulaire 2
  • Equivalent de Angular 1 autrement route dans Angular 2
  • Remplacement de Elvis Opérateur d'Angular2 en caractères d'imprimerie
  • Comment puis-je organiser mes dossiers d'applications angulaires comme un paquet Java?
  • Index.html

     <html> <head> <title>Angular 2 QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- 1. Load libraries --> <!-- Polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <!-- 2. Configure SystemJS --> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head> <!-- 3. Display the application --> <body> <app-root>Loading...</app-root> </body> </html> 

    App.component.ts

     import { Component } from '@angular/core'; import {TodosComponent} from './todos/todos.component'; @Component({ moduleId : module.id, selector: 'app-root', directives: [TodosComponent], templateUrl : 'app.component.html', styleUrls : ['app.component.css'] }) export class AppComponent { title: string = "Does it work?"; } 

    App.component.html:

     <h1> Angular 2 application</h1> {{title}} <app-todos></app-todos> 

    Todos.component.ts

     import { Component, OnInit } from '@angular/core'; @Component({ moduleId : module.id, selector: 'app-todos', template: '<h2>Todo List</h2>' }) export class TodosComponent { title: string = "You have to do the following today:"; } 

    Sans la directive, l'application fonctionne bien. Toute aide serait appréciée!

    Merci d'avance!

  • Angulaire 2 Démarrage rapide: jeton inattendu <
  • Évitez Angular2 de soumettre systématiquement un formulaire au clic de bouton
  • 2 cookies angulaires
  • Angulaire 2: comment appliquer une limite à * ngFor?
  • Angulaire 2 données de retour de RxJs s'abonner
  • Comment démarrer le projet Angular2 avec le minimum de fichiers requis en utilisant npm?
  • 2 Solutions collect form web for “La directive angulaire 2 composants ne fonctionne pas”

    Dans votre app.component.ts vous définissez la directive: [TodosComponent] . La propriété de la directive a été supprimée dans RC6 à partir du décorateur @Component() .

    La solution à cela est:

    1. Créer un NgModule et
    2. Déclarer le ToutComponent dans les declarations: [] array.

    Consultez ici un exemple de AppModule:

    https://angular.io/docs/ts/latest/tutorial/toh-pt3.html

    Module.id a été ajouté intialement lorsque angular2 était à la version beta. Certes, avec une nouvelle version et un support cli angulaire, il n'est pas nécessaire d'ajouter moduleId: module.id , vous pouvez supprimer des fichiers .ts

    JavaScript rend le site Web intelligent, beauté et facile à utiliser.