Reverse proxy Angular Application using Apache Http

Question

I'm building Angular Application. I need to reverse proxying this application using Apache Http:

http://localhost:4200 to http://localhost/my-application

I followed the following steps:

1. Start Angular app on default port 4200: http://localhost:4200
2. Configure httpd.conf of Apache http:

ProxyPass /my-application http://127.0.0.1:4200/
ProxyPassReverse /my-application http://127.0.0.1:4200/

3. Start Apache http
4. On Browser: http://localhost/my-application

Unfortunately, I have the following problem:

GET http://localhost/runtime.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost/polyfills.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost/vendor.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost/main.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost/styles.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost/styles.js net::ERR_ABORTED 404 (Not Found)

I also added the following configuration, into the httpd configuration file:

ProxyPass /my-application/runtime.js http://127.0.0.1:4200/my-application/runtime.js 
ProxyPassReverse /my-application/runtime.js http://127.0.0.1:4200/my-application/runtime.js 

I didn't solve the problem.

Answer 1

This issue seems not be a problem of Apache or reverse proxy, but more likely the references that angular uses to get the files from index.html

In your example you need to retrive files from ./my-application and not from the root page of localhost "GET http://localhost/runtime.js"

Try to change your base

<base href="/my-application">

For more information follow https://angular.io/guide/deployment