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?
3 answers
solution1
13 2017-09-06 12:36:46
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);
}
});
}
}
solution2
4 2017-01-16 17:43:30
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.
solution3
2 2017-01-16 17:07:37
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.