Angular run multiple apps in 1 project, Optionality bootstrap components

most posts you'll find talk about actually managing 2 totally different apps under 1 project, and that's best described here: https://yakovfain.com/2017/04/06/angular-cli-multiple-apps-in-the-same-project/ .

but what i really want to achieve is behavior more close to angular 1.x where you could write like 50 directives / components and put just set the ng-app attribute in your Aspx master page and it would just catch whatever is in, so in each page there were 2-10 directives and all was good.

with the angular-cli today its not native possible, but kouasda found a solution, where you test the page for the your angular tags and bootstrap them accordingly, as told in this issue and shown in this plnk.

eventually your app.module should look like this


import {BrowserModule, DOCUMENT} from '@angular/platform-browser'
import {NgModule, Inject, ApplicationRef} from '@angular/core'

import {AppRootOne} from './app-root-one.component'
import {AppRootTwo} from './app-root-two.component'
@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppRootOne, AppRootTwo ],
  entryComponents: [ AppRootOne, AppRootTwo ]
})
export class AppModule {
  private browser_document;
  ngDoBootstrap(appRef:ApplicationRef){
    if(this.browser_document
         .getElementsByTagName('app-root-one').length > 0){

       appRef.bootstrap(AppRootOne);
    }
    if(this.browser_document
         .getElementsByTagName('app-root-two').length > 0){

       appRef.bootstrap(AppRootTwo);
    }
  }
  constructor(@Inject(DOCUMENT) private document: any){
    this.browser_document = document;
  }
}

Comments

Popular posts from this blog

OverTheWire[.com] Natas Walkthrough - JUST HINT, NO SPOILERS

SOLVED The item could not be indexed successfully because the item failed in the indexing subsystem

Asp.Net Ending Response options, Response.End() vs CompleteRequest()