0

I'm attempting to import some Angular config that needs to be environment specific (basically because I'm running different instances of the app in Azure so I need to configure these variables at release time and not build time).

I've done this by creating a config.json file in my angular assets directory and importing it into a service like so

config.json

{
  "azureAdConnectSettings": {
    "clientId": "<app-id>",
    "tenant": "<azure-tenent>",
    "redirectUri": "https://localhost:5001/signin-callback",
    "postLogoutRedirectUri": "https://localhost:5001/"
  }
}

env.service.provider.ts

import { EnvService } from './env.service';
import configFile from '../../../assets/config.json';

export const EnvServiceFactory = () => {

  const env = new EnvService();

  const config = configFile || {};

  env.azureAdConnectSettings = config.azureAdConnectSettings;

  return env;
};

export const EnvServiceProvider = {
  provide: EnvService,
  useFactory: EnvServiceFactory,
  deps: [],
};

env.service.ts

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

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

  public azureAdConnectSettings: AzureConnectSettings = null;

  constructor() { }
}

class AzureConnectSettings {
  clientId: string;
  tenant: string;
  redirectUri: string;
  postLogoutRedirectUri: string;
}

So this works fine in development, I can change values in the config.json and they will be read by the app.

However when I build the app using ng build --prod --aot --build-optimizer and then change the values in my config.json (in the output directory for the build) the change isn't picked up and the app still reads the pre-build values.

Presumably Angular is compiling the config file. If so is there a better way to achieve this?

Chris Edgington
  • 2,937
  • 5
  • 23
  • 42
  • 1
    `import configFile from '../../../assets/config.json';` this line causes json file to inline into your output source. If you need dynamic config file you could go with simple http request to get newest contents at app start. Or using server-side code, inline config into index.html (or more generally, entry point file) – Marcin Tomczyk May 20 '19 at 21:15
  • You have to fetch it with a GET request. Preferably with an APP_INITIALIZER so it loads before the rest of the app. https://stackoverflow.com/a/54793384/6893866 – Tezra Oct 24 '19 at 16:53

0 Answers0