Manually bootstrap an Angular application

Suppose we are working on a big JavaScript single page application and we got a requirement to implement some of the modules of our application in Angular by manually boostrapping and directly running them on browser. We can easily do this manually boostrapping AppModule and it would be our root module.

But what if we again got the requirement to develop few more modules in Angular in same JavaScript application? Well that can be complex then because if we create more component inside our app component then it'll become very slow while bootstrapping app.component.

So lets consider we have two component i.e. UserComponent and GroupComponent and we've to bootstrap them manually in our JavaScript file. So we've to decide which component should run in the application.

Some key concepts to note here:

• platformBrowserDynamic() : It creates platform. The entry point for angular web page. Each page has exactly one platform.
• boostrapModule(): It creates the application.

Example: UserModule and GroupModule

File Name: user.module.ts:

import {...}

@NgModule({

Imports:[BrowserModule,FormsModule],

Declarations:[UserComponent, AddUserComponent, ManageUserComponent],

Providers:[UserService],

Bootstrap: [UserComponent]

})

export class UserModule

So we have created UserModule and bootstrapping User Component  for it. So now lets create UserComponent

File Name: UserComponent.ts

Import { Component, OnInit} from '@angular/core';

@Component({

Selector: "app-user",

Template:`<div>Test</div>`

})

export class UserComponent implements onInit{

// some code...

}

Similarly, create GroupModule and its component

File Name: GroupModule.ts

import {...}

@NgModule({

Imports:[BrowserModule,FormsModule],

Declarations:[GroupComponent, AddGroupComponent, ManageGroupComponent],

Providers:[GroupService],

Bootstrap: [GroupComponent]

})

export class GroupModule

File Name: GroupComponent.ts

Import { Component, OnInit} from '@angular/core';

@Component({

Selector: "app-group",

Template:`<div>Test</div>`

})

export class GroupComponent implements onInit{

// some code...

}

So we have total 3 modules now. First one is by default AppModule then two which we created are UserModule and GroupModule.

Now lets  import those in main.ts

File Name: main.ts

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

import { AppModule } from './app.module';

import { UserModule} from './user.module';

import { GroupModule} from './group.module';

window.appnamespace.platform = platformBrowserDynamic();

window.appnamespace.AppModule= AppModule;

window.appnamespace.UserModule= UserModule;

window.appnamespace.GroupModule= GroupModule;

Now configure all the files in tsconfig.json

File Name: tsconfig.json

In files array:

"files":[

"path/app.module.ts",

"path/user.module.ts",

"path/group.module.ts",

.... And so on

]

Now bootstrap these modules from our JavaScript file:

// To boostrap App Module

function bootstrapAppModule(){

Window.appnamespace.platform.bootstrapModule(window.appnamespace.AppModule);

}

// To boostrap User Module

function bootstrapUserModule(){

Window.appnamespace.platform.bootstrapModule(window.appnamespace.UserModule);

}

// To boostrap Group Module

function bootstrapGroupModule(){

Window.appnamespace.platform.bootstrapModule(window.appnamespace.GroupModule);

}