как запустить angular 4 app и NodeJS api на одном и том же порту 4200 для производства и разработки?

Я создал приложение angular 4, и я могу запустить его с помощью ng serve --open, и он работает на localhost:4200 , то, что я хочу, это я также создал api, используя nodejs в том же проекте angular теперь я хочу запустить этот API в localhost:4200/api, поэтому я попробовал что-то вроде этого

Мои angular 4 и NodeJS srtucture выглядят так 

/dist
/server
  /routes
  /server
/src
app.js
package.json

В приложении.js я использовал 

app.use(express.static(path.join(__dirname, 'dist')));
app.use('/app/api', apiRoutes);
const port = process.env.PORT || '3000';
server.listen(port, () => console.log(`API running on localhost:${port}`));

Как только я запускаю с помощью nodemon app.js и иду на localhost:3000 он запускает мое угловое приложение, и это нормально, и чем я иду на localhost:3000/app/api это также работает хорошо и хорошо ,

Но когда Я изменяюсь в angular app, это не автоматическое обновление моего приложения, потому что в данный момент оно работает node app для обновления его мне нужно запустить ng build , и чем это повлияет на мои новые изменения в angular app

Итак, я хочу запустить ng serve --open он будет запускать angular app, но не node JS api, поэтому я хочу запустить оба, и как только я изменюсь в любом из angular app или node js app, это должно быть автоматическое обновление.

1 5
node.js mean-stack

1 ответ:

Вы не можете иметь два разных приложения, работающих на одном и том же порту. Angular-cli использует сервер nodejs (технически это webpack-dev-server) за кулисами при запуске ng serve, Что означает, что порт уже используется.

Существует два возможных решения.

  1. Используйте приложение node для обслуживания статических файлов интерфейса. Тогда вы действительно не можете использовать ng serve (это, вероятно, то, что вы сделали бы, когда бежите в прямом эфире).

  2. Используйте nodejs с другой используйте прокси-конфигурацию Angular, чтобы заставить Angular думать, что порт api на самом деле 4200 (это, вероятно, лучше всего во время разработки).

Это, прежде всего, проблема во время разработки, я думаю, так как вы, скорее всего, не будете (и не должны) использовать ng serve live, поэтому вариант 2 будет моей лучшей рекомендацией.

Чтобы настроить прокси-сервер, создайте файл в корневом каталоге приложения angular под названием proxy.config.json со следующим содержимым: 

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

Затем, когда вы бежите ng serve, вместо этого вы запускаете его с помощью ng serve --proxy-config proxy.config.json.

Вот ссылка на документацию

Вот альтернатива при строительстве для производства (Решение 1 выше):

Для сборки в производстве вы используете ng build --prod, Чтобы создать готовую к производству угловую сборку, а затем (предполагая, что вы используете Express на своем узловом сервере), используйте что-то вроде app.use(express.static('dist/')), как описано в Express documentation. Я сам не использую node (я использую .NET Core), поэтому я боюсь, что я не могу предоставить больше подробностей.

6