navigationend - title angular

No puedo agregar un nuevo componente a mi aplicación angular 2 con mecanografía

Question

Estoy usando la CLI de Angular 2 y creé el componente "MyComponent" con el ng generate component MyComponent . Por lo que sé, tengo que agregar el componente a la directiva key-value-pair del decorador @Component , pero la compilación de @Component de @Component falla en este punto, diciendo que:

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

Este es mi código para la aplicación:

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

No toqué el código del componente generado, pero por si acaso:

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

}

Answer 1

El decorador de componentes Angular2 ya no los usa para incrustar otros componentes. Tendremos que usar un nuevo metadatos llamado entryComponents en su lugar. Vea a continuación un ejemplo ...

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

El componente de lista de vehículos tiene los siguientes metadatos de componentes.

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

Answer 2

El error en sí mismo dice que las directivas no existen en el componente, ya que ha quedado en desuso. prueba este código que se muestra a continuación,

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

Y elimine las directivas: [MyComponentComponent] de AppComponent .

Answer 3

NO HAY QUE HACER NADA CON ANGULAR 4 o superior después de ejecutar el comando Crear componente. Lo más probable es que el error simplemente no esté utilizando el nombre del selector correcto del archivo de metadatos del nuevo componente (por ejemplo, componentname.component.ts).

Answer 4

Si usa Angular CLI, el nuevo componente se importará automáticamente y se agregará a la sección de declaraciones de @ngmodule en app.module.ts. No necesitamos escribir ningún código para eso.

Answer 5

Tienes dos opciones:

1: Use la etiqueta entryComponents dentro del componente

2: use Angular CLI que lo importa automáticamente, por lo que no necesitamos escribir código explícitamente para él.