Angular CLI: Change REST API URL on build

Question

I want to remove my local server prefix from my REST API URLs (example, http://localhost:8080) when building for production (ng build --prod).

I get that it's something to do with the environment file environment.prod.ts, but can't find any examples of making use of them to achieve the aforementioned.

Would be great if someone helps me get started!

Answer 1

You will find the URL configuration in environment.ts and environment.prod.ts file. Don't put hardcoded URL while calling the API. A good practice is to read the API URLs from environment.ts and environment.prod.ts file

For the local environment use environment.ts

export const environment = 
{
    production: false,
    API_URL: 'http://localhost:8080',
};

For the production environment use environment.prod.ts

export const environment = 
{
    production: true,
    API_URL: 'http://api.productionurl.com',
};

Answer 2

Dont hard code the URL. Use environment.prod.ts and environment.ts files which are inside src/environments. for localhost, in environment.ts file use some variable to save your url.

export const environment = 
{
    production: false,
    API_URL: 'http://localhost:8080',
};

for production, in environment.prod.ts

export const environment = 
{
    production: true,
    API_URL: 'http://api.productionurl.com',
};

When using in your code import the variable,

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

private API_URL= environment.API_URL;

whenever your are using for production use angular cli command option

ng build --env=prod

The file contents for the current environment will overwrite these during build. The build system defaults to the dev environment which uses environment.ts, but if you do ng build --env=prod then environment.prod.ts will be used instead. The list of which env maps to which file can be found in .angular-cli.json.

For more queries refer, https://angular.io/guide/deployment

Answer 3

Relative URLs

Putting an API_URL in your environment config is a good idea, but if your API and client app is being served from the same server or domain, you can use relative URLs instead. It is much easier to set up and simplifies your build process.

Here is some code that would live in an API service.

  get(path: string, params: HttpParams = new HttpParams()): Observable<any> {
    return this.http.get(`/api${path}`, { params })
      .pipe(catchError(this.formatErrors));
  }

If you are using the environment.API_URL, you can still configure that value to be blank.

This can be helpful if you are serving your app and API from separate localhost servers in a development environment. For example, you might ng serve from localhost:4200 and run your API from a PHP, C#, Java, etc. backend on localhost:43210. You will need the API_URL config for development.

  get(path: string, params: HttpParams = new HttpParams()): Observable<any> {
    return this.http.get(`${environment.api_url}/api${path}`, { params })
      .pipe(catchError(this.formatErrors));
  }

As a bonus, here is an example of ApiService that is an injectable object you can use in your app!

https://github.com/gothinkster/angular-realworld-example-app/blob/63f5cd879b5e1519abfb8307727c37ff7b890d92/src/app/core/services/api.service.ts

Pay attention to the base ref in your main HTML page as well.

Answer 4

One possible way to achieve that is, to define different base URLs based on isDevMode() in your code. For example,

import { isDevMode } from '@angular/core';

// ...
let baseUrl: string;
if (isDevMode()) {
    baseUrl = "http://localhost:8080/";
} else {
    baseUrl = "http://api.myprodserver.com/";
}
// ...

Edit: This is meant to be for illustration. You'll likely want to use some type of (env-dependent) "config" in real code.