0

I have an angular application that is gona be installed on many sites (owner requeriment) but, for every site, the configuration must be different (colors, some texts, some logos, backend server, etc). I want to write a configuration file that will be read by the angular app and then apply that configuration, I will put the file in every site and when I make a change to the backend server, any configuration text or other configuration I will only change the configuration file and the angular app will work transparently.

How can I achieve this?

I was thinking in writing a json file and read it from angular. Is this a good practice?

oware
  • 626
  • 9
  • 19
  • angular provides an environment.*.ts which can be modified and changed if/how needed. Check this out: https://www.digitalocean.com/community/tutorials/angular-environment-variables – jo-chris Jul 11 '22 at 20:27
  • it won't work for my scenario because I will have to recompile the app for every change I made, I don't want to recompile the full app, only change the configuration file... – oware Jul 11 '22 at 20:45
  • Then load environment JSON from API. If you want even first screen to be themed correctly make sure to add it to APP_INITIALIZER. – Bojan Kogoj Jul 11 '22 at 21:29
  • The docs about APP_INITIALIZER is [here](https://angular.io/api/core/APP_INITIALIZER), a sample in this [SO](https://stackoverflow.com/questions/57585082/angular-multiple-app-initializer-that-depend-on-each-other/57585756#57585756) – Eliseo Jan 09 '23 at 11:42

1 Answers1

0

you can use 'environment.ts' for your problem. but I use 'environment.ts' or 'environment.prod.ts' for the Variables that have different value in product and develop mode.

for values like store/app/crm name, simply you can add 'ts' file like 'myAppConfig.ts' in 'src' folder or 'app' folder. then declare your variables like this:

export const myAppConfig = {
        appName:'samuels online store',
        expireDate:'2023/30/12',
        customerName:'samuel l jackson'
      };

then you can use it,like this: first import it in your 'ts' file, for example in 'app.component.ts'.

import { myAppConfig } from 'src/myAppConfig';

then use the values of it, like this:

customerName = myAppConfig.clientName;

finally, you can put or change values in 'myAppConfig' from your backend and give a fresh version to your new customers. have a good time!

goldax
  • 71
  • 6