为什么我的项目会导致 "More than one component matched on this element." 错误？

Question

我在 StackBlitz 中有以下项目：

https://stackblitz.com/github/nickhodges/PhillyCCTodoApp/tree/Step20

我收到这个错误：

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 中，而不是在我的本地机器上。

Answer 1

在Angular中，我们不能在同一个元素上有两个组件。

错误表明 Angular 编译器找到了两个与 <mat-form-field 元素匹配的组件。

它也指向它发生的模块。

ng:///InputControlsModule/EmailInputComponent.html@1:2

并打印那些冲突的组件：

MatFormField,MatFormField

由于这些组件具有相同的名称，因此只能表示一个：

您以某种方式在 InputControlsModule 中导入了两个导出 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 一旦导入模块就会缓存：

What if I import the same module twice?

现在，看看您是如何导入这些模块的：

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

Answer 2

为了防止其他人在测试中遇到这个问题，我无意中在同一个测试中以两种不同的方式模拟了同一个组件。两个 mock 都有一个选择器。测试失败输出不清楚冲突的起因。我花了很多时间试图弄明白。希望这可以为其他人节省一两个小时：|

为什么我的项目会导致 "More than one component matched on this element." 错误？

Why does my project result in the "More than one component matched on this element." error?

angular

stackblitz