Contact Us

Contact Us



Pleas confirm by checkbox


App DevelopmentTechnical

Proxy Routing in Angular 4 Applications

Author_img
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

  1. 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.

  1. In the nginx.conf file find ‘server’ and add the following:

  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


 

Related posts
Angular — How to render HTML containing Angular Components dynamically at run-time
App Development

Angular — How to render HTML containing Angular Components dynamically at run-time

By talenticarahul May 05, 2021
Part-3: Building a bidirectional-streaming gRPC service using Golang
App Development

Part-3: Building a bidirectional-streaming gRPC service using Golang

By talenticarahul April 22, 2021
A Step-by-Step Guide to Easy Android in-App Review Setup.
App Development

A Step-by-Step Guide to Easy Android in-App Review Setup.

By talenticarahul April 16, 2021
Part -2: Building a unidirectional-streaming gRPC service using Golang
App Development

Part -2: Building a unidirectional-streaming gRPC service using Golang

By talenticarahul April 15, 2021
How to Integrate Firebase Authentication for Google Sign-in Functionality?
App Development

How to Integrate Firebase Authentication for Google Sign-in Functionality?

By talenticarahul April 09, 2021
Part-1: A Quick Overview of gRPC in Golang
App Development

Part-1: A Quick Overview of gRPC in Golang

By talenticarahul April 07, 2021
Publish Your Android Library on JitPack for Better Reachability
App Development

Publish Your Android Library on JitPack for Better Reachability

By talenticarahul April 02, 2021
How to Use Firebase Remote Config Efficiently?
App Development

How to Use Firebase Remote Config Efficiently?

By talenticarahul March 26, 2021
How to simplify Android app distribution with Fastlane and improve workflow?
App Development

How to simplify Android app distribution with Fastlane and improve workflow?

By talenticarahul March 18, 2021
Google Play Instant Run Integration
App Development

Google Play Instant Run Integration

By talenticarahul September 09, 2019

Stay updated

Get the latest creative news from Fubiz about art, design and pop-culture.