Menu
I am a beginner in angular 2 and I want to make my first app working. I am using TypeScript. I have the app.component.ts in which I have made a directive to another compoent called todos.component but I am getting the following error at compile time:
[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'. My code is like this:
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:"; } Without the directive, the app works fine. Any help would be appreciated!
Thanks in advance!
508
In your app.component.ts you define directive: [TodosComponent]. The directive property has been removed in RC6 from the @Component() decorator.
The solution to this, is to:
declarations: [] array.See here for an example of AppModule:
https://angular.io/docs/ts/latest/tutorial/toh-pt3.html
54
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
