一つのファイルから別のルートコンポーネントファイルをインポートしようとしています。 それは..としてエラーを与える
zone.js：484未処理プロミス拒否：テンプレート解析エラー： 「コース」は既知の要素ではありません。 1. 'コース'が角度成分である場合、それがこのモジュールの一部であることを確認します。 2. 'courses'がWebコンポーネントの場合は、このコンポーネントの '@ NgModule.schema'に「CUSTOM_ELEMENTS_SCHEMA」を追加して、このメッセージを表示しないようにします。 （ "
私の最初の角度2アプリ
値：エラー：テンプレート解析エラー：（...）エラー：テンプレート解析エラー：エラー：テンプレート解析エラー： 「コース」は既知の要素ではありません。
私の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]私に誤りを与える
それ以上の解決策を教えてください。
あなたはそれを宣言する必要がありますdeclarations array(meta property) of @NgModule以下に示すように（RC5 and later）、
import {CoursesComponent} from './courses.component';
@NgModule({
imports: [ BrowserModule],
declarations: [ AppComponent,CoursesComponent], //<----here
providers: [],
bootstrap: [ AppComponent ]
})
Angular RC5とRC6については、モジュールメタデータデコレータのコンポーネントを宣言する必要がありますdeclarationsキーですので、追加してください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 { }
角度RC5＆amp; RC6
Jasmineテストで上記のエラーが発生している場合は、あなたの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();
});
});
単純に言えば、
あなたは下に登録する必要があります@NgModule〜の
declarations: [
AppComponent, YourNewComponentHere
]
のapp.module.ts
するのを忘れないでimportそのコンポーネント。