web-dev-qa-db-ja.com

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

あるファイルから別のルートコンポーネントファイルからコンポーネントをインポートしようとしています。エラーとして..

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]私にエラーを与える

解決策をアドバイスしてください。

angularangular2-directives
50
Vishu

以下に示すようにdeclarations array(meta property) of @NgModuleで宣言する必要があります（RC5 and later）、

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

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

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

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

上記の答え簡単な言葉では、@NgModuleの下に登録する必要があります

declarations: [
    AppComponent, YourNewComponentHere
  ]

app.module.ts

そのコンポーネントをimportすることを忘れないでください。

7
Extreme