In which way does Angular resolve duplicate directive/component selectors?

Question

If I include two modules which both define a component or directive with the same selector (lets say a[routerLink]).

ModuleA defines directive with selector a[routerLink]

ModuleB defines directive with selector a[routerLink]

AppModule includes both modules and uses <a routerLink="..."></a> in its template.

Which directive is used then? How does Angular resolve which component/directive is chosen at runtime? Is the behaviour documented somewhere?

Answer 1

You should get this error message

More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: ${componentTypeNames.join(',')}

from https://github.com/angular/angular/blob/c8a1a14b87e5907458e8e87021e47f9796cb3257/packages/compiler/src/template_parser/template_parser.ts#L663-L665

You need to ensure yourself that components are declared or imported into a single NgModule do not conflict.

If conflicting components are not imported or declared in the same module there won't be a conflict.

See also https://github.com/angular/angular/issues/10552#issuecomment-242998180