Proxy Routing in Angular 4 Applications

Contributor - 21 February 2018 - 12 Mins
Contributor - 21 February 2018 - 12 Mins
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:
Before we proceed with details on routing in Angluar 4 applications, I assume you meet the following prerequisites:
– Create a service in your angular app and write the method from which the server URL can be fetched.
– Inject this service inside your component and use it wherever required:
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!
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.
Your browser will be severing the content at the specified port in the NGINX
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
"I am facing cors problem with proxy-config in producton,after doing some research I came to known it is for development,Is there any alternative other than NGINX in production?".
"Really useful Article. Thank you for sharing your knowledge with us. The details you have shared would be really needful to many. Keep Going.".
"How would angular know which url(Api1, Api2) needs to be called on line 23 here return this.http.get( '/recentData', options).map(res=>res.json()); //No Base URL required?".