How to Deploy Angular app with Proxy Settings

To deploy an Angular 8 application to production

You can use the environments feature, for example:

For Development

proxy.conf.json

{
  "/api": {
      "target": "http://localhost:3000/api",
      "secure": false,
      "pathRewrite": {"^/api" : ""}
    }
}

You set the backend baseURL in environments/environment.ts

export const environment = {
  production: false,
  backend: {
    baseURL:"http://localhost:3000/api"
  }
};

In the service the baseURL is used:

  baseUrl: string = environment.backend.baseURL;

  getAll(): Observable<UsersResponse> {
    return Observable.create(observer => {
     this.http.get<AccountsResponse>(`${this.baseUrl}` + '/users')
        .subscribe((result) => {
          const accountsResponse = result;
          observer.next(accountsResponse);
          observer.complete();
        });
    });
  }

For development the live serve is used:

$ng serve --proxy-config proxy.conf.json  --host 0.0.0.0 --port 4200

The url for development:

http://localhost:4200/yourapp

The running serve will enable CORS and send the API calls to

http://localhost:3000/api/v1

For Deployment to production

The command to build for production:

$ng build --prod --base-href=/yourapp/

The service will take the baseURL from prod environment configuration:

environments/environment.prod.ts

export const environment = {
  production: true,
  backend: {
    baseURL:"http://example.com/api"
  }
};

So, by using different environments, you can configure different api urls. Remember to enable CORS in your production web server, by default the browser does not allow to connect to a different domain than the one serving your Angular app.

Option 1: Don't use IIS Server.

You can create an application with node and express to serve your static files and to be your api server, which will call the right one (almost like a redirect)

What ng serve --proxy-config probably does is to run a node server with your application exposed as static and run api's according to your configuration redirecting (calling the server) to the server.

When we call an api from node server, there's no CORS because we don't have a hostname like an web application.

Option 2: With IIS and a node/express application## Heading ##

You can create an application and allow the CORS to your hostname. From this application you can expose a generic api and call the right api server.