Как импортировать компонент в другой корневой компонент в Angular 2

Я пытаюсь импортировать компонент из одного файла в другой файл корневого компонента. он дает ошибку, как..

zone.js: 484 Unhandled Promise rejection: ошибки анализа шаблона: "Курсы" не являются известным элементом: 1. Если "курсы" - это компонент Angular, проверьте, что он является частью этого модуля. 2. Если "курсы" - это веб-компонент, добавьте "CUSTOM_ELEMENTS_SCHEMA" в "@NgModule.schema" этого компонента, чтобы подавить это сообщение. ( "
My First Angular 2 App
[ERROR → ]" ): AppComponent @0: 31; Зона:; Задача: Promise.then; Значение: Ошибка: ошибки анализа шаблона: (...) Ошибка: ошибки анализа шаблона: "Курсы" не являются известным элементом:

My app.component.ts будет выглядеть как [файл корневого компонента]

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

и my courses.component.ts be;

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

при импорте компонентов курса из файла course.component.ts внутри app.component я не могу объявить директиву внутри @Component{}

directives:[CoursesComponent] дает мне ошибку

Пожалуйста, сообщите нам об этом.

Ответ 1

Вы должны объявить его с помощью declarations array(meta property) of @NgModule, как показано ниже (RC5 and later),

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

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

Ответ 2

Для angular RC5 и RC6 вам нужно объявить компонент в части декларации атрибутов метаданных модулей, поэтому добавьте CoursesComponent в свои основные модули declarations как ниже и удалите directives из 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{}

Ответ 3

Angular RC5 и RC6

Если вы получаете вышеупомянутую ошибку в тестах Jasmine, это, скорее всего, потому, что вы должны объявить незаменимый компонент в своем TestBed.configureTestingModule({}).

TestBed настраивает и инициализирует среду для модульного тестирования и предоставляет методы для издевательств/создания/ввода компонентов и сервисов в модульные тесты.

Если вы не объявите компонент перед выполнением модульных тестов, Angular не будет знать, что <courses></courses> находится в вашем файле шаблона.

Вот пример:

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

Ответ 4

выше ответы Простыми словами, вы должны зарегистрироваться под @NgModule

declarations: [
    AppComponent, YourNewComponentHere
  ]

of app.module.ts

не забывайте import этот компонент.