-
Notifications
You must be signed in to change notification settings - Fork 1
/
NG0300.en.vtt
157 lines (106 loc) · 4.2 KB
/
NG0300.en.vtt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
WEBVTT
Kind: subtitles
Language: en
00:00.000 --> 00:02.700
Multiple components match node with tag name.
00:02.700 --> 00:06.900
When you encounter this error, it means two or more components use the same element name.
00:07.000 --> 00:10.400
The element selectors of all components within an ngModule
00:10.400 --> 00:13.800
must be unique because when there's a name collision, Angular
00:13.800 --> 00:16.800
has no way of knowing which component to render in the template.
00:16.900 --> 00:21.100
Let's take a look at a simple reproduction and quick fix in the code.
00:21.100 --> 00:25.600
We have an icon component with a selector name of mat-icon.
00:25.600 --> 00:28.600
The component has been declared with that selector in the
00:28.600 --> 00:32.200
app component template, but when we attempt to\h
run the app, we get the error.
00:32.300 --> 00:36.200
Multiple components match node with tag name mat-icon your
00:36.200 --> 00:39.000
IDE should be able to catch the error in advance.
00:39.000 --> 00:42.100
Notice how when we Hover over the red underline, we get the
00:42.100 --> 00:45.100
feedback that more than one component matched on this element.
00:45.200 --> 00:48.500
In addition, it tells us exactly which classes are in conflict.
00:48.700 --> 00:51.600
In this case, the mat-icon and the icon component.
00:51.800 --> 00:55.100
Alternatively, we can debug from the error in the browser
00:55.100 --> 00:57.800
console. Find the link to the template in the stack trace
00:57.800 --> 01:00.000
to determine which line of code cause the issue.
01:00.100 --> 01:03.600
Then we need to figure out which two components share the same selector.
01:03.600 --> 01:07.500
The first technique you might try is a global search in VS code.
01:07.500 --> 01:10.900
Use Control Shift F to bring up the search bar and look for
01:10.900 --> 01:13.200
any component files that use that selector name.
01:13.300 --> 01:15.800
If you have two conflicting components in your code base,
01:15.800 --> 01:17.300
simply rename one of them.
01:17.300 --> 01:21.200
However, in this demo, we only have one match, and that means
01:21.200 --> 01:23.900
the collision is caused by a third party library.
01:23.900 --> 01:26.600
Because you likely don't have control over the name of a
01:26.600 --> 01:28.300
component in a third party library.
01:28.300 --> 01:31.400
Your only option is to rename your local component.
01:31.400 --> 01:35.800
Notice how when we rename mat-icon to app-icon, the error goes away.
01:36.000 --> 01:38.700
Now, there are a couple of best practices that we can follow
01:38.700 --> 01:40.600
to prevent this error from ever happening.
01:40.600 --> 01:42.700
Selectors should always be formatted.
01:42.700 --> 01:45.900
In Kebab case, even though it is possible to use a single
01:45.900 --> 01:49.400
word as a selector, it's generally better to use a consistent
01:49.400 --> 01:51.300
set of characters to pre fix it.
01:51.400 --> 01:55.300
When you use the Angular CLI, it will prefix your component names with 'app'.
01:55.400 --> 01:58.300
By default, this convention makes it easy to distinguish
01:58.300 --> 02:01.700
which components are local to your code base and which components
02:01.700 --> 02:05.000
are external like material, which are prefixed with 'mat'.
02:05.100 --> 02:08.500
Another best practice that can help here is one component per file.
02:08.700 --> 02:12.000
When you have one component per file, the file name generally
02:12.100 --> 02:15.200
corresponds to the selector name, which makes it more difficult
02:15.200 --> 02:18.700
to end up with two components in your code base that share a selector name.
02:18.900 --> 02:20.300
Let's go ahead and recap.
02:20.300 --> 02:23.700
When you encounter the multiple components match node with
02:23.700 --> 02:26.500
tag name error, you have a name collision between two or
02:26.500 --> 02:29.200
more components, which will likely require you to change
02:29.200 --> 02:31.600
the selector name in one of your local components.
02:31.800 --> 02:34.900
Make sure to follow best practices to avoid issues like this
02:34.900 --> 02:39.300
and refer to the Angular Style Guide and the official documentation for additional details.