Merging API and frontend URLs in Angular application

Hey everyone! I’m having trouble with my Angular app. I was using environment.ts to set the API address and it was working fine before. But now I’m getting a weird error.

The error says something like this:

Http failure response for http://localhost:4200/udagram-api-dev.eba-smxqzhkz.us-east-1.elasticbeanstalk.com/api/v0/feed: 404 Not Found

I tried setting the API address to an empty string to see if that would help. But then I got this error instead:

Http failure response for http://localhost:4200/feed: 404 Not Found

It looks like the frontend URL is being combined with the API URL somehow. Has anyone run into this before? Any ideas on how to fix it? Thanks in advance for any help!

hey there! have u checked ur angular.json file? sometimes the ‘deployUrl’ setting can cause weird url merging. also, make sure ur not accidentally using relative paths in ur http requests. maybe try using the full url in ur service calls? just a thought! let me know if that helps or if u need more ideas :slight_smile:

sounds like ur baseUrl in the api service might be messed up. check if ur using relative urls for endpoints (like ‘/feed’) without a proper baseUrl. try setting the full API url in ur service or interceptor, not just in environment. that should fix the weird merging issue.

I encountered a similar issue in one of my Angular projects. The problem likely stems from how your HttpClient is configured. Check your API service or HTTP interceptor for any URL manipulation. Ensure you’re using absolute URLs for your API endpoints, not relative ones. If you’re using an interceptor, verify it’s not inadvertently modifying the request URL. Additionally, double-check your environment.ts file to confirm the API URL is correctly set and imported in your services. These steps should help resolve the URL merging problem.