Как настроить проект Angular2 CLI и Node.js приложение из той же папки

#javascript #node.js #angular

Вопрос:

Я создал проект, используя angular2 cli. Я также создал отдельное приложение node js, которое действует как серверная часть. Я хотел бы переместить мое интерфейсное приложение в приложение node, чтобы я мог запускать оба приложения с помощью node server.js . Мой server.js выглядит примерно так:

 app.use(express.static(__dirname   '/app'));
...
app.get('*', function (req, res) {
    res.sendfile('./app/src/index.html');
});
app.listen(8000);

Мой index.html из angular2 cli выглядит следующим образом:

 <!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>My App</title>
  <base href="/">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <app-root>Loading...</app-root>
</body>

Когда я сейчас запускаю узел server.js и перейдите к http://localhost:8000 / затем я вижу сообщение «Загрузка …», но после этого ничего не появляется, и в консоли также нет ошибок.

1. Вы ссылаетесь на неправильное местоположение ./app/src/index.html . Это должно быть /src/index.html потому, что ваше узловое приложение обслуживает файлы из app каталога. app.use(express.static(__dirname '/app')) . Таким образом, вы должны напрямую ссылаться на местоположение, рассматриваемое /app как корень.

2. @KunalSharma Я вижу ярлык «Загрузка …» в браузере, который указывает, что местоположение указано правильно. Я все равно попытался его изменить и получил сообщение об ошибке «Ошибка: ENOENT: нет такого файла или каталога».

3. Вы должны загрузить plnkr, это, вероятно, поможет лучше. Возможно, какая-то проблема со ссылкой на путь. Проверьте вкладку «Сеть» вашей консоли.

4. @KunalSharma Я попытаюсь загрузить plnkr, хотя я не уверен, что это сработает там, потому что CLI генерирует кучу файлов. На вкладке сеть также нет ошибок.

5. обновите вопрос соответствующим кодом, который также может служить этой цели.

Ответ №1:

Что вам действительно нужно сделать, так это создать сборку prod с помощью angular cli в некоторой папке ( ng build --prod -o /somefolder ) (o для вывода), а затем иметь статический сервер node для этой папки app.use(express.static...) . Чем вы можете добавить один маршрут, чтобы просто вернуть index.html страницу, чтобы ваш URL-адрес не содержал весь путь к папке (например: localhost/somefolder/index.html ) (этот путь уродлив).

Это лучший способ, потому что приложение angular по-прежнему является отдельным и нигде не смешивается с логикой nodejs.

1. Это потребует, чтобы я создавал свою версию каждый раз, когда я что-то меняю в angular, верно? Хотя это работает для производства, это будет несколько бесполезно в разработке, верно?

2. Ну, в разработке вы можете использовать ng build —watch -o / somefolder, и он будет просматривать файлы и перекомпилировать их самостоятельно (это немного медленнее, потому что у ng serve есть файлы в памяти). Кроме того, физическое хранение файлов на диске может помочь вам в отладке в webstorm, если вам это когда-нибудь понадобится