Add Angular 11 CLI Proxy Configuration in angular.json File

In this Angular CLI proxy configuration tutorial, we will learn how to add angular proxy configuration in the angular.json file.

This quick tutorial saves your precious time, and you won’t have to register –proxy-config CLI option repetitively in conjunction with starting the local angular development server.

The locus of proxy config is the webpack dev server; from here, you can avert specific URLs to a backend server by adding a file to the –proxy-config build.

For instance, by default angular development server runs on:

http://localhost:4200/api

And, we will update the angular proxy configuration in the angular.json file and start it on:

http://localhost:3000/api

Nonetheless, you can use the recommended angular CLI command to start the –proxy-config:

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

Consequently, you require to create a new proxy.conf.json fie in the src directory; on top of that, add the suggested code within the file:

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

Also, define a new CLI configuration by registering a proxyConfig option to establish a target in the angular.json file:

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

Lastly, please get to the terminal and execute the command to check the new development server that we have configured using proxy configuration.

ng serve --o