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 the declarations that expose that binding, then use one alias consistently—or stop exposing it on paths where consumers do not need it.
What NG8024 means
Angular resolves host directives across a composition tree. If the same directive appears through more than one path, Angular merges those occurrences into one directive instance and merges their input and output mappings. NG8024 occurs when those paths expose the same binding with different public names. Angular reports the conflict at compile time and identifies the directive and the input or output involved. Angular’s NG8024 reference describes the diagnostic.
As an Amazon Associate I earn from qualifying purchases.
The public alias is the name consumers see through an inputs or outputs entry. For example, inputs: ['value: sharedValue'] exposes the directive’s value input as sharedValue. The colon separates the directive’s binding name from its public alias; see the Angular Directive API.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Why a composition tree can conflict
A common cause is a diamond-shaped composition: two directives each include the same shared directive, and each exposes one of its bindings under a different name. Because Angular merges repeated occurrences of that shared directive, both paths must agree on the public name for a binding they expose.
#1 Best Overall
For example, these declarations are compatible because both paths expose Shared.value as sharedValue:
@Directive({
selector: '[dirA]',
hostDirectives: [{ directive: Shared, inputs: ['value: sharedValue'] }],
})
export class DirA {}
@Directive({
selector: '[dirB]',
hostDirectives: [{ directive: Shared, inputs: ['value: sharedValue'] }],
})
export class DirB {}If one path instead maps value to aliasA and another maps it to aliasB, the resolved composition has no single public alias for that shared binding, so Angular reports NG8024. Repeated inclusion alone is not the error; the incompatible exposure mappings are.
How to find and fix the conflict
- Read the diagnostic. Note the shared directive and the input or output Angular names.
- Trace every composition path. Search for each
hostDirectivesentry that includes the shared directive, including entries reached transitively through other directives. - Compare the exposure mappings. Check the relevant
inputsoroutputsarrays for that binding and record each public alias. - Choose the public API. If consumers need the binding through every path, give it the same alias everywhere. If a path does not need to expose it, remove that binding from that path’s exposure array.
- Recompile. Confirm that the metadata conflict is gone; then address any separate compiler errors that remain.
For an output, apply the same rule using the relevant outputs entries: align the public alias across paths or omit the exposure where it is unnecessary. Host directive inputs and outputs are not exposed by default; a containing component or directive explicitly lists the bindings it makes available. The Directive composition API guide explains the composition and exposure model.
Recommended Free Tools
Choose between a shared alias and no exposure
| Fix | Use it when | Effect |
|---|---|---|
| Standardize on one alias | Consumers need the binding exposed through each composition path, and one API name works for all of them. | Each path exposes the same underlying binding under the same public name. |
| Omit the exposure on a path | Consumers using that path do not need the binding exposed there. | The binding is no longer part of that path’s public host-directive API. |
How NG8024 differs from host-element binding collisions
NG8024 is a conflict in host-directive metadata: two paths expose the same shared directive binding under different aliases. It is not the general case where a template binding and a component host binding target the same host-element property or attribute. Angular discusses those value-precedence cases separately in its host elements guide.
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.
