Bootstrapping multiple components in Angular2

Question

My question is inline with this question: Error when bootstrapping multiple angular2 modules

My index.html has the following code

  <app-header>Loading header...</app-header>
  <app-root>Loading...</app-root>
  <app-footer>Loading footer...</app-footer>

In my app.module.ts, I supply those 3 components to bootstrap:

bootstrap: [AppComponent,HeaderComponent,FooterComponent]

and in my main.ts, I bootstrap them

platformBrowserDynamic().bootstrapModule(AppModule);

The application works fine with all the three modules included. When either of them is removed, the app works but I receive few errors in the console[img attached].

I am trying to create independent modules within the same component that can be plugged in and out of the application. Like for example, a header, footer and body module. Some pages may not need the header, so I can skip the app-header include.

Is my approach right?

Why don't you create as modules @NgModule for each of the components you say you want to use, Include them all, if you need all of them or just include the one's needed. The reason being, Angular2 by itself encourages modular approach and that is the main reason for heft transition of > RC0.5 release. — Arunkumar Srisailapathi
– Arunkumar Srisailapathi, Commented Jan 16, 2017 at 17:31

Paritosh · Accepted Answer · 2019-12-10 16:31:03Z

I just found this and it works fine

import { NgModule, Injectable, APP_INITIALIZER, ApplicationRef, Type, ComponentFactoryResolver } from '@angular/core';
import {FooterComponent} from './footercomponent';
import {AppComponent} from './appcomponent';
import {HeaderComponent} from './headercomponent';

const components = [AppComponent, HeaderComponent,FooterComponent];

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  entryComponents: components,
  providers: []
})
export class AppModule {

    constructor(private resolver: ComponentFactoryResolver) { }

    ngDoBootstrap(appRef: ApplicationRef) {
        components.forEach((componentDef: Type<{}>) => {
            const factory = this.resolver.resolveComponentFactory(componentDef);
            if (document.querySelector(factory.selector)) {
                appRef.bootstrap(factory);
            }
        });
    }
}

Community · Accepted Answer · 2017-05-23 12:25:43Z

4

Module approach:

@NgModule({
  declarations: [App1],
  exports: [App1]
})
export class App1Module
  
@NgModule({
  declarations: [App2],
  exports: [App2]
})
export class App2Module
  
@NgModule({
 imports: [App1Module, App2Module],
 exports: [App1Module, App2Module]
})
export class MainModule

Include this main module if you want all of them, or include only relevant modules.

Although you can create individual modules for each component and use them as and when required or all at one by importing them, you can still go ahead and bootstrap multiple components by mentioning them once after another in the array index of bootstrap.

eg.)

@NgModule({
  imports: [],
  declarations: [App1, App2, App3],
  bootstrap: [App1, App2, App3]
})
export class BaseModule {}

Provided you have all the bootstrapping components on place right on start, something like,

<body>
   <app1>App1</app1>
  <app2>App1</app2>
  <app3>App1</app3>
</body>

This probably should work.

More info:

How to dynamically create bootstrap modals as Angular2 components?

https://plnkr.co/edit/akm7OPahe72Ex9i2ZXej?p=preview

Hope it helps.

Let me know in case of more edits.

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Jan 16, 2017 at 17:43

Arunkumar Srisailapathi

1,1692 gold badges8 silver badges28 bronze badges

3 Comments

Manoj Amalraj Over a year ago

so what if in your code, you do not include app1 and app2 in your html. Would it still work without any errors?

Arunkumar Srisailapathi Over a year ago

No I don't think it will work. Since it is bootstrapped, it expects things to be present in html

Arunkumar Srisailapathi Over a year ago

I mean, it will work fine, but you will still see the errors.

chrispy · Accepted Answer · 2017-01-16 17:07:37Z

2

Mano,

I would probably bootstrap the application in one piece:

<app>Loading...</app>

And then make components for a header and footer and include them as child views in the main component.

answered Jan 16, 2017 at 17:07

chrispy

3,6321 gold badge14 silver badges19 bronze badges

2 Comments

Manoj Amalraj Over a year ago

That is good idea, but the reason why I haven't used that approach is the independent components which I aim to create would be used by different teams as per need. So if a team doesn't wish to use the header in their code, they would simply omit the app-header include in their html. An important point to note here is the teams consuming these components in their html would not have access to the dev code.

chrispy Over a year ago

Angular 2 as a SPA should probably be served as a single unit -- the components cannot be used outside of an angular context. So if these teams are running an ng2 app, then having a discrete component could just be included directly in their app.

Collectives™ on Stack Overflow

Bootstrapping multiple components in Angular2

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related