Starting up various modules in Angular 6 using arrays

Question

Starting up various modules in Angular 6 using arrays

Can an array be declared and used to bootstrap multiple components in module.ts? I attempted the following:

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

and then

bootstrap: initialComponents

This resulted in the following error message:

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

javascript angular typescript frontend angular6

Answer 1

Answer №1

To personalize the bootstrapping process, you can implement the ngDoBootstrap method within the AppModule. Include the components that 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 require a service, you can access it via dependency injection by including it as a constructor parameter in the AppModule. However, any limitations compared to DI in components or services are unknown. Refer to the documentation for ApplicationRef and its bootstrap method.

Answer 2

To personalize the bootstrapping process, you can implement the ngDoBootstrap method within the AppModule. Include the components that 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 require a service, you can access it via dependency injection by including it as a constructor parameter in the AppModule. However, any limitations compared to DI in components or services are unknown. Refer to the documentation for ApplicationRef and its bootstrap method.

Answer 3

Answer №2

Give it another shot (find the sample code below):

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

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

var differentComponents: any[] = []; 

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

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

Give this a try:

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

Answer 4

Give it another shot (find the sample code below):

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

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

var differentComponents: any[] = []; 

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

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

Give this a try:

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

Starting up various modules in Angular 6 using arrays

Answer №1

Answer №2

Similar questions

Handlers for event(s) not triggering on video element

object passed as value to competent parent

How to implement an instance method within a Typescript class for a Node.js application

Finding an element that lacks both a class and an id, and is not consistently present - what's the trick?

What is the procedure for placing an item into a vacant area in react-dnd?

What is the reason behind the inability of the Angular/TypeScript HTTP GET method to accept a JSON object as a parameter

Utilizing Props in Vue.js to Access Data for v-model

What steps can be taken to verify if the user has transmitted a JSON Web Token?

JavaScript's getElementsByName() method allows for easy access and

I am struggling to understand why clicking this button is not successfully submitting the form to Google Sheets

Is there a way to streamline a function that substitutes certain words?

Ways to engage with a fixed html page generated by an Express router?

Double invocation of ActivatedRoute.params.subscribe method observed

What is the best way to superimpose an image onto a canvas?

How to overcome the issue of Vue.js mobile router-link being blocked by v-on:mouseover

Issue with handsontable numbro library occurs exclusively in the production build

How can you identify changes in localstorage and then trigger the activation of a new boot file or reallocate a value using Vue.js or JavaScript?

From JSON to JavaScript transformations

Adjusted position of the viewport if the DOM element containing the renderer is not located at the top of the display

Having trouble with Redux asynchronous operation while trying to access the current state?