-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathNG0301.en.vtt
171 lines (115 loc) · 5.28 KB
/
NG0301.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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
WEBVTT
Kind: subtitles
Language: en
00:00.000 --> 00:02.500
Export of name directive not found.
00:02.500 --> 00:05.400
You may encounter this error when you reference a directive
00:05.400 --> 00:08.900
in a template that has not been defined, not properly imported,
00:08.900 --> 00:11.600
or when it's export name has not been declared.
00:11.600 --> 00:14.500
Let's take a look at a simple reproduction and solution.
00:14.500 --> 00:18.000
Then we'll take a closer look at ngModules to gain a deeper
00:18.000 --> 00:21.200
understanding of this issue, we can start debugging by finding
00:21.300 --> 00:25.400
the error in the browser console or in the terminal from the Angular compiler output.
00:25.600 --> 00:28.700
In either case, it will take you to the template that references
00:28.700 --> 00:33.000
the nonexistent directive and notice how the IDE is catching this error in advance.
00:33.200 --> 00:36.500
Once there rule out a simple typo as the cause of the error.
00:36.600 --> 00:42.100
A more likely cause is that the ngModule that exports that directive has not been imported yet.
00:42.300 --> 00:47.400
In this example, we're referencing ngForm, which is exported by Angular's Forms module.
00:47.600 --> 00:50.800
Therefore, we can address the problem by going into the app
00:50.900 --> 00:54.100
module and adding the Forms module to the imports array.
00:54.400 --> 00:59.200
Save the file, then notice how the warning in the component template has disappeared.
00:59.200 --> 01:04.700
That's because Angular has no way to know about that directive until it's been imported in the ngModule.
01:04.900 --> 01:08.000
If nothing changes, first, try restarting your local Dev server.
01:08.000 --> 01:12.400
If the issue remains double check that you're importing the proper ngModule.
01:12.600 --> 01:16.700
For example, we can search the directive name in the official Angular documentation.
01:16.700 --> 01:21.500
The documentation for that directive will tell us exactly which ngModule to import.
01:21.700 --> 01:24.900
Now, it's also worth noting that you may run into this error
01:24.900 --> 01:29.100
when you attempt to assign one of your own custom directives to a template variable.
01:29.100 --> 01:33.900
Let's take a look at a component and directive that both live within the same ngModule.
01:34.200 --> 01:36.800
The directive has a selector of app form.
01:37.100 --> 01:43.500
However, if we attempt to assign that directive to a template variable,
01:40.300 --> 01:45.700
it gives us a warning that there is no directive with export as set to App form.
01:46.100 --> 01:49.800
In order to use a directive as a template variable, we need
01:49.800 --> 01:53.200
to define a name in the export as option in the directive decorator,
01:53.200 --> 01:57.200
and once the export name has been defined, the error goes away.
01:57.200 --> 02:00.300
The key takeaway here is that when using a directive as a
02:00.300 --> 02:04.300
template variable, it must have an export name within the directive decorator.
02:04.400 --> 02:07.500
Now that we know how to debug this error, let's take a closer
02:07.500 --> 02:12.100
look at ngModules and directives to understand why it happens in the first place.
02:12.300 --> 02:15.700
When you create an ngModule on Angular, you declare components
02:15.700 --> 02:19.000
and director electives that are to be used privately within this module.
02:19.400 --> 02:24.800
But in many cases you have components and directives defined here that should be used outside of this module.
02:25.100 --> 02:28.400
You can make these classes public by adding them to the exports array.
02:28.400 --> 02:32.400
That's how you share components and directives between ngModules.
02:32.600 --> 02:35.700
But keep in mind that when working with Directives, you also
02:35.700 --> 02:38.400
need to consider how they'll be consumed in the template.
02:38.600 --> 02:42.500
For example, here, we have a directive with a class name of ngForm.
02:42.800 --> 02:47.600
If the goal is to use the directive as a property or attribute on an element,
02:47.600 --> 02:50.500
We define a selector as in a CSS selector
02:50.600 --> 02:54.200
like a class name or attribute, then the directive is instantiated
02:54.200 --> 02:56.600
when that selector is encountered in the template.
02:56.800 --> 03:02.400
However, if the goal is to use the directive as a template variable, that same mechanism doesn't work.
03:02.500 --> 03:06.400
Therefore, we set an export as name to make that name known
03:06.400 --> 03:10.300
to Angular, allowing it to instantiate the directive in a template variable.
03:10.400 --> 03:15.300
Let's go ahead and recap when you encounter the export of name directive not found.
03:15.300 --> 03:18.600
Error debug it by finding the template that references the directive.
03:18.600 --> 03:22.100
Then determine which ngModule needs to be imported.
03:22.100 --> 03:26.600
Once the module has been identified, it can be imported in your own local ngModule.
03:26.900 --> 03:30.900
If the issue is not related to an ngModule, import verified
03:31.000 --> 03:36.800
that the directive has an export as property set when used in the context of a template variable.
03:36.800 --> 03:40.700
For additional examples and details, reference the official Angular documentation.