Setting Up Angular 12 Proxy Configuration via angular.json

Last Updated on by in Angular

Proxy configuration is a way of diverting specific URLs to a backend server.

Apparently, in this quick Angular 12 proxy tutorial, we learn the easy method to set up Angular CLI to register proxy configuration inside the angular json or CLI configuration file.

Likewise, we don’t require to execute the local server again and again by mentioning the –proxy-config within the Angular command-line interface.

You can use the proxying support in the webpack dev server to divert certain URLs to a backend server, by passing a file to the –proxy-config build option.

For example, to divert all calls for http://localhost:4200/api to a server running on http://localhost:3000/api, take the following steps.

– angular.io

This is the generic way of evoking the --proxy-config through angular CLI:

ng serve --proxy-config proxy.conf.json

The first step is simple and pretty much easy, we just have to create a new src/proxy.conf.json file and here we have to lay down the following configurations.

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

In the CLI configuration file add the proxyConfig option to the serve target:

You need to go to angular.json, mainly used for CLI configuration and place the proxyConfig property to point towards the serve target:

...
...
...
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "angular-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },
...
...
...

You can eventually test out the dev server through the proxy configuration we added in our angular application.

ng serve

If you want, you can tweak the proxy configuration to insert the configuration options;

Here is the proper documentation which lets you make the adjustments in an orderly manner; check webpack DevServer documentation.

But do remember if you make changes in the proxy configuration file. You have to restart the server using ng serve command through command prompt.