StackBlitzに次のプロジェクトがあります。
https://stackblitz.com/github/nickhodges/PhillyCCTodoApp/tree/Step2
私はこのエラーを受け取ります:
Template parse errors:
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
私は私の小さな心をグーグルで調べましたが、解決策を見つけることができないようです。
このエラーの意味と修正方法を教えてください。
このエラーはStackBlitzでのみ発生し、ローカルマシンでは発生しないことに注意してください。
Angularでは同じ要素に2つのコンポーネントを含めることはできません。
エラーは、Angularコンパイラが<mat-form-field
要素に一致する2つのコンポーネントを検出したことを示しています。
また、それが発生したモジュールも指します。
ng:///InputControlsModule/EmailInputComponent.html@1:2
そしてそれらの矛盾するコンポーネントを出力します:
MatFormField、MatFormField
これらのコンポーネントは同じ名前を持っているので、1つしか意味しません。
InputControlsModule
ディレクティブをエクスポートする2つの異なるモジュールをMatFormField
にインポートしました。
モジュールを見る:
@NgModule({
imports: [
...
MatFormFieldModule,
MatInputModule
],
...
})
export class InputControlsModule {}
MatFormFieldModule
とMatInputModule
をインポートしたMatFormFieldModule
( https://github.com/angular/material2/blob/8050f633b56b6c048fc72dad2ab79304afdfad19/src/ lib/input/input-module.ts#L29 )
しかし、あなたが考えるかもしれません:インポートされたモジュールをAngularがキャッシュするので、私はドキュメントを読み、それは問題ではないはずです:
次に、これらのモジュールをインポートする方法を確認します。
import { ...MatInputModule} from '@angular/material';
|
material.umd.js
import { MatFormFieldModule } from '@angular/material/form-field';
|
material-form-field.umd.js
あなたが推測できるように、異なるjsファイルからのそれらのモジュールは異なるので。
したがって、それを修正するには、同じバンドルからインポートする必要があります。
import {
...
MatInputModule,
MatFormFieldModule
} from '@angular/material';
ただし、MatInputModule
はすでにMatFormFieldModule
をエクスポートしているため、インポートする必要はありません。