为什么我的项目会导致“此元素上匹配了多个组件。”错误?

在我们 .

<mat-form-field 要素

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

并打印这些冲突的组件:

MatFormField,MatFormField

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

你不知怎的引进了 InputControlsModule 导出的两个不同模块 MatFormField 指令。

查看您的模块:

@NgModule({
  imports: [
    ...
    MatFormFieldModule,
    MatInputModule
  ],
  ...
})
export class InputControlsModule {}

我注意到你进口了 MatFormFieldModule 而且 MatInputModule 那个出口 ( 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

为了防止其他人在测试中遇到这种情况,我在同一个测试中意外地用两种不同的方式模拟了同一个组件。两个模拟都有一个选择器。关于冲突的起因,测试失败输出不清楚。我花了很多时间翻阅这本书,试图找出答案。希望这能为其他人节省一两个小时:|