javascript - Bootstrapping multiple module in Angular 6 via array - Stack Overflow

admin管理员组

文章数量:1325236

is it possible to declare an array and use that to bootstrap multiple ponents 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" ponents nor a "ngDoBootstrap" method. Please define one of these.

is it possible to declare an array and use that to bootstrap multiple ponents 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" ponents nor a "ngDoBootstrap" method. Please define one of these.

• javascript
• angular
• typescript
• frontend
• angular6

Share Improve this question Follow asked Jul 10, 2018 at 7:31 Sahasrangshu GuhaSahasrangshu Guha 68322 gold badges1313 silver badges3030 bronze badges 2

• Have you declared a @ngModule? @NgModule({ declarations: initialComponents | Array<Type<any> | any[], bootstrap: Array<Type<any> | any[] }) – Gary Commented Jul 10, 2018 at 7:47
• yeah i declared ng module – Sahasrangshu Guha Commented Jul 10, 2018 at 7:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You can customize the bootstrapping via implementing ngDoBootstrap as method of AppModule. You can list your ponents 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 pared to DI in ponents or services. Here are the docs for ApplicationRef and its bootstrap method.

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.ponent';
import { HeroesComponent } from './heroes/heroes.ponent';

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./edit/angular-vimqb1?file=src/app/app.module.ts

本文标签： javascriptBootstrapping multiple module in Angular 6 via arrayStack Overflow