角度2の別のルートコンポーネントにコンポーネントをインポートする方法

Question

別のルートコンポーネントファイルを1つのファイルからインポートしようとしています。 それは

zone.js:484 Unhandled Promise rejection: Template parse errors: 'courses' is not a known element: 1. If 'courses' is an Angular component, then verify that it is part of this module. 2. If 'courses' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("

My First Angular 2 App

[ERROR ->]"): AppComponent@0:31 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: 'courses' is not a known element:

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

と私のcourses.component.tsことのようにする。..としてエラーを与えます。

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

app.component内courses.component.tsファイルからコースのコンポーネントをインポートする間、私は私に

をエラーを与える@Component{}

directives:[CoursesComponent]内側でき宣言ディレクティブないよ、それ以上の解決策を教えてください。角度RC5とRC6については

Answer 1

下図のようにあなたが（RC5 and later）declarations array(meta property) of @NgModuleでそれを宣言する必要があり、

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

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

Answer 2

あなたはモジュールのメタデータのデコレータのdeclarationsキーでコンポーネントを宣言し、その下にとして、あなたのメインモジュールdeclarationsでCoursesComponentを追加し、AppComponentメタデータからdirectivesを削除する必要があります。

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

角度RC5 & RC6

あなたはあなたの中に、上記のエラーを取得している場合Jasmineテストでは、あなたの012のレンダリング不可能なコンポーネントを宣言しなければならない可能性が高いです。

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

Answer 4

、 あなたはapp.module.ts

の@NgModuleさん

declarations: [ 
    AppComponent, YourNewComponentHere 
    ] 

の下に登録する必要が忘れないでくださいその成分にimport 。