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, Jan 16 '17 at 17:31

score 14 · Answer 1 · edited Dec 10 '19 at 16:31

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);
            }
        });
    }
}

score 4 · Answer 2 · edited May 23 '17 at 12:25

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.

so what if in your code, you do not include app1 and app2 in your html. Would it still work without any errors? — Manoj Amalraj, Jan 16 '17 at 18:36
No I don't think it will work. Since it is bootstrapped, it expects things to be present in html — Arunkumar Srisailapathi, Jan 16 '17 at 18:48
I mean, it will work fine, but you will still see the errors. — Arunkumar Srisailapathi, Jan 16 '17 at 18:51

score 2 · Answer 3 · answered Jan 16 '17 at 17:07

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 '17 at 17:07

chrispy

3,552
1
11
19

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. – Manoj Amalraj Jan 16 '17 at 17:12
1

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. – chrispy Jan 16 '17 at 17:22

Bootstrapping multiple components in Angular2

3 Answers3

Linked