Почему мой проект приводит к тому, что «этому элементу соответствует несколько компонентов».ошибка? - PullRequest
Новая
       12

Почему мой проект приводит к тому, что «этому элементу соответствует несколько компонентов».ошибка?

0 голосов
/ 23 декабря 2018

У меня есть следующий проект в 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, а не на моей локальной машине.

Ответы [ 2 ]

0 голосов
/ 01 июля 2019

На всякий случай, если кто-то еще столкнется с этим во время тестирования, у меня был один и тот же компонент, который был случайно промаркирован двумя разными способами в одном и том же тесте.У обоих издевательств был селектор на них.Вывод ошибки тестирования был неясен относительно происхождения конфликта.Я потратил кучу времени, просматривая попытки понять это.Надеюсь, это спасет кого-то еще час или два: |

0 голосов
/ 23 декабря 2018

В Angular у нас не может быть двух компонентов на одном элементе .

В сообщении об ошибке указывается, что Angular-компилятор обнаружил два компонента, которые соответствуют элементу <mat-form-field.

Также он указывает на модуль, где это произошло.

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

И печатает эти конфликтующие компоненты:

MatFormField, MatFormField

Поскольку эти компоненты имеют одно и то же имя, это может означать только одно:

Вы каким-то образом импортировали в InputControlsModule два разных модуля, которыедиректива export MatFormField.

Просмотр вашего модуля: 

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

Я заметил, что вы импортировали MatFormFieldModule, а также MatInputModule, который экспортирует MatFormFieldModule (* 1033)*

Но вы можете подумать: я прочитал документацию, и это не должно быть проблемой, поскольку 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 вам не нужно его импортировать.

разветвленный стек-блиц

...