Angular 2 - How to have different values of a var/const for different environments?

Question

I am developing a Angular 2/Ionic 2 + JEE 7 project and I have a very specific scenario:

I have a httpClient layer that encapsulates every call to backend, there is a const named REST_BASE_PATHthat I would like to point to my localhost when in development environment and to a specific address when in production.

That said I would like to know what is the best and most automatic way of accomplish that..

Answer 1

You could define a custom request options to centralize this:

export class AppRequestOptions extends BaseRequestOptions {
  constructor(private @Inject('webApiBaseUrl') webApiBaseUrl:string) {
  }

  merge(options?:RequestOptionsArgs):RequestOptions {
    options.url = this.webApiBaseUrl + options.url;
    return super.merge(options);
  }
}

The webApiBaseUrl value you inject could be defined when bootstrapping your application:

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide('webApiBaseUrl', { useValue: 'https://bookapi.apispark.net/v1' })
]);

• Set base url for angular 2 http requests

You need to update the variable when package your application with the value for the production environment.

Here is a question regarding packaging that could help you at this level:

• How do I actually deploy an Angular 2 + Typescript + systemjs app?