(FRONT) FRONT (2022)

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 ( )
<00>  <01>  <02>  <03>  <04>  <05>  <06>  <07>  <08>  <09>  <10>  <11>  <12>  <13>  <14>  <15>  <16>  <17>  <18>  <19>  <20>  <21>  <22>  <23
Link to this page: http://www.vb-net.com/AngularProxy/Index.htm