Как запустить Node Экспресс-сервер и Angular на одном и том же порту?

Я новичок в Node и Angular. Мне нужно знать, можно ли запустить приложение Node Express, выступающее в качестве бэкэнд и интерфейс Angular на том же порту. Я последовал за Angular подсказками Quickstart на Angular.io и создал приложение todo Node, но оба они работают на другом порту, что вызывает проблему с запросом на блокировку Cross Origin Request.

Ответ 1

Чтобы получить Angular и Express на одном и том же порту, я всегда работал со своими файлами сборки Angular с помощью самого приложения Express. Вы должны быть в состоянии сказать Экспресс для обслуживания статического контента из каталога сборки Angular следующим образом:

app.use(express.static('../accounting-client/dist'));

Что бы сработало, если бы у вас была такая файловая структура и выполнялась serve.js с Node:

-accounting-server
  -serve.js
-accounting-client
  -dist/*

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

Как упоминал Яков, это не идеальное решение для разработки, поскольку оно не будет работать с автоматическим обновлением сервера Angular.

Ответ 2

Чтобы Node.js обслуживал приложение Angular на одном и том же порту, ваше приложение Angular должно быть развернуто в каталоге Node, в котором развернуты статические ресурсы. Но в режиме dev более продуктивно обслуживать ваши Angular-пакеты (чтобы они автоматически перестраивались в памяти при кодировании) с сервера dev, например, через порт 4200, тогда как сервер Node работает на другом порту, например, 8080.

Чтобы избежать проблем с несколькими источниками, вам необходимо настроить простой прокси файл в приложении Angular для перенаправления всех запросов данных на ваш сервер Node. Например, создайте файл proxy-conf.json в корневом каталоге вашего проекта Angular:

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

Это перенаправит все запросы с /api в URL-адресе на ваш сервер Node, при условии, что он работает на порту 8080. Затем запустите приложение Angular, используя следующую команду:

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

HTTP-запрос в вашем Angular App может выглядеть так:

http.get('/api/products');

Конечно, вам нужно настроить конечную точку /api/products для GET-запросов на вашем Node-сервере.

Ответ 3

Тот факт, что вам нужно иметь доступ к вашему проекту на стороне клиента из проекта Express, как указано spacefozzy, является истинным. но вы все равно можете разделить ваши проекты.
Для этого вы можете создать символическую ссылку из своего каталога проектов на стороне клиента в каталоге проекта Express:

// while in Express directory
ln -s ~/path/tp/client-side/build name-in-espress-dir

Таким образом можно изолировать проекты.