How to make my angular app use edited config file after 'ng build --prod'

Question

I'm deploying an angular app using ng build --prod. All I want is to let the user using the dist folder can simply change in config.json file in the asset folder so that he can set his settings and my app will use that modified config.json file.

Is it possible after I run ng build --prod to have a config.json file in the build folder that the user can go and directly modify?

If not, is there any better way to accomplish that using another strategy?

As like - { "baseUrl": "http://...", "skills": ["A", "B", "C"] } — Harun Or Rashid, Nov 26 '19 at 06:33

score 5 · Answer 1 · answered Nov 26 '19 at 07:14

I understand that you want to load configuration similar to environment.ts file. Advantage of environment.*.ts file is, it is embedded into product during compile time. So, you won't be able to make changes runtime. For that you have create separate configuration json file that can be loaded as soon as the app starts using "APP_INITIALIZER".

I think this stackblitz example will help.

https://stackblitz.com/edit/angular-load-config-on-init

score 0 · Answer 2 · answered Nov 26 '19 at 06:34

0

If I have understood correctly, there are few configuration parameters that you wish to change based on environment. There are two approaches

Create the config.json file as you described and it should be fetched using HttpClientModule.
You can create a script to hold environment variables. Inside the same script you can build Angular project using custom webpack configuration. You can find detailed explaination at https://www.youtube.com/watch?v=BU5G_i1J5CA

Disclaimer: The video was created by me.

answered Nov 26 '19 at 06:34

CuriousMind

3,143
3
29
54

2

No like that. I want to change `config.json` several times after build. And obviously there are only one environment which is production – Harun Or Rashid Nov 26 '19 at 06:36
You can use the first approach then. – CuriousMind Nov 26 '19 at 06:37
Well, then you are saying that I should fetch my json in some service and after build I can change my json file and the modification will affect my app then? – Harun Or Rashid Nov 26 '19 at 06:42

Manish · Answer 3 · 2019-11-26T06:56:13.463

0

Yes that is very much possible. The best solution i would suggest is

keep your config.json in assets folder. As the assets folder is always copied to the dist folder. So every time you create a build the config.json will be available inside that assets folder under dist. You can go and edit it as much as you want.

One more approach that you can follow is keep your config.json inside src folder and in your angular-cli.json or angular.json based on the version of cli include it in the assets array. like below

angular-cli.json

  "assets": [
        "assets",
        "favicon.ico",
        "config.json"
      ],

angular.json

"assets": [
    "src/favicon.ico",
     "src/assets",
     "src/.htaccess",
      "src/config.json"
  ],

See for more

Hope this helps :)

edited Nov 26 '19 at 06:56

answered Nov 26 '19 at 06:51

Manish

4,692
3
29
41

I can change my config file. But that changes are not affecting my app. Issue is here – Harun Or Rashid Nov 26 '19 at 06:55
2

Ok then that is a problem with how you are using it. With any of the above approach you will have to code a provider which fetches this file via http before angular app is bootstrapped and save it in sessionstorage or a service etc. Because i have the same setup and it works perfectly fine. Let me see if i can add a demo.. – Manish Nov 26 '19 at 06:58
Great answer +1 – Prakhar Londhe Jun 23 '20 at 09:48

How to make my angular app use edited config file after 'ng build --prod'

3 Answers3