Proxy Routing in Angular 4 Applications

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

1. Add a file called proxy.conf.json in your angular application at the same level where angular.cli.json/package.json resides.
2. Add the content to specify where a request should be redirected to: https://gist.github.com/wickedrahul/86dc9c94c4982de2b04edbee8436a352. For example, in the above code, any request with /Api1 is redirected to the ‘target’ specified in that particular object (http://<ipAdressOfApi1>:<port number>) : https://gist.github.com/wickedrahul/f0f5982d999b2dce45995d00a2d416b1
3. In your package.json, add the following under “scripts”:

“scripts”: {

   “start”: “ng serve –proxy-config proxy.conf.json”

}

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.

1. In the nginx.conf file find ‘server’ and add the following:
   https://gist.github.com/wickedrahul/80bf0e5ce30eeb583a8d396f54c80ae8
2. Save the conf file and Restart NGINX

Your browser will be severing the content at the specified port in the NGINX

On other web service providers:

If you are not using NGINX, you must make proxy configuration in your hosting provider. For example, to do the proxy configuration in AWS, refer to the AWS doc: https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-create-api-as-simple-proxy-for-http.html

---