[Debugging] Export of name {directive} not found

[Debugging] Export of name {directive} not found

[Debugging] Export of name {directive} not found

In this video, you’ll learn what the error “Export of name {directive} not found” means, how to debug it, and prevent it from happening in the future.


Content

0 ->
0.57 -> SPEAKER: "Export of name directive not found."
2.88 -> You may encounter this error when
4.35 -> you reference a directive in a template that has not
6.81 -> been defined, not properly imported,
9.09 -> or when its export name has not been declared.
11.88 -> Let's take a look at a simple reproduction and solution.
14.76 -> Then we'll take a closer look at NgModules
17.22 -> to gain a deeper understanding of this issue.
19.59 -> We can start debugging by finding the error
21.75 -> in the browser console or in the terminal from the Angular
24.54 -> compiler output.
25.65 -> In either case, it will take you to the template that references
28.77 -> the non-existent directive.
30.06 -> And notice how the IDE is catching this error in advance.
33.27 -> Once there, rule out a simple typo as the cause of the error.
36.75 -> A more likely cause is that the NgModule
39.3 -> that exports that directive has not been imported yet.
42.39 -> In this example, we're referencing
44.01 -> ngForm, which is exported by Angular's FormsModule.
47.67 -> Therefore, we can address the problem
49.62 -> by going into the app module and adding the FormsModule
53.16 -> to the imports array.
54.6 -> Save the file, then notice how the warning and the component
57.9 -> template has disappeared.
59.46 -> That's because Angular has no way
61.2 -> to know about that directive until it's
63.06 -> been imported in the NgModule.
65.04 -> If nothing changes, first try restarting your local dev
68.01 -> server.
68.52 -> If the issue remains, double check that you're
70.77 -> importing the proper NgModule.
72.72 -> For example, we can search the directive name
75.09 -> in the official Angular documentation.
77.07 -> The documentation for that directive
78.99 -> will tell us exactly which NgModule to import.
81.9 -> Now, it's also worth noting that you may run into this error
85.02 -> when you attempt to assign one of your own custom directives
87.84 -> to a template variable.
89.38 -> Let's take a look at a component and directive that both live
92.61 -> within the same NgModule.
94.35 -> The directive has a selector of appForm.
97.21 -> However, if we attempt to assign that directive
99.63 -> to a template variable, it gives us a warning
102.27 -> that there is no directive with "exportAs" set to "appForm."
106.23 -> In order to use a directive as a template variable,
109.41 -> we need to define a name in the exportAs option
112.5 -> in the directive decorator.
113.91 -> And once the export name has been defined,
116.22 -> the error goes away.
117.51 -> The key takeaway here is that when
119.16 -> using a directive as a template variable,
121.47 -> it must have an export name within the directive decorator.
124.59 -> Now that we know how to debug this error,
126.67 -> let's take a closer look at NgModules and directives
129.96 -> to understand why it happens in the first place.
132.39 -> When you create an NgModule in Angular,
134.64 -> you declare components and directives
136.74 -> that are to be used privately within this module.
139.48 -> But in many cases, you have components and directives
142.11 -> defined here that should be used outside of this module.
145.3 -> You can make these classes public
146.91 -> by adding them to the exports array.
149.13 -> And that's how you share components and directives
151.23 -> between NgModules.
152.67 -> But keep in mind that when working with directives,
155.22 -> you also need to consider how they'll
157.05 -> be consumed in the template.
158.61 -> For example, here we have a directive
160.83 -> with a class name of NgForm.
162.96 -> If the goal is to use the directive as a property
165.81 -> or attribute on an element, we define a selector
169.08 -> as in a CSS selector, like a class name or attribute.
172.71 -> Then the directive is instantiated when that selector
175.23 -> is encountered in the template.
176.89 -> However, if the goal is to use the directive
179.37 -> as a template variable, that same mechanism doesn't work.
182.83 -> Therefore, we set an export as name
185.28 -> to make that name known to Angular,
187.2 -> allowing it to instantiate the directive
189.15 -> in a template variable.
190.93 -> Let's go ahead and recap.
192.13 -> When you encounter the "Export of name
194.31 -> directive not found" error, debug it
196.65 -> by finding the template that references the directive.
199.26 -> Then determine which NgModule needs to be imported.
202.26 -> Once the module has been identified,
204.12 -> it can be imported in your own local NgModule.
207.06 -> If the issue is not related to an NgModule import,
210.45 -> verify that the directive has an exportAs property set
214.29 -> when used in the context of a template variable.
217.05 -> For additional examples and details,
218.73 -> reference the official Angular documentation.

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