Best practices for creating and reading app configuration file for angular app

Question

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?

angular provides an environment.*.ts which can be modified and changed if/how needed. Check this out: digitalocean.com/community/tutorials/… — jo-chris
– jo-chris, Commented Jul 11, 2022 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
– oware, Commented Jul 11, 2022 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
– Bojan Kogoj, Commented Jul 11, 2022 at 21:29

goldax · Accepted Answer · 2023-01-14 07:31:51Z

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!

edited Jan 14, 2023 at 7:31

answered Jan 9, 2023 at 9:35

goldax

791 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Best practices for creating and reading app configuration file for angular app

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related