que - Cómo importar un componente a otro componente raíz en Angular 2

que es un modulo en angular

Question

Estoy tratando de importar componentes de un archivo a otro archivo de componentes raíz. da error como ...

zone.js: 484 Rechazo de promesa no controlada: errores de análisis de plantilla: ''cursos'' no es un elemento conocido: 1. Si ''cursos'' es un componente angular, verifique que sea parte de este módulo. 2. Si ''cursos'' es un componente web, agregue "CUSTOM_ELEMENTS_SCHEMA" al ''@ NgModule.schema'' de este componente para suprimir este mensaje. ("

Mi primera aplicación angular 2

[ERROR ->] "): AppComponent @ 0: 31; Zona:; Tarea: Promise.then; Valor: Error: Errores de análisis de plantilla: (...) Error: Errores de análisis de plantilla: ''cursos'' no es un elemento conocido:

Mi app.component.ts será como [archivo de componente raíz]

import { Component } from ''@angular/core'';
import {CoursesComponent} from ''./courses.component'';

@Component({
  selector: ''my-app'',
  template: ''<h1>My First Angular 2 App</h1><courses></courses>'',
  directives:[CoursesComponent],
})

export class AppComponent { }

y mis cursos.component.ts be;

import { Component } from ''@angular/core'';
@Component({
  selector: ''courses'',
  template: ''<h1>courses</h1>''
})
export class CoursesComponent { }

al importar el componente de cursos desde el archivo course.component.ts dentro de app.component no puedo declarar la directiva dentro de @Component{}

directives:[CoursesComponent] da un error

Por favor aconsejar solución sobre ello.

Answer 1

Debería declararlo con la declarations array(meta property) of @NgModule como se muestra a continuación ( RC5 and later ),

import {CoursesComponent} from ''./courses.component'';

@NgModule({
  imports:      [ BrowserModule],
  declarations: [ AppComponent,CoursesComponent],  //<----here
  providers:    [],      
  bootstrap:    [ AppComponent ]
})

Answer 2

Para Angular RC5 y RC6, debe declarar el componente en la clave de declarations del decorador de metadatos del módulo, así que agregue CoursesComponent en las declarations su módulo principal como se muestra a continuación y elimine las directives de los metadatos de AppComponent .

import { NgModule } from ''@angular/core'';
import { BrowserModule } from ''@angular/platform-browser'';

import { AppComponent } from ''./app.component'';
import { CoursesComponent } from ''./courses.component'';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, CoursesComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Answer 3

respuestas anteriores En palabras simples, debe registrarse en @NgModule ''s

declarations: [
    AppComponent, YourNewComponentHere
  ] 

de app.module.ts

No olvides import ese componente.

Answer 4

Angular RC5 y RC6

Si obtiene el error mencionado anteriormente en sus pruebas de Jasmine, lo más probable es que deba declarar el componente que no se puede entregar en su TestBed.configureTestingModule({}) .

TestBed configura e inicializa un entorno para pruebas unitarias y proporciona métodos para burlarse / crear / inyectar componentes y servicios en pruebas unitarias.

Si no declara el componente antes de que se ejecuten sus pruebas unitarias, Angular no sabrá qué <courses></courses> está en su archivo de plantilla.

Aquí hay un ejemplo:

import {async, ComponentFixture, TestBed} from "@angular/core/testing";
import {AppComponent} from "../app.component";
import {CoursesComponent} from ''./courses.component'';

describe(''CoursesComponent'', () => {
  let component: CoursesComponent;
  let fixture: ComponentFixture<CoursesComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        CoursesComponent
      ],
      imports: [
        BrowserModule
        // If you have any other imports add them here
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(CoursesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it(''should create'', () => {
    expect(component).toBeTruthy();
  });
});