0

Добрый день, подскажите как слепить вместе angular-cli приложение и api написанное на node+express. Чтобы backend и frontend работали под одним доменом (localhost:4200).

Нашел решение с использованием --proxy-config при запуске ng serve, но не уверен что оно правильное.

3
  • вместе не выйдет я думаю. Но можно сбилдить ангуляр и просто через nodejs выдавать как статические файлы. Только роутинг не будет работать так как нужно, а именно когда сразу нужно перейти на какой то роут. Тогда придеться добавить как в 1 ангуляре # в путь. 8 июн 2017 в 16:10
  • Ага, сбилдил, запустил на apache сервере, роуты неработают если вбивать их в адресной строке, причем даже если писать localhost/#/pages, адрес меняется на localhost/home#/pages и подгружается компонент который указан базовым. Это никак не вылечить? И как тогда вообще ставить angular приложение на хостинг? 8 июн 2017 в 16:39
  • Просто поставить # в пути мало. Нужно еще перенастроить роутер в приложении. angular.io/docs/ts/latest/guide/router.html . Вбейте в поиске hash. 8 июн 2017 в 16:58

1 ответ 1

0

Решил следующим образом: Для dev мода: Создаем в корне файл proxy.conf.json

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

сервер запускаем вот так: ng serve --proxy-config proxy.conf.json

После билда (запуск на apache):

httpd.conf (в папке conf апача)

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_ajp_module modules/mod_proxy_ajp.so
LoadModule proxy_http_module modules/mod_proxy_http.so
ProxyPass /api http://localhost:3000

<Directory "c:/Server/Apache24/htdocs/www">
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

Как результат, можно обращаться к API просто вот так http.get('/путь', ...), без всяких localhost:3000/api/путь и вечных проблем с CORS.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.