TL;DR: How to configure your Angular project to use a backend while your are developing in local mode.
Rarely you have to develop an isolate Angular app. The normal thing is that it has access to a backend and/or consumes one or more APIs.
Then, you starts the development in your local computer and when you write your service for access to the backend or API, and access with your browser to http://localhost:4200...
Surprise! Probably you have a CORS problem… (at least)
Angular CLI provides a solution to bypass these problems: reverse proxy server.
Enable the Angular Proxy
To use the angular proxy you need to define a configuration file and pass it when invoking.
We use the following
proxy.confas base template.
With this simple configuration, any request which its URL starts with “/api”, it’s reversed proxy to “http://my-backend.com/api…”. In example, “/api/v1/login” is proxied to “http://my-backend.com/api/v1/login”.
We set the
logLevel to “debug” to view each request,
secure to “false” (to no check https requests) and
changeOrigin to true (change the
Host header with the target host).
Now we need to start the development server with the use of the proxy.
ng serve --proxy-config proxy.conf.js
You can also modify your package.json to use with
npm run start.
Let’s start with the special cases.
Case 1: The backend path is not the same like your app
In this case, you have a backend running at localhost:8000 and on your angular you have specified the path prefix “/api".