CODEWITHSUNDEEP
angularangularjsangular-moduleangularjs-module
andhrew_
andhrew_

Reputation: 95

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 declarations 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?

I've created a stackBlitz to replicate my issue: https://shorturl.at/9T87G

Upvotes: 0

Views: 32

Answers (1)

Jacopo Sciampi
Jacopo Sciampi

Reputation: 3433

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.

This is indeed true but in your scenario it doesn't really matter. You are bootstrapping one of the two components. The app-root selector is not duplicated so there is no problem here.

If you try to load a component with the same selector in a lazy load way, then you will have problems.

Upvotes: 0

Related Questions