How to Setting Up Proxy Configuration in Angular 14

In this tutorial, we will learn about How to Setting Up Proxy Configuration in Angular 12,13, or 14 versions.

What is a Proxy?

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

Also read, 5 Reasons Angular Is The Next Big Thing In Web Development

Set up Proxy Configuration in Angular step by step:

Step 1: Create a proxy config file

Create a new src/proxy.conf.json file and add the following configurations:

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

Other proxy.config.json options:

target: Here is where the backend URL needs to be specified.

pathRewrite: This option is used to change or rewrite the path.

changeOrigin: We should set this value to true if your backend API is not accessible via localhost.

logLevel: If you want to make sure the proxy configuration is functioning properly use this.

Step 2: Update CLI configuration

 Go to angular.json and place the proxyConfig property to point towards the serve target as below:

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

Now You can test the dev server through the proxy configuration  which we have added in our angular application using the ng serve command