Where to save global settings in Angular 4

user_6541065 0
Viewed 11891

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.

angular typescript
4 Answers

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

user_49645690
Related