通过从后端获取数据来设置从 app.module 导入

Question

In Angular is it possible to set imports from app.module by getting data from backend?

RecaptchaFormsModule,
NgxStripeModule.forRoot(CONFIG.stripeKey),
AgmCoreModule.forRoot({
  apiKey: CONFIG.keyFromDServer,
  libraries: ["places"]
}),

So set the CONFIG.keyFromDServer with a key from the server. Can APP_INITIALIZER do this, if so how or is there anyway?

Answer 1

AOT compilation does not allow non-statically analyzable values to be used in Angular decorators.

There are several options. Here is one that waits for the configuration from the server before boostrapping the application.

// main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { configurationToken } from './app/configuration';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

// Platform creation and bootstrapping of the application is delayed
// until we have loaded the configuration file.
fetch('/assets/configuration.json')
  .then(configuration =>
    platformBrowserDynamic([
      { provide: configurationToken, useValue: configuration },
    ]).bootstrapModule(AppModule))
  .catch(error => console.error(error));

// configuration.ts
import { InjectionToken } from '@angular/core';

// We create an interface for the configuration JSON object
export interface Configuration {
  readonly apiUrl: string;
  readonly timezone: string;
  readonly websocketUrl: string;
}

// We use a dependency injection token to access the configuration
// in our application.
export const configurationToken = new InjectionToken('Configuration');

// time.service.ts
import { Inject, Injectable } from '@angular/core';

import { Configuration, configurationToken } from './configuration';

@Injectable()
export class TimeService {
  constructor(
    @Inject(configurationToken) private configuration: Configuration,
  ) {}

  // Configuration is available synchronously since it's just an object
  // that can be injected.
  get timezone(): string {
    return this.configuration.timezone;
  }
}

More options in " Handling Angular environments in continuous delivery " by Kevin Kreuzer.