How to bootstrap two angular apps in one asp.net mvc application

Problem:

Angular is currently the most popular javascript framework for building SPA. In its 1.x version, you can easily embed the "ng-app" to different web pages and bootstrap several SPAs in one web application. But Angular 2 has total different architecture from 1.x, how we are going to solve this problems.

Scenario:

Suppose we have build a asp.net mvc web application with two action pages:

http://localhost/,  http://localhost/admin

this first one is used as open accessbile public page and second one is for site admin.

We need to implement SPA for each page, we need bootstrap them according to which page is rendered from Server.

Solution:

1. Pass the url router path of asp.net mvc as an attribute to the top of the Angular selector,

    For Admin page:

       <div id="admin">

            <app-admin defaultpath="@Url.RouteUrl("admin")">loading...</app-admin>

       </div>

    For default page:

       <div id="default">

            <app>loading...</app>

      </div>

2. In component class use ViewContainerRef to get the defaultPath value and navigate to the it

@Component({

    selector: 'app-admin',
    template: require('./appadmin.component.html'),
    styles: [require('./appadmin.component.css')],
    encapsulation: ViewEncapsulation.None
})
export class AppAdminComponent implements OnInit {

    ngOnInit(): void {
        if (this.defaultpath != null && this.defaultpath !== undefined)
            this.router.navigateByUrl(this.defaultpath);
    }

    defaultpath: string = 'admin'

    constructor(private router: Router,  vcr: ViewContainerRef) {        

        let att = vcr.element.nativeElement.getAttribute('defaultpath');
        if (att !== null && att !== undefined) {
            this.defaultpath = att;
        }

}

3. Create separated bootstrap module for admin and default,  AppAdminModule,  AppModule with their own route defined

const adminRoutes: Routes = [
    { path: 'admin', component: SingleReportComponent, loadChildren: '../generalReport/generalReport.module#GeneralReportModule' },    
    { path: '', redirectTo: 'admin', pathMatch:'full' },
    { path: '**', component: NotFoundComponent }
];

@NgModule({
    providers: [],
    bootstrap: [AppAdminComponent],
    declarations: [
        AppAdminComponent, SpinnerComponent, NotFoundComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        CommonModule,
        ModelModule.forRoot(),
        FormsModule,
NgIdleKeepaliveModule.forRoot(),
Ng2BreadcrumbModule.forRoot(),
ControlModule,
        GeneralReportModule, 
        RouterModule.forRoot(appReportRoutes)
    ],
    exports: [AppReportComponent]
})
export class AppReportModule {
}

4. Boostrap according the defaultpath's value in main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();

const bootApplication = () => {
    let appboost = document.querySelector("#admin");
    if (appboost !== null) {
        platform.bootstrapModule(AppAdminModule);
    }
    else {
        let appreportboost = document.querySelector("#app");
        if (appreportboost !== null) {
            platform.bootstrapModule(AppModule);
        }
    }
};

if (document.readyState === 'complete') {
    bootApplication();    
}
else {
    document.addEventListener('DOMContentLoaded', bootApplication);
}