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"
  }
}

c0l3 · Accepted Answer · 2019-06-12 14:38:38Z

3

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;

answered Jun 12, 2019 at 14:38

c0l3

8337 silver badges14 bronze badges

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

2 Comments

Dan King Over a year ago

This doesn't work for me with Angular - but then I can't see any way to configure http-proxy-middleware for an out-of-the-box Angular application?

c0l3 Over a year ago

angular uses the proxy support in the weback development server. Which is http-proxy-middleware. See documentation: angular.io/guide/build#proxying-to-a-backend-server

Gustavo Lopes · Accepted Answer · 2019-05-23 14:44:58Z

1

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.

edited May 23, 2019 at 14:44

answered May 23, 2019 at 14:36

Gustavo Lopes

4,2534 gold badges24 silver badges63 bronze badges

Comments

MicMro · Accepted Answer · 2019-10-17 20:18:50Z

1

It works if you set devServer.index to a falsy value.

https://webpack.js.org/configuration/dev-server/#devserver-proxy

Note that requests to root won't be proxied by default. To enable root proxying, the devServer.index option should be specified as a falsy value:

module.exports = {
    //...
    devServer: {
        index: '', // specify to enable root proxying
        host: '...',
        contentBase: '...',
        proxy: {
        context: () => true,
        target: 'http://localhost:1234'
        }
    }
};

answered Oct 17, 2019 at 20:18

MicMro

1671 silver badge5 bronze badges

2 Comments

Dan King Over a year ago

How do you do this in an out-of-the-box Angular application? The devServer configuration doesn't appear to be exposed by default?

Dan King Over a year ago

Never mind - I've figured it out. I can add devServer to my customWebpackConfig (using the Angular custom-webpack builder)

Dan King · Accepted Answer · 2022-11-07 15:58:33Z

1

Update

The solution below worked for me at time of writing, but no longer seems to work with later versions of Webpack/Angular.

@Zygimantas has suggested a solution in the comments below, but unfortunately that doesn't work for me either.

I got this to work as follows:

In angular.json:

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./my-custom-webpack.config.js"
      },

  ...

  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "proxyConfig": "webpack-proxy.conf.js",

  ...

In my-custom-webpack.config.js:

module.exports = {
  ...
  devServer: {
    index: '' // Allows us to proxy the root URL
  }
}

In webpack-proxy.conf.js

const PROXY_CONFIG = [{
  context: [
    '/'
  ],
  target: 'http://proxy-to-url',
  bypass: function(request) {
    // proxy the root URL, plus "/api/*" - otherwise serve using Angular
    return /^\/(api\/.*)?$/.test(request.url) ? null : '/index.html';
  },
  secure: false
}];

module.exports = PROXY_CONFIG;

(Needs @angular-builders/custom-webpack installed: npm i -D @angular-builders/custom-webpack)

edited Nov 7, 2022 at 15:58

answered May 13, 2022 at 14:00

Dan King

3,6285 gold badges27 silver badges26 bronze badges

4 Comments

Zygimantas Over a year ago

my-custom-webpack.config.js should be: module.exports = { devServer: { devMiddleware: { index: "", }, }, };

Dan King Over a year ago

@Zygimantas should it? Why? The above works fine for me.

LaurentG Over a year ago

This solution doesn't work if I don't change the webpack.config.js according to suggestion of @Zygimantas. I assume, they changed the configuration in webpack. Also see documentation: webpack.js.org/configuration/dev-server/#devserverproxy

Dan King Over a year ago

Hmm - there has been a change in webpack and/or Angular, which means my solution above doesn't work any more. I've tried using @Zygimantas' solution, but that doesn't work for me either... :-(

Collectives™ on Stack Overflow

Angular Proxy in root level

4 Answers 4

2 Comments

Comments

2 Comments

Update

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Update

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related