Search code examples
angularserviceangular-material

Error: Multiple components match node with tagname app-contact

I have an Angular Material application where I have a list of cards, each representing a Contact. that is, an object with various attributes, such as first name, last name, email, image, etc.

To display this list, I simply iterate over the list of Contacts:

<mat-list role="list" class="contacts-container-box">
  <div class="application-box" role="listitem" *ngFor="let contact of contacts">
    <app-contact [contact]="contact"></app-contact>
  </div>
</mat-list>

The app-contact component is then responsible to show the details of each Contact. However, if I try to run the application as it is, I get no errors at compile time, but in the browser console I get the following: error

I tried to reproduce the issue on StackBlitz, and I get this:

error2

Anyway, it doesn't work as expected. Notice that this error only occurs if I uncomment the method getContactImage() in the ContactsService, if I comment it everything works except, of course, for the image which is not loaded.

Stackblitz demo: https://stackblitz.com/edit/angular-ivy-tnb6rv

Solution

  • This happened to me because I had a console.log() in constructor of a variable from @Input.

    Probably this problem is already solved, but here's information for other people