Proxy Routing in Angular 4 Applications

By Rahul Dwivedi

February 21, 2018

This blog intends to deal and simplify routing in Angular 4 applications in both development and production environment. While working on routing in Angular 4 applications, we often face some of the following challenges:

Finding a solution to the problem of cross-origin issues in Angular development environment
Separating routing configurations and APIs servers URLs from the code, making the application more robust and maintainable
Finding a generic solution where frequent changing of API URLs (due to deployment on different servers, let’s say for the purpose of load balancing) do not force you to modify and change the code
Servers where the APIs deployed do not appear in your code at all

Prerequisites

Before we proceed with details on routing in Angluar 4 applications, I assume you meet the following prerequisites:

Familiarity or basic hands-on experience with Angular 2+ applications
Basic knowledge of how to make http requests (GET/POST/PUT/DELETE) in Angular

Solution

In development environment

The common approach:

– Create a service in your angular app and write the method from which the server URL can be fetched.

MyService.ts

https://gist.github.com/wickedrahul/2dd904e374c0da2683429124150ff991

– Inject this service inside your component and use it wherever required:

https://gist.github.com/wickedrahul/f0f5982d999b2dce45995d00a2d416b1

Disadvantages of the common approach:

To add new server URLs we must add methods in MyService or change the code inside the getBaseUrl() method
With the APIs being deployed on different servers, maintenance of servers is a tedious process.
With every URL change, the code in getBaseUrl() must be modified and the entire application where the API URL is used must be tested.

Solution using Proxy file

Add a file called proxy.conf.json in your angular application at the same level where angular.cli.json/package.json resides.

Add the content to specify where a request should be redirected to:
For example, in the above code, any request with /Api1 is redirected to the ‘target’ specified in that particular object (http://<ipAdressOfApi1>:<port number>)

In your package.json, add the following under “scripts”:

Start the app with the command Npm start and there you go!

Advantages:

Proxy.conf.json can act as load balancer too. You may redirect different requests to different servers without touching your code
Takes care of cross-origin browser requests issue.
Makes your application more maintainable as you don’t have to change the URLs if the URLs that host your APIs change frequently.

In production environment:

Using NGINX

The above approach with proxy.conf.json cannot be reproduced in production environment. Even if it is tried with some hacks, it is largely discouraged. So, a better approach is to use open source NGINX.

NGINX can be used with major web service provides such as AWS.