Angular Proxy in root level

Question

I have an Angular application and a landing page written in jQuery.

I want to serve the landing page every time the request is on the root of http://mywebsite.com. Anything else, let's say http://mywebsite.com/otherpage, I want to serve the Angular application.

With nginx (production), this is fairly easy.

When developing Angular, we can easily proxy other requests, like /api, with --proxy-config proxy.config.json CLI option.

The problem I'm getting is with the root level.

What am I doing wrong? Can't I proxy the root level?

Angular docs tells us to go to Webpack dev-server docs, but still I couldn't figure out how to do it.

My proxy.config.json is like the following:

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug"
  },
  "/": {
    "index": "",
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug"
  }
}

Answer 1

I got a working proxy config which just intercepts the root and not a angular application served with baseHref. You need to use a .js config (https://angular.io/guide/build#proxy-multiple-entries) with an exclusion defined for http-proxy-middleware (https://github.com/chimurai/http-proxy-middleware#context-matching). The config below proxies every request expect when it starts with /otherpage. The angular application should use '/otherpage' as baseHref

const PROXY_CONFIG = [
  {
    context: [
      "/**",
      "!/otherpage**"
    ],
    "target": "http://localhost:3000",
    "secure": false,
  }
];

module.exports = PROXY_CONFIG;

Answer 2

It looks like it was a conflict with the root level after all.

Changing to other level, I could make it work.

The documentation is not explanatory on this.

• https://webpack.js.org/configuration/dev-server/#devserver-proxy
• https://angular.io/guide/build#proxying-to-a-backend-server