Angular2 version RC.6 "directives" inside @Component Error
Solution 1
simple...
problem is with directives: ''
as its an array it should be directives: [ ]
Update: In RC6 OR later version, you have @NgModule
. In RC6 OR later version, you have to declare pipes
and directives
that you are gonna use within @NgModule
as shown...
import { PeopleListComponent } from './people-list/people-list.component';
@NgModule({
imports: [ BrowserModule],
declarations: [ AppComponent,PeopleListComponent ], //<<===here
providers: [],
bootstrap: [ AppComponent ]
})
You can remove directives:''
from @Component
of AppComponent
Solution 2
directives
and pipes
inside @Component
is deprecated from angular RC6. Check my answer on https://stackoverflow.com/questions/39410417/how-to-import-component-into-another-root-component-in-angular-2
Shashank Gaurav
Updated on July 20, 2022Comments
-
Shashank Gaurav almost 2 years
I am using Angular2 and have downloaded package.json from the official website. When I am trying to use "directives" inside @Component decorator I am getting this error.
I have attached my code ERROR:
[ts] Argument of type '{ selector: string; template: string; directives: string; }' is not assignable to parameter of type 'ComponentMetadataType'. Object literal may only specific known properties, and 'directives' does not exist in type 'ComponentMetadataType'. (property) directives: string
This is my code:
import { Component } from '@angular/core'; import { PeopleListComponent } from './people-list/people-list.component'; @Component({ selector: 'my-app', template: '<h1>{{ title }}</h1>', directives: '' //ERROR //NOT ABLE TO RECOGNIZE }) export class AppComponent { title = "My title"; }
Here is my package.json:
{ "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" }, "license": "ISC", "dependencies": { "@angular/common": "2.0.0-rc.6", "@angular/compiler": "2.0.0-rc.6", "@angular/compiler-cli": "0.6.0", "@angular/core": "2.0.0-rc.6", "@angular/forms": "2.0.0-rc.6", "@angular/http": "2.0.0-rc.6", "@angular/platform-browser": "2.0.0-rc.6", "@angular/platform-browser-dynamic": "2.0.0-rc.6", "@angular/router": "3.0.0-rc.2", "@angular/upgrade": "2.0.0-rc.6", "core-js": "^2.4.1", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.11", "systemjs": "0.19.27", "zone.js": "^0.6.17", "angular2-in-memory-web-api": "0.0.18", "bootstrap": "^3.3.6" }, "devDependencies": { "concurrently": "^2.2.0", "lite-server": "^2.2.2", "typescript": "^1.8.10", "typings":"^1.3.2" } }