Using a variable loaded from backend inside @NgModule imports tag

Question

right now I'm trying to integrate a module in my angular application that needs some configuration set up during the import phase.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MyModule.forRoot({
     myModule: [
       {
         firstParameter: parameters.value1,
         secondParameter: parameters.value2
       },
     ],
    }),

The problem I'm facing is that I don't know how to load the parameters object before the imports tag is being parsed. I've tried with empty values than load the parameters afterwards but it won't work as the module needs the parameters set at the import stage and can't be overwritten.

All this is happening inside app.module.ts. Any help is appreciated and sorry for using the wrong terms, I'm new to Angular.

Answer 1

Just checking again your question, and saw you load data from backend. In that case you should go with the following solution

You can't achieve what you want with imports tag. You can however achieve that with providers.

@NgModule({
      declarations: [
        AppComponent
      ],
      imports: [],
      providers: [{
            provide: APP_INITIALIZER,
            useFactory: initialize,
            deps: [InitializeService],
            multi: true,
        }]

Now in the same file that contains the previous code also add

export function initialize(initializeService: InitializeService) {
    return initializeService.initialize();
}

Then on an other .ts file just define a simple service

@Injectable({
    providedIn: 'root'
})
export class InitializeService {

public parameter1;
public parameter2;

constructor(
    private httpClient: HttpClient
) {}

public initialize() {

   return () => { 

     return this.getParameter1FromBackend().then( (data1) => {
        this.parameter1 = data1;
          return this.getParameter2FromBackend().then( (data2) => {
             this.parameter2 = data2;
             }
     }

   }
}

  public getParameter1FromBackend() {

    return this.httpClient.get(......).toPromise();
 }

 public getParameter2FromBackend() {

   return this.httpClient.get(......).toPromise();
   }
  }

Then in every component that you pass the service InitializeService you will have access to already loaded variables initializeService.parameter1 and initializeService.parameter2

The whole application will bootstrap and run only after those 2 properties are loaded. Therefore it will always be available for you.

I leave here also another solution which is how to pass parameters as static defined values from app.module to every component. In your case your values come from the backend therefore you should not go with that solution but the first one.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MyModule.forRoot({
    myModule: [{}]})
    ],
  providers: [{ provide: parameter1, useValue: 'your value here' },
                { provide: parameter2, useValue: 'your value here' }]

You must define those also in the config.ts

src/app/app.config.ts

import { InjectionToken } from '@angular/core';

export const parameter1 = new InjectionToken<string>('app.config1');
export const parameter2 = new InjectionToken<string>('app.config2');

Then in every component that stands under the module where you made those declarations, you can use those parameters by injecting them in the constructor

constructor(@Inject(parameter1) parameter1: string,
            @Inject(parameter2) parameter2: string) {
}

Your parameter is not necessary to be a string. You can pass every custom object that you want. Just replace string with your custom object