How To Setting Up Proxy Configuration In Angular 14

Create a proxyConfig file

• File name : proxy.conf.dev.json
• Location: project top level location

{
  "/auth/*": {
    "target": "https://kube-master-h1.informatik.fh-nuernberg.de",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  },
  "/api/*": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

Add proxyConfig Entry in your angular.json

• Add proxyConfig entry in architect -> serve -> options

"architect": {
..
   "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angular-oidc-authorization-sample:build",
            "proxyConfig": "proxy.conf.dev.json"
           },

Validate proxyConfig file by using ng server -verbose

# ng serve --verbose
Your global Angular CLI version (15.0.0) is greater than your local version (14.2.9). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
- Generating browser application bundles (phase: setup)...<i>
    [webpack-dev-server] [HPM] Proxy created: /auth  -> https://kube-master-h1.informatik.fh-nuernberg.de
    [webpack-dev-server] [HPM] Subscribed to http-proxy events: [ 'error', 'close' ]
<i> [webpack-dev-server] [HPM] Proxy created: /api  -> http://localhost:8080
    [webpack-dev-server] [HPM] Subscribed to http-proxy events: [ 'error', 'close' ]

Reference

• https://www.tutscoder.com/post/proxy-configuration-angular