candino candino - 1 year ago 1055
TypeScript Question

Angular 2 component directive not working

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:


<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>
System.import('app').catch(function(err){ console.error(err); });
<!-- 3. Display the application -->


import { Component } from '@angular/core';
import {TodosComponent} from './todos/todos.component';

moduleId :,
selector: 'app-root',
directives: [TodosComponent],
templateUrl : 'app.component.html',
styleUrls : ['app.component.css']

export class AppComponent {
title: string = "Does it work?";


<h1> Angular 2 application</h1>


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

moduleId :,
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!

Answer Source

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 create an NgModule and declare the TodosComponent inside the declarations: [] array.

See here for an example of AppModule: