Issues with Angular-CLI and Apache

Question

I just ran the angular-cli setup for a new app. I have Apache running which is serving a local API on port 80 at http://localhost/path/to/api. Of course, ng start serves on port 4200 at http://localhost:4200.

I'm on Windows 10 if that is relevant.

So I researched proxying for Angular-cli and created proxy.config.json:

{
    "/api/": { //I've tried "/api", "/api", "/api/*", none worked
        "target" : {
            "host": "localhost",
            "protocol": "http:",
            "port": 80
        }, //also tried just straight "http://localhost" and "http://localhost:80"
        "secure" : false,
        "changeOrigin": false,
        "logLeverl" : "debug",
        "pathRewrite": {
            "^/api/clients/public/" : "/path/to/api/clients/public/"
        }
    }
}

And hooked it up to npm start via package.json. I added the "pathRewrite" to test it on a specific path.

In the console, I get ERROR Object { _body: "<!DOCTYPE html> <html lang="en"> <h…", status: 404, ok: false, statusText: "Not Found", headers: Object, type: 2, url: "http://localhost:4200/path/to/api/clients/public/" } for the call /api/clients/public/

So from the URL I know the proxy config is working (pathRewrite is in effect) but the port is not changed.

I have tried every permutation of the config I've found on the internet and in the documentation.

Does anyone have an idea?

I also tried using a symlink into the Angular application folder but it is redirected to index.html, so if there is a way to exclude that path from the redirect, that works for me too.

Yakov Fain Yakov Fain · Accepted Answer · 2017-08-12T18:10:41

Start with a simple version of proxy-conf.json. Here's what I use:

{
  "/api": {
    "target": "http://localhost:8000",
    "secure": false
  }
}

and run it with

ng serve --proxy-config proxy-conf.json

This works for me when I use the Node.js server (runs on port 8000), and it also works fine with Java Spring Boot (the Tomcat server). My servers just return data. Why do you need path rewrite? Using proxy-conf.json is for dev environment. When you'll deploy the app bundles under Apache, you won't need this proxy.

Issues with Angular-CLI and Apache

1 Answers