Setup Angular proxy

1. What is Angular developer server and proxy config.

Full documentation of setup Angular proxy present in this page https://angular.io/guide/build#proxying-to-a-backend-server, but this is simplest notes for developers.

Firstly, Angular frontend has ordinary WebPack Developer server https://webpack.js.org/configuration/dev-server/#devserver-proxy, therefore all format and parameters described in WebPack Dev Server.

You can observer all static files stored in developer server as http://localhost/webpack-dev-server.

So, Angular proxy configuration exactly is a WebPack Dev server configuration, and request to Backend API going through a WebPack proxy server, for example in my Cryptochest project is look as:

   1:  {

   2:    "*": {

   3:      "target": "http://localhost:7000",

   4:      "secure": false,

   5:      "logLevel": "debug",

   6:      "changeOrigin": true,

   7:      "headers": {

   8:        "Connection": "keep-alive"

   9:      }

  10:    }

  11:  }

Where http://localhost:7000 is place of my backend API.

2. Inject proxy config to Angular Developer server.

There are two way, a some project can not tuned angular.json file, for example RPAT project developed by a lot of developers at least 5 years, this is sophisticated and complex project, but still have no link to proxy config in angular.json.

Therefore start of this project is possible only as

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

However, in my project Cryptochest I have insert link to proxy at the same beginning.

Therefore start is possible as

# ng serve --open 

3. Add environment dependency.

If you have simple url like "/MyController/MyMethod" without any prefix WebPack Developer Server transfer request to your Backend. However, you can create some variables in environment.ts and add this variables to any request. For example this is a way from any Angular learning books.

This is more sophisticated way from RPAT project with service base page and RxJs Observable future.

Comments ( )