CODEWITHSUNDEEP
javascriptangulartypescript
Harun Or Rashid
Harun Or Rashid

Reputation: 5927

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

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?

Upvotes: 7

Views: 10593

Answers (3)

Ashish Patel
Ashish Patel

Reputation: 345

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

Upvotes: 6

Manish
Manish

Reputation: 5056

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 :)

Upvotes: 0

CuriousMind
CuriousMind

Reputation: 3173

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

  1. Create the config.json file as you described and it should be fetched using HttpClientModule.

  2. 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.

Upvotes: 0

Related Questions