How to configure routing/proxy between Angular apps running together?

Question

Angular

I am splitting the site into multiple applications but working together.
I created several application and proxy.config.json, but I want to achieve logic so that all applications work for me.

I would like the following

mysite.com/ -> baseApplication
mysite.com/admin -> adminApplication
mysite.com/supplier-member -> supplierApplication

etc.

Each application I have is set to a different port
. How do I put them together?

Running everything together `ng serve --proxy-config proxy.conf.json`

example`proxy.conf.json`

{
      "/": {
        "target": "[::1]:4501",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true,
        "pathRewrite": { "^/*": "" },
        "headers": {
          "Connection": "keep-alive"
        }
      },
      "/signin": {
        "target": "[::1]:4501",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true,
        "pathRewrite": { "^/*": "" },
        "headers": {
          "Connection": "keep-alive"
        }
      },
      "/member-customer/*": {
        "target": "[::1]:4502",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true,
        "pathRewrite": { "^/*": "" },
        "headers": {
          "Connection": "keep-alive"
        }
      },
      "/admin/*": {
        "target": "[::1]:4504",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true,
        "pathRewrite": { "^/*": "" },
        "headers": {
          "Connection": "keep-alive"
        }
      },
      "/*": {
        "target": "[::1]:4503",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true,
        "pathRewrite": { "^/*": "" },
        "headers": {
          "Connection": "keep-alive"
        }
      }
    }

But only `localhost:4200/` works for me and is taken from Angular.json by default application. It does work.
if I put other url, it does not work.

Answer 1

it's not clear what goes where.
Perhaps understanding how a proxy works will help you.
When starting the dev server, we start a server on a node that can listen to the network on the specified port and give static files collected by webpack.
Next, in the browser, we follow a link like "/api" which will go to the same host and port on which the page is running. This request will come to the same place where the page was taken from, i.e. to our nodejs server.
And there, parsing of requests is turned on, which says “yeah, here is the address / api we should be proxied here” and the server on the node makes a request on its own to the address specified in the proxy config, passing all the data from the request there. Having received a response, it will send it under the guise of a response from the node server, which will get into the browser.
Why do we need a proxy at all? So that the browser considers that it does not go far anywhere, and does not send OPTIONS. And in order not to prescribe extra paths in the front, you can change the addresses of backends for development by slipping another config.
Now what are the other urls? If you go from the browser to a different url, it will never get into the running proxy, unless the IP address of the host and port match.
A proxy will help separate requests to different backends, so that from the browser side they look like they go to the same host.
And here different front-line apps are not at all clear.