Angular proxy is not redirecting to server port

I am running both the backend and angular application on the local host, different ports. Backend is running on 8080 and front-end on 4200. There comes the obvious issue CORS and I configured it accordingly.

proxy.conf.json outside the src

{
"/api": {
"target": "http://192.166.27.160:8080/api/",
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
}
}


environment.development.ts

export const environment = {
production: false,
url: 'http://localhost:4200/api/'
};


angular.json under serve

"options": {
"proxyConfig": "proxy.conf.json"
}


http call

getAuthToken(): Observable<any> {
return this.httpClient.get<any>(environment.url + 'token/');
}


After all this configuration, I made a http request and in the network section, I see that the http call is being made to host 4200 instead of 8080, http://localhost:4200/api/token/. Is this normal? I tried to debug and didn't help. Where could I be doing wrong?

Continue reading...