Bootstrapping multiple module in Angular 6 via array

Question

is it possible to declare an array and use that to bootstrap multiple components in module.ts. I was trying something like this

    export var initialComponents = [];
    initialComponents.push(AppComponent);
    if(condition) {
      initialComponents.push(IchFooterComponent);
    }

and then

bootstrap: initialComponents

Which gives me the following error

Error: The module oa was bootstrapped, but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method. Please define one of these.

Have you declared a @ngModule? @NgModule({ declarations: initialComponents | Array<Type<any> | any[], bootstrap: Array<Type<any> | any[] }) — Gary
– Gary, Commented Jul 10, 2018 at 7:47

Youp Bernoulli · Accepted Answer · 2022-11-21 13:41:39Z

7

You can customize the bootstrapping via implementing ngDoBootstrap as method of AppModule. You can list your components which need to be bootstrapped in the entryComponents property of @NgModule

@NgModule({
    entryComponents: [AComponent, BComponent, ...]
    ...
 })
 export class AppModule {

     constructor() {}

 ngDoBootstrap(appRef: ApplicationRef) {
     if (Math.random() > 0.5) {
         appRef.bootstrap(AComponent, '#app');
     } else {
         appRef.bootstrap(BComponent, '#app');
     }
 }

If you need a service, you can access them via dependency injection (put it in AppModule as constructor parameter). But I don't know if there are any limitations to it compared to DI in components or services. Here are the docs for ApplicationRef and its bootstrap method.

edited Nov 21, 2022 at 13:41

Youp Bernoulli

5,7127 gold badges45 silver badges63 bronze badges

answered Jul 10, 2018 at 11:23

SirDieter

3092 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Volodymyr Krupach Over a year ago

Saved my day! bootstrap: [condition ? ComponentOne : ComponentTwo] worked in dev mode but ng build --prod was crashing: "Value at position 0 in the NgModule.bootstrap of AppModule is not a reference: [object Object". Builds and works fine after removing "bootstrap: " and implementing via ngDoBootstrap.

mPrinC Over a year ago

Unfortunately, decorator (like @NgModule) content (like bootstrap) are very fragile and need to be "very static", especially for build case, when a lot of angular optimisations are used)

Gary · Accepted Answer · 2018-07-10 08:05:32Z

0

Try it again (below is the sample code):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

var initialComponents: any[] = []; 

initialComponents.push(AppComponent);
if (true) {
  initialComponents.push(HeroesComponent);
}

@NgModule({
  declarations: initialComponents,
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Try this again:

https://stackblitz.com/edit/angular-vimqb1?file=src/app/app.module.ts

answered Jul 10, 2018 at 8:05

Gary

2,3492 gold badges33 silver badges53 bronze badges

2 Comments

Sahasrangshu Guha Over a year ago

I need to declare multiple components inside bootstrap, just few of them should appear based on condition. Your example is loading app component first then from inside app you are loading heroes component which is not my use case.

Gary Over a year ago

Try putting everything into a condition or outside condition it should work. Thats an array type of declaration. As per my understanding, whatever way it should work.

Collectives™ on Stack Overflow

Bootstrapping multiple module in Angular 6 via array

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related