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