Невозможно добавить новый компонент в мое приложение angular 2 с помощью typescript

Я использую Angular 2 CLI, и я создал компонент "MyComponent" с помощью ng generate component MyComponent. Насколько я знаю, мне нужно добавить компонент в палитру-ключ-директиву декоратора @Component, но компиляция typescript завершается с ошибкой, говоря, что:

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

Это мой код для приложения:

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

Я не касался кода сгенерированного компонента, но на всякий случай:

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

}

Ответы

Ответ 1

Сама ошибка говорит о том, что директивы не существуют в Компонент, поскольку он устарел. попробуйте этот код, показанный ниже,

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

И удалите директивы : [MyComponentComponent] из AppComponent.

Ответ 2

Angular2 Декодер компонентов больше не использует их для встраивания других компонентов. Вместо этого нам нужно будет использовать новые метаданные, называемые entryComponents. Ниже приведен пример...

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

Компонент списка транспортных средств имеет следующие метаданные компонентов.

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

Ответ 3

если вы используете Angular CLI, тогда новый компонент будет автоматически импортирован и добавлен в раздел объявлений в @ngmodule в app.module.ts. Для этого нам не нужно писать код.

Ответ 4

НЕТ НИЧЕГО ДЕЙСТВОВАТЬ С ANGULAR 4 или выше после запуска команды создания компонента. Вероятно, ошибка заключается в том, что вы не используете правильное имя селектора из файла метаданных нового компонента (например, componentname.component.ts).

Ответ 5

У вас есть два варианта:

1: Использовать тег entryComponents внутри Component

2: Используйте Angular CLI, который автоматически импортирует его, поэтому нам не нужно явно писать код для него.