0

I have a scenario where I need multiple apps on one single page but they have to be optional.

So I have 3 root-tags: , and

but they will not always be all there, e.g. main-root could be missing on one page.

So I created 3 NgModules:

@NgModule({
  imports: [ 
    BrowserModule, 
    HttpModule, 
  ],
  declarations: [ MainComponent, InfoComponent, UserComponent ],
})
export class MainModule { }

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ SubComponent ],
})
export class SubModule { }

@NgModule({
  imports: [ BrowserModule, MainModule, SubModule ],
  declarations: [ AppComponent  ],
  entryComponents: [ AppComponent, MainComponent, SubComponent ]
})
export class AppModule {

  ngDoBootstrap(appRef: ApplicationRef) {
    if(document.querySelector('app-root')) {
      appRef.bootstrap(AppComponent);
    }
    if(document.querySelector('main-root')) {
      appRef.bootstrap(MainComponent);
    }
    if(document.querySelector('sub-root')) {
      appRef.bootstrap(SubComponent);
    }

  }
}

I already have a ngDoBootstrap method which makes possible (at least seems to) to just bootstrap the app that has its selector on the page. So far, so good.

Now comes routing in the game! So inside of the "MainModule" I put:

    RouterModule,
    RouterModule.forRoot(routes, {useHash: true})

and add my routes and router-outlet, which works as well (as long as all root-apps are on the page)!

The trouble begins when I have a page that misses the main-app (the one with the routing). Now I get an error:

Error: Cannot find primary outlet....

This is understandable on one side (the resides in the main-app html) but on the other side I thought that if the main-app is not found on the page it isn't even bootstrapped so why is it bothering?

I really really hope that someone understands what I tried to explain, or maybe has done something similar? I'm completely open to suggestions as I am still implementing this as a proof-of-concept...

Felix
  • 43
  • 6
  • _where I need multiple apps on one single page_ - why? can you describe more about business requirements? – Max Koretskyi Aug 07 '17 at 16:58
  • I am about to implement some business logic into Wordpress. In the end there will be one (Wordpress) page with the "main" things to do, but I want some Information in the header (like logged-in user). – Felix Aug 08 '17 at 07:02

0 Answers0