Angular schemasについて

schemasプロパティ

schemasプロパティには、Angularのコンポーネントやディレクティブではない、Angular外で定義された要素とプロパティをHTMLパーサがどのように取り扱うか指定します。

SchemaMetadata型のプロパティにおいて、下表の2種類が指定できます。

プロパティ	挙動
NO_ERRORS_SCHEMA	すべての要素とプロパティを許可します。
CUSTOM_ELEMENTS_SCHEMA	'-' を含む要素をカスタムエレメントとして扱い、それのみを許可します。

NO_ERRORS_SCHEMA

テスト対象となるコンポーネントのテンプレート内で、他のコンポーネントを使用しているケースを想定する。

使用している子コンポーネントをTestBedに追加していない場合、Angularコンパイラはテスト実行時に、子コンポーネントのタグを認識できず例外を投げます。

このままでは、毎回すべての子コンポーネントをTestBedに記述する必要があり、準備が煩雑になってしまいます。そこで、テストモジュールのメタデータにschemasプロパティを追加して、その配列内にNO_ERRORS_SCHEMAを記述することで、認識できない要素と属性を無視するようにコンパイラに指示します。

NO_ERRORS_SCHEMAを追加するだけで、無関係のコンポーネントやディレクティブをTestBed内に追記する必要がなくなります。

hoge.spec.ts

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ BaseHeaderComponent ],
    schemas: [NO_ERRORS_SCHEMA]//ここ追加
  })
  .compileComponents();
 }));