Angular: How to Merge Frontend and API URLs

Frontend and Backend Development
1

I configured the API endpoint in my Angular environment file and everything worked as expected until a sudden 404 error appeared.

localhost:4200 reports: HTTP failure when accessing http://localhost:4200/api/data-stream, returning 404 Not Found.

Even when I cleared the API address setting, the application still attempts to reach a concatenated URL, causing another 404 error:

localhost:4200 reports: HTTP failure for http://localhost:4200/data-stream, resulting in 404 Not Found.

What could be causing Angular to merge the frontend URL with the API endpoint, and how can I fix this routing issue?

2

hey alex, ive seen similar probs, solved it by rechecking my env settings and cleaning cache. sometimes the base url in angular.json gets misconfiged, causing merge issues. might be worth a look if youve not already done so.

3

hey alex im surprisd its actin weird. did u try usin a proxy settings file? maybe its a misconfig wit the base href or something else. what changes have u made lately?

4

I experienced a similar issue in one of my projects where the absence of a leading slash in the API endpoint led Angular to treat it as a relative path. The problem was rectified once I corrected the endpoint in the environment file by prefixing it with a slash, ensuring that it pointed correctly to the external API rather than appending to the base URL. Additionally, examining proxy configurations in the development server settings helped me understand how routing merges could occur, and adjusting those settings also provided a solution.

5

hey alex, maybe its a caching issue or a misconfigured base hre in your index.html? sometimes angular holds onto old env details accidently. did you try clearing both cli and browser caches? how does your proxy config look - any mismatch there?