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

Question

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 main.ts file is bootStrapping AppModule. My app.module.ts has the following code:

@NgModule({
  declarations: [AppComponent1, AppComponent2],
  imports: [BrowserModule],
})
export class AppModule implements DoBootstrap {
  ngDoBootstrap(appRef: ApplicationRef) {
    if(conditionTrue) {
      appRef.bootstrap(AppComponent1);
    }
  
    appRef.bootstrap(AppComponent2);
  }
}

My issue is that both components share 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, but 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

what is your angular version, are you looking at the docs of the specific version you have? — Naren Murali
– Naren Murali, Commented Feb 28 at 7:06
I think because bootstrap happens only once you are not getting any error, the new bootstrap replaces the old one, try adding AppComponent2 and AppComponent1 in the declarations array of app module and you will get the error. — Naren Murali
– Naren Murali, Commented Feb 28 at 7:44
declarations in the app.moodule.ts is [AppComponent1, AppComponent2] — andhrew_
– andhrew_, Commented Feb 28 at 10:53

Jacopo Sciampi · Accepted Answer · 2025-02-28 09:47:30Z

0

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.

answered Feb 28 at 9:47

Jacopo Sciampi

3,4942 gold badges26 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

andhrew_ Feb 28 at 11:00

Why is that? Because my thinking goes like that: - angular loads index.html in which I'm using app-root. - main.ts is bootstrapping AppModule platformBrowserDynamic().bootstrapModule(AppModule) - and in app module I have declared this two components with the same selector and since app-root is shared by those two components it should break at build.

andhrew_ Feb 28 at 11:07

and beside that how does it angular knows what component to use in index.html? Index.html being my app starting point

Jacopo Sciampi Feb 28 at 15:16

It does not break since only one of the component is getting bootstrapped at runtime

andhrew_ Feb 28 at 15:48

Ok, I can understand this building phase. But what about two components with the same selector declared in the same module. Parsing the module declarations shouldn't break the build? Angular let's you create as many components as you want with the same selector and unless you're using the selector no error is thrown?

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related