Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular NG8024 means the same input or output on a shared host directive is exposed under different public aliases along multiple hostDirectives composition paths. Find each path that exposes the binding, then use one alias consistently or stop exposing it where it is not needed.
What Angular NG8024 means
Angular reports NG8024 at compile time when its resolved host-directive tree reaches the same directive more than once and those paths map one of that directive’s inputs or outputs to different public names. The diagnostic identifies the directive and the input or output in conflict. See Angular’s NG8024 error reference.
A public alias is the name consumers use for an input or output exposed through a hostDirectives entry. For example, inputs: ['value: sharedValue'] exposes the directive’s value input under the public name sharedValue. Angular documents this colon-separated syntax in the Directive API.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Why the conflict occurs in a composition tree
Host directives can be composed transitively. When the same host directive appears along multiple paths, Angular merges those occurrences into one directive instance and merges their input and output mappings. A conflict arises if the paths expose the same underlying binding with different aliases. A common shape is a diamond: two directives both include one shared directive.
#1 Best Overall
Repeated inclusion alone is not the error. The problem is inconsistent public naming for the same binding in the merged composition. Host-directive inputs and outputs are not exposed automatically; each composition path explicitly lists the bindings it makes public. Angular explains these rules in its directive composition guide.
How do I fix Angular NG8024?
- Read the diagnostic. Note the shared directive and the specific input or output Angular says is conflicting.
- Trace every composition path. Search the codebase for
hostDirectivesentries that include that directive, including entries reached transitively through other directives. - Compare the exposure mappings. Check the relevant
inputsoroutputsarrays for each path and identify the different public aliases. - Choose one public API name. If consumers need the binding through each path, use the same alias everywhere.
- Remove unnecessary exposure. If a path does not need to make that binding available to consumers, remove it from that path’s exposure array.
- Compile again. Confirm that the metadata conflict is gone; other compilation errors, if any, need to be diagnosed separately.
Example: make aliases consistent
@Directive({
selector: '[dirA]',
hostDirectives: [{ directive: Shared, inputs: ['value: sharedValue'] }],
})
export class DirA {}
@Directive({
selector: '[dirB]',
hostDirectives: [{ directive: Shared, inputs: ['value: sharedValue'] }],
})
export class DirB {}Both paths expose Shared.value as sharedValue, so they agree on its public name. The conflicting shape would expose that same input as, for example, aliasA on one path and aliasB on the other. If one path does not need the input publicly available, omit value from that path’s inputs list instead.
Choose between one shared alias and no exposure
- Use the same alias on every path when consumers need to access the binding through those composition paths and one public name makes sense for all of them.
- Omit the binding from an exposure list when consumers do not need it through that path. This avoids publishing an unnecessary input or output as part of that path’s API.
How NG8024 differs from host-element binding collisions
NG8024 is about conflicting aliases in merged host-directive metadata. It is not the same as a template binding and a component host binding both targeting a host-element property or attribute. Those host-element cases involve which value takes effect; Angular covers them in its host elements guide. Fix NG8024 by resolving the public alias mappings in the composition tree, not by changing host-element binding precedence.
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.
