Add your Angular 10 Proxy Configuration to angular.json

Add your Angular 10 Proxy Configuration to angular.json

You can configure Angular CLI to use a proxy in the angular.json file so you don't need to specify the –proxy-config CLI option each time your run your local development server:

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

Open the the angular.json file, and simply add the proxyConfig option to the serve target as follows:

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

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. Source.

Next, add a new src/proxy.conf.json file with the following configuration:

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

Next, simply run the ng serve to run your server with the configured proxy information.


✋If you have any questions about this article, ask them in our GitHub Discussions 👈 community. You can also Gitter

✋ Want to master Angular 14? Read our angular tutorial and join our #DailyAngularChallenge where we learn to build components, directives, services, pipes and complete web, mobile, and desktop applications with latest Angular version.

✋ Make sure to join our Angular 14 Dev Community 👈 to discuss anything related to Angular development.

❤️ Like our page and subscribe to our feed for updates!

Find a list of emojis to copy and paste