Подключение express.js с помощью Angular CLI в среде dev

Я нашел отличный учебник, в котором объясняется, как настроить express.js с помощью Angular CLI, но в этом учебнике приложение Angular скомпилировано в папку dist dist: https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli

Как интегрировать express.js с Angular CLI, но я хочу, чтобы express.js работал с версией разработки приложения Angular, и я хочу, чтобы nodemon перезапустился, если я вношу изменения в выражение ИЛИ Angular.

Проводили более восьми часов, пытаясь заставить это работать. Спасибо!

Я не хочу запускать 'ng build' каждый раз, когда я вношу изменения в приложение Angular (это занимает слишком много времени). Я хочу мгновенную перезагрузку всякий раз, когда я сохраняю изменения в моем приложении Angular (as если я запускал "ng serve" ) или экспресс-приложение.

Я нашел учебник, в котором вы подключаете Angular 2 QuickStart с помощью Express, он работает, но я ищу использовать Angular CLI.

Я понимаю, что CLI Angular использует WebPack, тогда как QuickStart использует System.js

ОТВЕТЫ

Ответ 1

НОВЫЙ ОТВЕТ

Мой опыт в 15 часов научил меня, что он пытается использовать приложение Angular с Экспрессом во время разработки НЕ является хорошей идеей. Правильный способ - запустить Angular и Express как два разных приложения на двух разных портах. Angular будет обслуживаться на порту 4200 и Express на порте 3000, как обычно. Затем настройте прокси для вызовов API для приложения Express.

Добавьте proxy.config.json в корневой каталог проекта Angular 2:

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

Откройте новую вкладку терминала и запустите эту команду, чтобы запустить приложение Express:

nodemon [YOUR_EXPRESS_APP.js] --watch server

(YOUR_EXPRESS_APP.js обычно называется server.js или app.js. server - это каталог, в котором вы храните все ваши файлы приложений Express)

Откройте вторую вкладку терминала и запустите эту команду, чтобы запустить Angular приложение:

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

Это обеспечит перезагрузку приложения Angular и перезагрузка браузера при внесении изменений в любой файл приложения Angular. Аналогично, сервер Express перезагружается при внесении изменений в любые файлы Экспресс-приложений.

Ваше приложение Angular находится здесь: http://localhost:4200/

Посмотрите это видео, чтобы узнать, как настроить прокси для вызовов API с Angular CLI

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

ПРЕДЫДУЩИЙ ОТВЕТ

Используя вход от @echonax, я придумал это решение, которое довольно быстро:

  • Добавить Express в приложение Angular 2 (построено с помощью Angular CLI), как в этом tutorial
  • Запустите это в терминале:

ng build -w & nodemon server.js --watch dist --watch server

