0

I have an angular9 project, I need to deploy it to server, it has rest api url, currently which I am storing in constant.ts file, but after ng build --prod all files get converted to different format.

export const address = 'http://10.164.64.93:5200/api/';

I want to know what is best way to keep this rest api path configurable even after it is deployed to server? I dont want to build my solution again, but I should be able to change my rest url path, or any image url user in my application.

Currently I build my project everytime if there is any path change for image used in application or rest api. I want to avoid it and need some config file where i can set this path. Any input will be helpful.

Improve this question

2 Answers 2

Reset to default
3

Angular CLI offers an environment feature that allows to run builds targeted at specific environments. When application is built for production mode then environments/environment.ts file gets replaced with environments/environment.prod.ts file. Hence if you are referring to settings from environment.ts file in your code, you don’t have to put any if condition or hard code production URL.

// environment.ts
  export const environment = {
    production: false;
    address : 'http://10.164.64.93:5200/api/';// local url
};
 ----------------------------
 // environment.prod.ts
export const environment = {
  production: true,
  address : 'http://10.164.64.93:5200/api/';// prod url here
};

and use it in the component like this

import { Component } from '@angular/core';
import { environment } from 'src/environments/environment';import { Component } 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'multiple-env-demo';
  environmentUrl = 'Debug api';
  constructor() {
    this.environmentUrl = environment.address;
  }
}

NB: After the build, we can find main.bundle script file, you will find and change the environment variables. in main.bundle.js file :

var environment = {
 address : 'http://10.164.64.93:5200/api/',
};
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I cannot find main.bundle.js file in my build folder i.e dist folder, do all angular builds have this file, in my case it is not there.
0

Seems like you are looking for RunTime configuration where are Angular CLI (build) supports build time configuration.

This is part of "Build Once and Deploy Anywhere" Paradigm, which Angular doesn't support out of the box. But it is easy to achieve with a simple trick.

Here are steps to achieve it:

  1. Make use of assets folder which will not change after the build and create config folder in it.
 assets
    / config
         / env.json
         / config.dit.json
         / config.prod.json

env.json

{
  "env": "dit"
}

config.local.json

{
  "apiUrl": "http://10.164.64.93:5200/api/"
}

  1. This way you can change values when ever you want. For example: If you want to run app based on different env, change the value in env.json. Or if you want to change the API on fly then change it in config.XXX.json accordingly.

  2. Create a service to use the above values.

await this._http.get('./assets/config/env.json').toPromise().then(res => {
   env = res.env;
});
Improve this answer

2 Comments

what is dit in env : dit in env.json file, it is rest api path?
Teams will have several environments for a product. For example, DIT, FIT, IAT, UAT and PROD etc. We can specify it in env.json and make our service pull correct config.<env>.json at runtime, which indeed can have API Urls and some environment specific configurations.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.