Как запустить Node Express server и Angular на одном порту?

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

8
angular express node.js

3 ответов

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

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

который будет работать, если у вас есть файловая структура, как так и работает serve.js С узла:

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

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

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

8

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

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

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

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

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

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

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

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

8

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

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

таким образом, вы можете сохранять проекты, изолированные.

0