Where to save global settings in Angular 4

Question

In Angular (Type Script) there are many config files. Which is the right one to save a global setting?

For example, when I am calling API from local then my rootUrl is localhost:42000 but when I switch on production it should be http:www.someting.com.

I want to save this rootUrl in some global place so if I switch on production then I only have to change in this rootUrl.

Please suggest where should I save these global settings, same as web.config in Asp.Net.

angularjs and angular 4 **are not the same framework**. which are you using? one is javascript, the other is typescript. — Claies, May 24 '17 at 06:06
Possible duplicate of [Define global constants in Angular 2](https://stackoverflow.com/questions/34986922/define-global-constants-in-angular-2) — ippi, May 24 '17 at 06:08
If the URL that serves your app is also the URL that serves your API, then you don't need any rootUrl. Just use http.get('/api/blabla'). Otherwise, Angular CLI has environments for that kind of stuff. But all you need is an exported constant wherever you want, that you import wherever yo need it. — JB Nizet, May 24 '17 at 06:09
Do we need to build project two times with prod and development, or is there any other way to change the root URL of API pointed on different server and root url change without building the project. — AmitykSharma, Nov 21 '19 at 09:58

score 12 · Accepted Answer · answered May 24 '17 at 07:35

12

This answer is similar to @trichetriche, with few more details on the code.

For development/testing purpose

environment.ts

export const environment = {
  production: false,
  appUrl: 'localhost:4200'
};

For production

environment.prod.ts

export const environment = {
      production: true,
      appUrl: 'mywebsite.com'
    };

Usage

service.ts

import { environment } from '../../environments/environment';

this._http.get(environment.appUrl, requestHeaders(options));

Make a note of production parameter in all the environment files. I believe you could also create more environments like environment.unittesting.ts.

answered May 24 '17 at 07:35

Amit Chigadani

28,482
13
80
98

1

When i switch on production then i have to change `import { environment } from '../../environments/environment';` to `import { environment } from '../../environments/environment.prod';` ? in each service file ? – Umang Patwa May 25 '17 at 06:54
No that would not make any sense. You need not do that. Webpack will automatically recognize production and non production files . – Amit Chigadani May 25 '17 at 06:57
I am using angular CLI – Umang Patwa May 25 '17 at 06:58
That is fine. `ng build` will serve your purpose. – Amit Chigadani May 25 '17 at 07:02
For more details : http://tattoocoder.com/angular-cli-using-the-environment-option/ – Amit Chigadani May 25 '17 at 07:05
Do we need to build project two times with prod and development, or is there any other way to change the root URL of API pointed on different server and root url change without building the project. – AmitykSharma Nov 21 '19 at 09:56

score 4 · Answer 2 · answered May 24 '17 at 06:50

When I first started using Angular 2, I used a global.ts file where I'd put all my variables, so that I could change it easily.

I've then discovered the environments provided by angular CLI. All you have to do is name a file environment.prod.ts (for prod), and use ng build --prod when you build it. when you develop, use the environment.ts file and both files have to have the same variables.

I hope this answers your question.

score 2 · Answer 3 · answered Feb 19 '19 at 07:44

I have another way to define global settings. Because if we defined in ts file, if build in production mode it is not easy to find constants to change value.

export class SettingService  {

  constructor(private http: HttpClient) {

  }

  public getJSON(file): Observable<any> {
      return this.http.get("./assets/configs/" + file + ".json");
  }
  public getSetting(){
      // use setting here
  }
}

In app folder, i add folder configs/setting.json

Content in setting.json

{
    "baseUrl": "http://localhost:52555"
}

In app module add APP_INITIALIZER

 {
      provide: APP_INITIALIZER,
      useFactory: (setting: SettingService) => function() {return setting.getSetting()},
      deps: [SettingService],
      multi: true
    }

with this way, I can change value in json file easier.

I applied this in project for baseUrl, dateformat, sessiontimeout...

score 0 · Answer 4 · answered May 24 '17 at 06:15

You can use process.env with webpack quite easily. E.g.

/**
 * This interface makes sure we don't miss adding a property to both `prod` and `test`
 */
interface Config {
  someItem: string;
}

/**
 * We only export a single thing. The config.
 */
export let config: Config;

/**
 * `process.env.NODE_ENV` definition is driven from webpack
 *
 * The whole `else` block will be removed in the emitted JavaScript
 *  for a production build
 */
if (process.env.NODE_ENV === 'production') {
  config = {
    someItem: 'prod'
  }
  console.log('Running in prod');
} else {
  config = {
    someItem: 'test'
  }
  console.log('Running in test');
}

and you can change process.env.NODE_ENV using webpack -p --define process.env.NODE_ENV='\"production\"' --config ./src/webpack.config.js

More

https://basarat.gitbooks.io/typescript/docs/tips/build-toggles.html

This is useless if hes using the angular CLI (which he probably is using) — realappie, May 24 '17 at 06:55

Where to save global settings in Angular 4

4 Answers4

More

Linked