0

In my Angular 8 project I set the apiUrl in the src/environmentsenvironment.prod.ts and the content is the following:

export const environment = {
  production: true,
  //apiUrl: 'http://10.0.0.4:8080',
  apiUrl: 'http://XXX.XXX.XXX.XXX:XXX'
};

Once the development is finished I generated the dist with the following command:

ng build --prod

Everything works perfectly BUT I would like to keep a configuration file where I can set the apiUrl directly from the dist. The files generated are the following and there is no "configuration file":

3rdpartylicenses.txt                 polyfills-es2015.9aaba84b721d907ae919.js
favicon.ico                          polyfills-es5.fa99a614a4ad800768a0.js
index.html                           runtime-es2015.27965c48d77c449cb93c.js
main-es2015.b9cf7a43235ca40f1f26.js  runtime-es5.ee2dcdf2e59a31c9da78.js
main-es5.9fc024966b7d480e3b6e.js     styles.4e9ec539174190909934.css
pittuzzo
  • 493
  • 8
  • 29
  • You can add config file in asset folder and from there can be changed after prod build https://devblogs.microsoft.com/premier-developer/angular-how-to-editable-config-files/ – Nenad Radak Sep 30 '19 at 15:01
  • Possible duplicate of [Load Config JSON File In Angular 2](https://stackoverflow.com/questions/42110817/load-config-json-file-in-angular-2) – Abel Sep 30 '19 at 15:02

2 Answers2

0

If you want to run this application on your Server, then you don't need configuration file. You need to adjust the base "href" in your index.html file.

Your deployed app will start at "/".

if your app is running in a folder like "/test", then you have to adjust it.

<base href="/test/">

Important is to close the path with a '/'

AndyNope
  • 427
  • 6
  • 12
0

This is not a good approach, I will suggest you to create separate environments as per your requirement.

How to achieve this when you have different API_URL for different environment ?.

Please follow the below steps for solution..

  1. Create separate environment file like I have created below..

    enter image description here

  2. Now go to angular.json file and modify the configuration node.

  3. Modify your angular.json configuration as per below mentioned.

  4. For better readability please use any online JSON Viewer.

    {"configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" } ] } , "st": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.st.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" } ] } , "uat": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.uat.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" } ] }, "gr": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.gr.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" } ] } }}

Once you done the above steps.

Now run the command as bellow, it may differ as per your config. 

ng build --configuration st

or 

ng build --configuration uat

or 

ng build --configuration gr

It will build the code as per your given environment variable.

Do let me know if you have any query.

vijay sahu
  • 765
  • 1
  • 7
  • 29