Это приведет к восстановлению приложения Angular в папке dist, и сервер node будет перезагружаться каждый раз, когда это произойдет. Тем не менее, с этой настройкой нет автоматического обновления браузера: (

Подробнее об этом здесь:

https://github.com/jprichardson/reload

Ответ 2

Используя angular -cli, команда ng build или ng build --prod предоставит вам собранные файлы вместе с index.html. Сделайте этот app.js (node/express) целевой файл.

Пример:

app.use( express.static(__dirname + '/src' ) ); //<- it will automatically search for index.html under src folder.

Ответ 3

Дольше Объяснение

Я потратил довольно много времени на то, как это сделать в моей собственной среде разработки. Лучшее, что я придумал, - это двухкратная реализация, которая сочетает в себе множество решений echonax, squirrelsareduck и Max, но использует встроенные стратегии Angular CLI для просмотра изменений интерфейса /Angular и использования nodemon to наблюдайте за внутренними/экспресс-изменениями. Короче говоря, вы в конечном итоге запускаете два процесса (ng build и nodemon), чтобы запустить и запустить вашу среду разработки, но она автоматически перестраивает и запускает все под одним веб-сервером Express.

Первым процессом, который вам нужно будет выполнить, будет создание папки Angular dist и просмотр любых изменений, внесенных в интерфейс Angular. К счастью для нас, Angular CLI может сделать это изначально (проверено на Angular CLI >= 1.5) со следующей командой:

ng build --watch

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

Второй процесс включает использование nodemon для запуска вашего сервера Express и может потребоваться немного больше настройки и планирования в зависимости от того, насколько обширна ваша внутренняя/экспресс-настройка. Просто убедитесь, что Express указывает на ваш индексный файл в папке dist. Большим преимуществом здесь является то, что вы можете добавить все это в Gulpfile с помощью gulp -nodemon, чтобы выполнить еще более последовательные задачи после запуска nodemon, чтобы посмотреть бэкэнд /Express, например, перетащить ваш сервер, выполнить тесты параллельно с вашими сборками, ваш сервер или что-то еще, что вы можете использовать для использования Gulp для. Используйте npm или Пряжа, чтобы добавить и установить nodemon в зависимости от проекта, а затем запустить следующее для запуска сервера Express:

nodemon app.js

Замените app.js любым файлом, который вы используете для создания вашего backend сервера, и теперь он должен перестраиваться в любое время, когда есть изменения, сделанные на вашем сервере.

TL;DR;

Запустите два отдельных процесса в фоновом режиме, чтобы запустить среду разработки. Первый запуск:

ng build --watch

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

nodemon app.js

Bonus

Поскольку вы спросили, как автоматически перезагрузить браузер, лучшим вариантом будет использование плагина браузера под названием LiveReload. Поскольку мы уже собираемся использовать nodemon для просмотра нашего бэкэнда, вы можете серьезно подумать об использовании Gulp, если вы еще не запускаете как nodemon, так и LiveReload в качестве двух задач. Лучшим вариантом для реализации LiveReload в Gulp является использование плагина gulp -refresh, так как это обновленная версия плагина gulp -livereload. В итоге вы получите Gulpfile, похожий на это:

const defaultAssets = require('./config/assets/default'),
  gulp = require('gulp'),
  gulpLoadPlugins = require('gulp-load-plugins'),
  runSequence = require('run-sequence'),
  plugins = gulpLoadPlugins(),
  semver = require('semver');
  
// I store the locations of my backend js files in a config file, so 
// that I can call them later on. ie; defaultAssets
gulp.task('nodemon', function () {
  // Node.js v7 and newer use different debug argument
  const debugArgument = semver.satisfies(process.versions.node, '>=7.0.0') ? '--inspect' : '--debug';

  return plugins.nodemon({
    script: 'app.js',
    nodeArgs: [debugArgument],
    ext: 'js,html',
    verbose: true,
    watch: defaultAssets.server.allJS
  });
});

// Watch Files For Changes
gulp.task('watch', function () {
  // Start LiveReload
  plugins.refresh.listen();

  // Watch backend for changes
  gulp.watch(defaultAssets.server.allJS).on('change', plugins.refresh.changed);
  // Watch frontend dist folder for changes
  gulp.watch('./dist').on('change', plugins.refresh.changed);
});
  
  
gulp.task('default', function (done) {
  runSequence(['nodemon', 'watch'], done);
});

Ответ 4

Мне тоже было интересно. Курс Udemy в стеке MEAN от Max Schwarzmüller содержит пример кода для интеграции Express и Angular. В этом примере кода package.json файл используется свойство scripts.build, чтобы предоставить webpack команду, которая следит за angular файлами и обновлениями соответственно. Я не хочу копировать его код здесь, но это общая идея. Остальным потребуются некоторые открытия.

В файле readme он предлагает запустить сборку npm run, которая запускает webpack, а затем в новом терминале, запускающем npm для сервера node. Поэтому теоретически это запускает две программы, которые вы предложили в своей версии ответа. Но он выполняет более "сценарий" /заранее определенный способ запуска процесса сборки angular вместо перехода в подкаталог angular и ввода ng build -watch там и запуска Express-приложения отдельно.

Ответ 5

Может быть, вы можете добавить зависимость, называемую concurrently ', или (npm-run-all, parallelshell).

npm i concurrently --save-dev

затем отредактируйте package.json следующим образом: `

"scripts": {
        "dev": "concurrently \"ng build -w\"  \"cross-env NODE_ENV=development node .\" "
    }

` это может быть работа.

Литература:

concurrently пример: fooobar.com/questions/33238/...,

npm-run-all пример: fooobar.com/questions/33238/...,

parallelshell пример: fooobar.com/questions/335533/....

Ответ 6

"etayluz" решение очень хорошее. Но я хочу добавить дополнительный параметр для NEW ANSWER, чтобы не открывать два раза терминал.

Во-первых, вам необходимо установить одновременно пакет (https://www.npmjs.com/package/concurrently);

npm install concurrently --save

Затем вы можете добавить ниже коды в свой файл package.json.

"start": "concurrently \"npm run serve-api\" \"npm run serve\"",
"serve": "ng serve --port 3333 --proxy-config proxy.config.json", // You could add --port for changing port
"serve-api": "nodemon [YOUR_EXPRESS_APP.js] --watch server",

npm start достаточно для запуска вашего проекта.