Angular 6 proxy.conf.json on apache not working

Question

I created a project on Angular 6 and setup proxy.conf.json like this:

{
    "/test-service": {
        "target": "http://myhost:8080/test-service/",
        "secure": true,
        "pathRewrite": {
            "^/test-service": ""
        },
        "logLevel": "debug",
        "changeOrigin": true
    }
}

And on my pc is running like charm. But when i do:

ng build --prod --optimization=false

And copy builded files to the server ( apache2 /var/www/html) the proxy pass is not working I tried to configure apache proxy pass :

ProxyPass /test-service/    http://localhost:8080/test-service/
ProxyPassReverse http://localhost:8080/test-service/  /test-service/

but still no luck.

Do i need to change some apache config or to somehow include proxy.conf.json to the build?

Does it work in normal dev mode? It seems like you should drop the 'test-service' path at the "target" field, so it proxies straight to your server at http://myhost:8080 — shuk
– shuk, Commented Oct 16, 2018 at 12:46
Yes it is working on normal dev mode. I tried to remove this but it still return me http status 404 not found — Владимир Гичев
– Владимир Гичев, Commented Oct 16, 2018 at 12:53
Ahh wait. the proxy.conf is not even included in the production build. Production builds require a different setup of configurations — shuk
– shuk, Commented Oct 16, 2018 at 13:01
Can you explain me what type of setup is require? Or post me tutorial? — Владимир Гичев
– Владимир Гичев, Commented Oct 16, 2018 at 13:05
I added some more details about the procedures, keep me posted — shuk
– shuk, Commented Oct 16, 2018 at 13:24

shuk · Accepted Answer · 2018-10-16 13:22:57Z

2

proxy.conf.json is not included in the production files and therefore requires a different kind of setup.

Two approches may be:

Include the newly created production files within the server 'public' folder so it serves them as the UI for the server.

in express:

app.use('/', express.static(path.join(__dirname, './path/to/client/build/files')));
Serve the Front UI separated from the server, while ALLOWING CORS specifically pointing the Client origin (ex: localhost:4200 or www.example.com) and MAKING SURE the API calls point to the server you built. this can be done dynamically with environment variable which serves different values according to serve mode (prod : true/false); When build --prod is used, environment.prod.ts values are used then you will need to include the environment.APIEndpoint in all of your API call strings (ex: this.http.get(environment.APIEndpoint + '/route/somewhere')

To keep using proxy.conf.json for dev and also preparing for prod:

In dev mode: environment.APIEndpoint = 'test-service'

In prod mode: environment.APIEndpoint = 'https://www.example.com/api' (or https://api.example.com')

answered Oct 16, 2018 at 13:22

shuk

1,8131 gold badge18 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Владимир Гичев Over a year ago

I manage to fix the problem. As Omer Shukar said proxy.conf is not included in build for prod. To fix that i added BASE_URL new constant that is directly pointing to the apache on the server. Thank you for the help.

shuk Over a year ago

Awesome! glad to have helped :-)

Collectives™ on Stack Overflow

Angular 6 proxy.conf.json on apache not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related