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