12

我在 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 中，而不发生在我的本地计算机上。

4

2 回答 2

29

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

该错误表明 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 缓存了一次导入的模块：

如果我两次导入同一个模块怎么办？

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

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，您不需要导入它。

分叉的 Stackblitz

于 2018-12-23T02:01:38.087 回答
5

以防万一其他人在测试中遇到这种情况，我在同一个测试中意外地以两种不同的方式模拟了相同的组件。两个模拟都有一个选择器。测试失败的输出并不清楚冲突的起源。我花了很多时间试图找出答案。希望这可以为其他人节省一两个小时：|

于 2019-07-01T16:58:37.730 回答