あるファイルから別のルートコンポーネントファイルからコンポーネントをインポートしようとしています。エラーとして..
zone.js:484未処理のプロミス拒否:テンプレート解析エラー: 'courses'は既知の要素ではありません:1. 'courses'がAngularコンポーネントである場合、それがこのモジュールの一部であることを確認します。 2.「courses」がWebコンポーネントの場合、「CUSTOM_ELEMENTS_SCHEMA」をこのコンポーネントの「@ NgModule.schema」に追加して、このメッセージを抑制します。 ( "
最初のAngular 2アプリ
[エラー->] "):AppComponent @ 0:31;ゾーン:;タスク:Promise.then;値:エラー:テンプレート解析エラー:(…)エラー:テンプレート解析エラー:「コース」は既知の要素:
私の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
as below 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 { }
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();
});
});
上記の答え簡単な言葉では、@NgModule
の下に登録する必要があります
declarations: [
AppComponent, YourNewComponentHere
]
app.module.ts
そのコンポーネントをimport
することを忘れないでください。