为什么我的项目会导致"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，也导入了导出MatFormFieldModule的MatInputModule(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，所以不需要导入它

叉式堆垛机

Answer 2

为了防止其他人在测试中遇到这种情况，我意外地在同一测试中用两种不同的方式模拟了同一个组件。两个模型上都有一个选择器。测试失败的输出不清楚冲突的起因。我花了很多时间仔细查看，试图弄清楚。希望这能为其他人节省一两个小时：|