web-dev-qa-db-ja.com

プロジェクトで「この要素に複数のコンポーネントが一致する」という結果になるのはなぜですか。エラー?

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でのみ発生し、ローカルマシンでは発生しないことに注意してください。

7
Nick Hodges

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

MatFormFieldModuleMatInputModuleをインポートしたMatFormFieldModulehttps://github.com/angular/material2/blob/8050f633b56b6c048fc72dad2ab79304afdfad19/src/ lib/input/input-module.ts#L29

しかし、あなたが考えるかもしれません:インポートされたモジュールをAngularがキャッシュするので、私はドキュメントを読み、それは問題ではないはずです:

同じモジュールを2回インポートするとどうなりますか?

次に、これらのモジュールをインポートする方法を確認します。

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をエクスポートしているため、インポートする必要はありません。

Forked Stackblitz

2
yurzui