web-dev-qa-db-fra.com

Pourquoi mon projet se traduit-il par «Plus d'un composant correspondant à cet élément». Erreur?

J'ai le projet suivant dans un StackBlitz:

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

Je reçois cette erreur:

Template parse errors:
More than one component matched on this element.
Make sure that only one component's selector can match a given element.

J'ai googlé mon petit cœur, mais je n'arrive pas à trouver de solution.

Que signifie cette erreur et comment la corriger?

Je dois noter que l'erreur se produit uniquement dans StackBlitz et non sur ma machine locale.

angularstackblitz
7
Nick Hodges

Dans Angular nous nous ne pouvons pas avoir deux composants sur le même élément .

L'erreur indique que Angular a trouvé deux composants qui correspondent à <mat-form-field élément.

Il indique également le module où cela s'est produit.

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

Et imprime ces composants en conflit:

MatFormField, MatFormField

Étant donné que ces composants ont le même nom, cela ne peut signifier qu'un seul:

Vous avez en quelque sorte importé dans InputControlsModule deux modules différents qui exportent la directive MatFormField.

En regardant votre module:

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

J'ai remarqué que vous avez importé MatFormFieldModule et également MatInputModule qui exportent MatFormFieldModule ( https://github.com/angular/material2/blob/8050f633b56b6c048fc72dad2ab79304afdfad19/src/ lib/input/input-module.ts # L29 )

Mais vous pouvez penser: j'ai lu la documentation et cela ne devrait pas poser de problème car Angular met en cache le module une fois importé:

Et si j'importe deux fois le même module?

Maintenant, regardez comment vous importez ces modules:

import { ...MatInputModule} from '@angular/material';
                                        |
                                material.umd.js

import { MatFormFieldModule } from '@angular/material/form-field';
                                                  |
                                         material-form-field.umd.js

Comme vous pouvez le deviner puisque ces modules de différents fichiers js sont différents.

Donc, pour y remédier, vous devez les importer du même bundle.

import {
  ...
  MatInputModule,
  MatFormFieldModule 
} from '@angular/material';

Mais puisque MatInputModule exporte déjà MatFormFieldModule vous n'avez pas besoin de l'importer.

Stackblitz fourch

2
yurzui