Why angular doesn't throw a selector collision error in this scenario?

Inspecting some code from my project I've encountered a strange scenario in which I think angular should throw an error at build time.

In my angular app I have this index.html file with all the required code and my app selector


html
head
body

my-root-app-selector



My mainTs file is bootStrapping AppModule. My appModuleTs has the following code

ngDoBootstrap(appRef: ApplicationRef) {
if(conditionTrue) {
appRef.bootstrap(AppComponent1);
}

appRef.bootstrap(AppComponent2);
}


in this module in imports are declared those two components [AppComponent1, AppComponent2];

My issue is that both shares the same selector

my-root-app-selector
​

All the angular documentation points towards that there should not be any components that shares the same selector even so angular doesn't have any problem with this code.

What am I missing here?

Continue reading...