I’m having trouble with my Angular application where it keeps adding my local development URL to my API calls. I configured my API base URL in the environment.ts file and everything was working properly before.
Now I’m getting this weird error where Angular is putting localhost:4200 in front of my actual API endpoint. The error message shows something like:
Http failure response for http://localhost:4200/my-backend-api.somecloud.amazonaws.com/api/v1/posts: 404 Not Found
I even tried setting my API URL to an empty string but then it just calls http://localhost:4200/posts instead of the correct external API.
Has anyone seen this issue before? It seems like Angular is treating my external API URL as a relative path somehow.
This happens when your API URL is missing the protocol prefix. Angular’s HttpClient treats URLs without http:// or https:// as relative paths, so it just tacks them onto your current domain. Check your environment.ts file - make sure your API URL has the full protocol. Should look like https://my-backend-api.somecloud.amazonaws.com/api/v1, not just my-backend-api.somecloud.amazonaws.com/api/v1. I hit this exact issue moving from dev to production. Fixed it by using the complete absolute URL format every time. Also double-check you’re actually importing and using the environment config in your service files - sometimes there are hardcoded relative paths that didn’t get updated.
check your HTTP interceptors - i had the same issue where an interceptor was changing the base URL. also make sure you’re not using relative imports in your service by mistake. since it worked before, maybe a dependency update broke the URL handling.
Hmm interesting - are you using a proxy config in your angular.json? Proxy settings can mess with external URLs and force them through localhost. Did this start after an Angular update or when you changed your build setup? Would help to see your environment.ts file.