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

Question

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

}

Are you using a version of the CLI that matches the angular version you're using? `directives` at the component level was deprecated then removed (in RC6, IIRC). — jonrsharpe, Sep 15 '16 at 18:20
I installed both today using the npm command as shown in the documentation. Both should be up to date, I don't know if they match though. — Philip Feldmann, Sep 15 '16 at 18:32

score 34 · Answer 1 · answered Sep 25 '16 at 15:25

34

Angular2 Component decorator no longer use these for embedding other components. We will need to use a new meta data called entryComponents instead. See below as an example ...

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  entryComponents:[VehicleListComponent]
})

The vehicle-list-component has the following component metadata..

@Component({
  selector: 'app-vehicle-list',
  templateUrl: './vehicle-list.component.html',
  styleUrls: ['./vehicle-list.component.css'],
  providers: [VehicleService]
})

answered Sep 25 '16 at 15:25

user6878305

341
2
2

2

I just replaced "directives" with "entryComponents" and got it to work. Read more here: https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html – wojjas Oct 05 '16 at 21:43
1

Same issue here, this answer is helpful. Can someone explain why the name change? – Adrian Moisa Oct 28 '16 at 12:56
I also make reference on @@NgModule putting the component on declarations key and import it on the top of the file (in my case @@NgModule is on app.module.ts). – Ricardo França Dec 02 '16 at 14:07

micronyks · Accepted Answer · 2016-09-15T18:42:33.907

18

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.

edited Sep 15 '16 at 18:42

answered Sep 15 '16 at 18:21

micronyks

54,797
15
112
146

Thank you. I already got this declared in my app.module.ts as shown in your post automatically by CLI. The typescript compiles but it doesn't run in the browser. It's a huge error, I've updated it to my original post. – Philip Feldmann Sep 15 '16 at 18:29
Then have you removed `directives:[...]` part from `@Component`???? just remove it. I hope it will start working... – micronyks Sep 15 '16 at 18:31
I'm not sure but I just updated my answer with schemas. Check now if it works. – micronyks Sep 15 '16 at 18:38
What was the issue? – micronyks Sep 15 '16 at 18:39
Your fix worked even before, I just messed up some of my spelling when including the component. Thank you very much. – Philip Feldmann Sep 15 '16 at 18:39
Oh great to know it. Enjoy now. – micronyks Sep 15 '16 at 18:40
I don't get why did angular2 changed the earlier method? Any specific reasons to do so... – VoidZero Sep 23 '16 at 21:02
Yes the way you bootstrap app is changed. Everything is module now. There are many changes done to make app moduler. – micronyks Sep 24 '16 at 04:56
1

@amirhossein you need to import it like `import { NgModule } from '@angular/core';` – micronyks Oct 21 '16 at 16:58

score 1 · Answer 3 · answered Dec 08 '16 at 09:56

1

if you use Angular CLI then the new component will be automatically imported and added to declarations section of @ngmodule in app.module.ts . We don't need to write any code for that.

answered Dec 08 '16 at 09:56

Surajit Mukherjee

21
5

score 1 · Answer 4 · answered Dec 30 '17 at 19:35

1

NO NEED TO DO ANYTHING WITH ANGULAR 4 or greater after running the create component command. The error is most likely just you not using the right selector name from the new component metadata file (eg componentname.component.ts).

answered Dec 30 '17 at 19:35

Jujhar Singh

129
6

score 0 · Answer 5 · answered Jan 06 '17 at 09:46

0

You have two options:

1: Use entryComponents tag inside Component

2: Use Angular CLI which automatically imports it, so we don't need to explicitly write code for it.

answered Jan 06 '17 at 09:46

Piyush Nikam

1
1

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

5 Answers5

Linked