Angular CLI proxy configuration

Click here to share this article on LinkedIn »

Does your Angular frontend talk to many backend services? Are you also using a reverse proxy like nginx or a Kubernetes Ingress to route requests to these services from different paths on the same domain? If so, then you should be aware of the proxy configuration options that Angular CLI provides to make local development a really great experience.

These configuration options are best illustrated through an example. If you are interested in the changes required, then see this commit on GitHub which shows the differences needed to setup proxying. This blog post will talk through that example in more detail.

Let’s take a frontend that is served at a path /catalog/. The ‘Catalog Server’ is responsible for serving the static files (.js, .css, .html) and also provides an API that the frontend can use for retrieving environment specific config.

There are another two REST API servers that the frontend will make requests to: the ‘Video API’ and the ‘Library API’ available at the paths /video/ and /library/ on the same domain. These will yield book and film information that the catalog page will display.

By default, Angular CLI assumes that the frontend is served at a base path / i.e. it inserts <base href="/"> in the index.html. Hence, for example…