NG8003: Missing Reference Target means Angular cannot find a directive that provides the export name requested by your template. Use the export name shown in the diagnostic to locate the reference, then check whether the directive is available in that component or module and whether it exposes the expected exportAs name.
What Angular NG8003 means
Angular’s NG8003 error reference describes the problem as: “Angular can’t find a directive with {{ PLACEHOLDER }} export name.” The placeholder represents the export name Angular could not resolve. The error is commonly caused by a missing dependency import or by a directive that does not declare the exportAs name the template requests.
As an Amazon Associate I earn from qualifying purchases.
NG8003 is a compiler diagnostic. Angular identifies runtime error NG0301, “Export Not Found,” as its runtime equivalent.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsHow do I fix Angular NG8003?
- Read the missing export name. In the diagnostic, note the name Angular says it cannot find. Search for that name in the template reference and identify the component or module where the template is used. Angular recommends using this string to trace the relevant templates and modules.
- Check the directive’s availability. Verify that the dependency providing the directive is imported in the relevant Angular context. If the application uses NgModules, check the module imports for the module that provides it.
- Check the requested export name. Confirm that the directive declares the exact
exportAsname used by the template. If the directive exposes a different name—or no export name—the template reference cannot resolve it. - Restart the server if you just added an import. Angular advises restarting the server to see the change after adding an import.
Example: resolving a missing ngForm export
Angular’s example applies specifically when the missing export is ngForm. Import FormsModule from @angular/forms and include it in the relevant NgModule’s imports array:
#1 Best Overall
import { FormsModule } from '@angular/forms';Then add FormsModule to that module’s imports. Do not add it as a general fix for other missing export names; check which directive provides the name in your own diagnostic.
Missing import or missing exportAs?
- The directive is not available to the template: check whether its providing dependency is imported in the relevant Angular context.
- The directive is available but the name still cannot be resolved: check whether the directive declares the exact export name the template requests.
The export string in the error is the best starting point for distinguishing these causes: trace where the name is used, then verify both the directive’s availability and its declared export name.
Quick Recap
Rank #3
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
