Bootstrap multiple root component in Angular 4

Question

We've a JQuery application where we've a requirement to implement some modules in Angular 4. So to do that we are manually bootstrapping an Angular app. But now the case is we have created multiple angular component and now they all loading when we bootstrap AppComponent which is making application slow in loading.

So I want to bootstrap multiple root component (i.e. AppComponent, App1Component) so that and will use child components accordingly based on it.

So following is my implementation which is not working.

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule,App1Module } from './app.module';
import { enableProdMode } from '@angular/core';

platformBrowserDynamic().bootstrapModule(AppModule)
platformBrowserDynamic().bootstrapModule(App1Module)

app.module.ts

import { NgModule }      from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { AppugComponent }   from './appug.component';

import { AppChild1Component }   from './profile/appchild1.component';
import { AppChild2Component }   from './profile/appchild2.component';
import { AppChild3Component }   from './profile/appchild3.component';
import { AppChild4Component }   from './profile/appchild4.component';

import { UgChild1Component }   from './ug/ugchild1.component';
import { UgChild2Component }   from './ug/ugchild2.component';
import { UgChild3Component }   from './ug/ugchild3.component';
import { UgChild4Component }   from './ug/ugchild4.component';

@NgModule({
  imports:      [BrowserAnimationsModule, BrowserModule, FormsModule,HttpModule],
  declarations: [ 
                    AppComponent,
                    AppChild1Component, 
                    AppChild2Component,
                    AppChild3Component,
                    AppChild4Component,
                ],  
  bootstrap:    [ AppComponent ]
})
export class AppModule { }


@NgModule({
  imports:      [BrowserAnimationsModule, BrowserModule, FormsModule,HttpModule],
  declarations: [
                  AppugComponent,
                  UgChild1Component, 
                  UgChild2Component,
                  UgChild3Component,
                  UgChild4Component,
                ],
  bootstrap:    [ AppugComponent ]
})
export class App1Module { }

app.component.ts

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

@Component({
  selector: 'my-app,
  template:`<h1>app</h1>`,  
})
export class AppComponent implements OnInit {}

appug.component.ts

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

@Component({
  selector: 'my-appug,
  template:`<h1>appug</h1>`,    
})
export class AppugComponent implements OnInit {}

Following is the error I'm getting on console:

Unhandled Promise rejection: The selector "my-app" did not match any elements ; Zone: <root> ; Task: Promise.then ; Value: Error: The selector "my-app" did not match any elements

Tried referencing this as well but doesn't working

Any help would be appreciated.

Try to read about angular lazy loading. angular.io/guide/lazy-loading-ngmodules — Nour
– Nour, Commented Oct 11, 2018 at 14:22
@Nour: For lazy loading you need to use angular routing but here we are manually bootstrapping angular app — J.K.A.
– J.K.A., Commented Oct 11, 2018 at 14:24

J.K.A. · Accepted Answer · 2018-10-29 06:31:32Z

Well I've solved myself by just doing some configuration in main.ts and tsconfig.json

Step 1: Create your module and declare root components which you want to load when you bootstrap that module.

Ex. Here I've created user.module.ts

import { NgModule }      from '@angular/core';

// root component of usermodule
import { UserAppComponent }   from './userapp.component';

@NgModule({
  imports:[FormsModule,HttpModule],
  declarations:[UserAppComponent],
  providers:[],
  bootstrap:[UserAppComponent]
})
export class UserModule { }

Step 2: Go to main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { UserModule } from './user.module';

window.platform = platformBrowserDynamic();
window.AppModule = AppModule;
window.UserModule = UserModule;

Step 3: Go to tsconfig.json and insert your newly created module and component in "files" array

"files":[
    //....your other components ...//
    "myapp/user.module.ts",  
    "myapp/userapp.component.ts",           
  ]

Step 4: Now you are ready to bootstrap angular module wherever you want from your .js file. Like I've bootstrap like this from my .js file. Bootstrapping may differ based on your requirement but step 1 to 3 should be same.

window.platform.bootstrapModule(window.UserModule);

Collectives™ on Stack Overflow

Bootstrap multiple root component in Angular 4

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related