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

admin管理员组

文章数量:1287891

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 acplish that using another strategy?

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 acplish that using another strategy?

• javascript
• angular
• typescript

Share Improve this question Follow edited Nov 26, 2019 at 6:35 Mukyuu 6,77988 gold badges4141 silver badges6363 bronze badges asked Nov 26, 2019 at 6:25 Harun Or RashidHarun Or Rashid 5,94722 gold badges2020 silver badges2222 bronze badges 2

• Can you give an example of such user setting – Yuri Commented Nov 26, 2019 at 6:31
• As like - { "baseUrl": "http://...", "skills": ["A", "B", "C"] } – Harun Or Rashid Commented Nov 26, 2019 at 6:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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 pile 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./edit/angular-load-config-on-init

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./watch?v=BU5G_i1J5CA

Disclaimer: The video was created by me.

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

本文标签： javascriptHow to make my angular app use edited config file after 39ng build prod39Stack Overflow