CODEWITHSUNDEEP
angulartypescriptatom-editorangular-components
Philip Feldmann
Philip Feldmann

Reputation: 8415

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

}

Upvotes: 18

Views: 28139

Answers (5)

Jujhar Singh
Jujhar Singh

Reputation: 129

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

Upvotes: 1

Piyush Nikam
Piyush Nikam

Reputation: 1

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.

Upvotes: 0

Surajit Mukherjee
Surajit Mukherjee

Reputation: 21

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.

Upvotes: 1

user6878305
user6878305

Reputation: 341

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

Upvotes: 34

micronyks
micronyks

Reputation: 55443

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.

Upvotes: 18

Related Questions