Philip Feldmann Philip Feldmann - 2 months ago 242
TypeScript Question

Can't add a new component to my angular 2 app with typescript

I'm using Angular 2 CLI and I created the component "MyComponent" with the

ng generate component MyComponent
. As far as I know I have to add the component to the directive key-value-pair of the
@Component
decorator, but the typescript compilation fails at this point, saying that:

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'.


This is my code for the app:

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!';
}


I didn't touch the code of the generated component, but just in case:

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() {
}

}


I'm trying to compile this typescript with the "atom-typescript" plugin in atom.

Answer

Error itself says that directives doesn't exist in Component as it has been deprecated. try this code shown below,

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
})

And remove directives:[MyComponentComponent] from AppComponent.

Comments