[Debugging] Multiple components match node with tag name {element}

[Debugging] Multiple components match node with tag name {element}

[Debugging] Multiple components match node with tag name {element}

In this video, you’ll learn what the error “Multiple components match node with tag name {element}” means, how to debug it, and prevent it from happening in the future.


Content

0 -> SPEAKER: "Multiple components match node with tagname."
2.88 -> When you encounter this error, it
4.29 -> means two or more components use the same element name.
7.2 -> The element selectors of all components within an NgModule
10.59 -> must be unique, because when there's a name collision,
13.44 -> Angular has no way of knowing which component
15.66 -> to render in the template.
17.21 -> Let's take a look at a simple reproduction and quick fix.
20.43 -> In the code, we have an icon component
22.92 -> with a selector name of mat-icon.
26.04 -> The component is then declared with that selector in the app
28.86 -> component template.
30.01 -> But when we attempt to run the app, we get the error
32.369 -> "Multiple components match node with tagname mat-icon."
35.91 -> Your IDE should be able to catch the error in advance.
39.21 -> Notice how when we hover over the red underline,
41.67 -> we get the feedback that more than one component
43.98 -> matched on this element.
45.27 -> In addition, it tells us exactly which classes are in conflict.
48.69 -> In this case, the mat-icon and the icon component.
52.02 -> Alternatively, we can debug from the error in the browser
55.14 -> console.
55.83 -> Find the link to the template in the stack trace
57.87 -> to determine which line of code caused the issue.
60.4 -> Then we need to figure out which two components share
62.85 -> the same selector.
63.93 -> The first technique you might try is a global search.
66.78 -> In VS Code, use Control-Shift-F to bring up the Search bar
70.32 -> and look for any component files that use that selector name.
73.41 -> If you have two conflicting components in your code base,
75.93 -> simply rename one of them.
77.62 -> However, in this demo, we only have one match.
80.61 -> And that means the collision is caused by a third party
83.49 -> library.
84.15 -> Because you likely don't have control
85.89 -> over the name of a component in a third party library,
88.56 -> your only option is to rename your local component.
91.56 -> Notice how when we rename mat-icon to app-icon the error
95.37 -> goes away.
96.1 -> Now, there are a couple of best practices
97.98 -> that we can follow to prevent this error from ever happening.
100.77 -> Selectors should always be formatted in kebab case.
103.86 -> Even though it is possible to use a single word
106.26 -> as a selector, it's generally better
108.33 -> to use a consistent set of characters to prefix it.
111.33 -> When you use the Angular CLI, it will prefix your component
114.57 -> names with "app" by default. This convention makes
117.24 -> it easy to distinguish which components are
119.46 -> local to your code base and which components are external,
122.61 -> like Material, which are prefixed with "mat."
125.22 -> Another best practice that can help here
126.99 -> is one component per file.
128.789 -> When you have one component per file,
130.68 -> the file name generally corresponds
132.84 -> to the selector name, which makes
134.4 -> it more difficult to end up with two components in your code
137.28 -> base that share a selector name.
139.29 -> Let's go ahead and recap.
140.68 -> When you encounter the "Multiple components match node
143.52 -> with tagname error," you have a name collision
145.89 -> between two or more components which will likely
148.14 -> require you to change the selector name in one
150.57 -> of your local components.
151.99 -> Make sure to follow best practices to avoid issues
154.53 -> like this, and refer to the Angular style guide
156.87 -> in the official documentation for additional details.

Source: https://www.youtube.com/watch?v=z_3Z5mOm59I