Can I make standalone one standalone component replace other standalone component globally?

Lets say I have standalone component

@Component({
selector:"app-link"
standalone:true
})
class AppLinkComponent ...


But now, due to a11y requirements I have to modify selector and implementation a little bit like

@Component({
selector: "a[appLink]",
standalone:true
})
class AppLinkComponent ...


However, I have and idea to try to be backward compatible for a little bit so the consumer will not have to update all occurences on the whole app, therfore i did (simplified)

@Component({
selector: "app-link",
standalone:true,
template: <a appLink><ng-content></ng-contend></a>
}
class AppLinkCompatComponent ...


That works just fine and as expected both components can be used. However, now maybe consumer does not have to modify templates to follow new selector, yet still all imports has to be replaced like this

@Component({
...
imports:[AppLinkComponent ] //replace this
imports:[AppLinkCompatComponent ] //with this
})
class SomeConsumingAppComponent....


is there a way, to somehow globally delcare that AppLinkCompatComponent is the new AppLinkComponent or something like that so there is no need to update all the imports?

It would be trivial with @NgModule as you would import module with 2 components - no problem. But since these days standalone=sexy, it is what it is.

Is the a shortcut to get it done?

Continue reading...