9

As per my knowledge, there can be only one entry point of an application. As shown in the code snippet given below we are passing an array in the bootstrap key which decide the entry point of the application.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent, MyComboboxComponent, 
                    CollapsibleDirective, CustomCurrencyPipe],
  imports: [BrowserModule],
  providers: [UserService, LessonsService],
  bootstrap: [AppComponent]

})
export class AppModule {

}

P.S: I am learning Angular 2 and the question may sound silly :)

Improve this question
1

2 Answers 2

Reset to default
11

You can pass as many bootstrap components as you want. You will simply end up with several independent components trees:

bootstrap: [AComponent, BComponent]

        RootModuleInjector
                |
                |
       ApplicationRef.views
       /                   \
      /                     \
   AComponent              BComponent

Also see What are the implications of bootstrapping multiple components

When running change detection Angular will run change detection for each tree separately:

class ApplicationRef {
   tick(): void {
    ...
    try {
      this._runningTick = true;
      // here this._views.length equals to 2
      this._views.forEach((view) => view.detectChanges());

You can even add new root component to the ApplicationRef manually if you want to:

const componentRef = componentFactoryResolver.resolveComponentFactory(SomeComponent)
applicationRef.attachView(componentRef.hostView);

        RootModuleInjector
                |
                |
       ApplicationRef.views
       /        |           \
      /         |            \
AComponent  SomeComponent   BComponent

If you need to share some data between the root components, you can define a provider on the root module which will be used to create a RootModuleInjector:

@NgModule({
    providers: [ServiceSharedBetweenRootComponents]
}
export class AppModule {}

And then you'll be able to inject it into every root component:

export class AComponent {
    constructor(service: ServiceSharedBetweenRootComponents)
Improve this answer
Sign up to request clarification or add additional context in comments.

17 Comments

can two or more independent trees with a single injector communicate? How?
just define a service on the root module and inject it into each component
as shown in your diagram AComponent and BComponent. which one is the root module? do you mean to inject service at @NGModule level in providers?
@VikasBansal "if I inject any service in root component" not the root component, the root module. The providers in the root module (the same module that you bootstrap the components) are shared across the app
Many thanks for your time and the amazing explanation. It is good to know these deep things. :)
|
4

there can be only one entry point of an application

No. You can instantiate multiple components as entry points in your application.

Example: https://stackoverflow.com/a/36566919/5706293

Here is an example of how we can communicate between root components

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.