Как настроить роутинг/прокси между Angular приложениями, запущенными вместе?

Для настройки роутинга и проксирования между Angular приложениями, запущенными вместе, можно использовать несколько подходов. Рассмотрим два из них: использование @angular/cli и использование собственного сервера в качестве прокси.

1. Использование @angular/cli:
- Установите Angular CLI, если вы еще не сделали это, командой npm install -g @angular/cli.
- Создайте два отдельных Angular приложения с помощью команды ng new или склонируйте уже существующие проекты.
- В каждом проекте, в файле angular.json укажите разные значения outputPath, чтобы результаты сборки обоих проектов сохранялись в отдельных папках.
- Для каждого проекта, в файле angular.json настройте параметры сервера разработки, чтобы он запускался на разных портах. Найдите секцию "serve" -> "options" и задайте разные значения port и proxyConfig для каждого проекта.
- Создайте файл proxy-config.json в корневой папке каждого проекта и опишите в нем настройки прокси. Пример конфигурации:

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

Это пример конфигурации прокси для перенаправления всех запросов, начинающихся с /api/, на локальный сервер, работающий на порту 3000.
- Для каждого проекта, в файле package.json, добавьте команду "start:proxy": "ng serve --proxy-config proxy-config.json".
- Запустите оба проекта с помощью команды npm run start:proxy.
- Теперь приложения будут работать на разных портах, и все запросы, удовлетворяющие фильтру прокси, будут перенаправляться на указанный сервер.

2. Использование собственного сервера в качестве прокси:
- Создайте отдельный сервер, например, с использованием Node.js и Express.js.
- В конфигурации сервера настройте роутинг, чтобы все запросы к определенному пути перенаправлялись на нужное приложение Angular.
- Для примера, используя Express.js, настройте сервер следующим образом:

     const express = require('express');
     const httpProxy = require('http-proxy');
     
     const app1Proxy = httpProxy.createProxyServer({ target: 'http://localhost:4200' });
     const app2Proxy = httpProxy.createProxyServer({ target: 'http://localhost:4300' });
     
     const app = express();
     
     app.use('/app1/*', (req, res) => {
       app1Proxy.web(req, res);
     });
     
     app.use('/app2/*', (req, res) => {
       app2Proxy.web(req, res);
     });
     
     app.listen(3000, () => {
       console.log('Proxy server listening on port 3000');
     });

В этом примере все запросы, начинающиеся с /app1/, будут перенаправляться на приложение Angular, запущенное на порту 4200, а все запросы, начинающиеся с /app2/, будут перенаправляться на приложение Angular, запущенное на порту 4300.
- Запустите сервер с помощью команды node server.js.
- Теперь все запросы к вашему серверу, удовлетворяющие заданным путям, будут перенаправляться на соответствующие приложения Angular.

Оба эти подхода позволят вам настраивать роутинг и проксирование между Angular приложениями, запущенными вместе. Выбор между ними зависит от ваших предпочтений и требований к проекту.