Why does my project result in the "More than one component matched on this element." error?
In Angular we can't have two components on the same element.
The error states that Angular compiler found two components that match <mat-form-field
element.
Also it points to the module where it happened.
ng:///InputControlsModule/EmailInputComponent.html@1:2
And prints those conflicting components:
MatFormField,MatFormField
Since those components have the same name it can mean only one:
You somehow imported in InputControlsModule
two different modules that export MatFormField
directive.
Looking at your module:
@NgModule({
imports: [
...
MatFormFieldModule,
MatInputModule
],
...
})
export class InputControlsModule {}
I noticed that you imported MatFormFieldModule
and also MatInputModule
that export MatFormFieldModule
(https://github.com/angular/material2/blob/8050f633b56b6c048fc72dad2ab79304afdfad19/src/lib/input/input-module.ts#L29)
But you may think: I read documentation and it shouldn't be a problem since Angular caches once imported module:
What if I import the same module twice?
Now, take a look at how you imports those modules:
import { ...MatInputModule} from '@angular/material';
|
material.umd.js
import { MatFormFieldModule } from '@angular/material/form-field';
|
material-form-field.umd.js
As you can guess since those modules from different js files they are different.
So in order to fix it you should import them from the same bundle.
import {
...
MatInputModule,
MatFormFieldModule
} from '@angular/material';
But since MatInputModule
already exports MatFormFieldModule
you do not need to import it.
Forked Stackblitz
Just in case anyone else runs into this with testing, I had the same component mocked out two different ways in the same test by accident. Both mocks had a selector on them. The testing failure output was unclear regarding the origin of the conflict. I spent a bunch of time looking through the trying to figure it out. Hope this saves someone else an hour or two :|