Une Longue Explication
J'ai passé une quantité décente de temps à trouver comment faire cela dans ma propre environnements de développement. Le meilleur que j'ai trouvé est une deux fois mise en œuvre, qui combine un grand nombre de echonax de l', squirrelsareduck, et Max est la solution, mais profitant de construit dans Angulaire de la CLI de stratégies pour regarder frontend/d'angle, et à l'aide de nodemon pour regarder le backend/Express change. Le court de il est la fin de la course à pied deux processus (ng construire et nodemon) pour obtenir votre environnement de développement et en cours d'exécution, mais il reconstruit automatiquement et fonctionne tout sous un Express serveur web.
Le premier processus, vous devrez exécuter de construire les Angulaire dist dossier, et de regarder toutes les modifications apportées à l'angle de frontend. Heureusement pour nous, Angulaire CLI pouvez le faire en natif (Testé sur Angulaire de la CLI >= 1.5) avec la commande suivante:
ng build --watch
Vous aurez besoin de quitter cette exécution en arrière-plan, mais cela montre que les modifications apportées à l'angle de code, et de reconstruire les paquets à la volée.
Le second procédé consiste à utiliser nodemon pour exécuter votre Express serveur, et peuvent prendre un peu plus de l'installation et de la planification, selon l'étendue de votre backend/l'Express de l'installation. Assurez-Express est pointant vers votre fichier d'index dans la dist dossier. Le gros avantage ici est que vous pouvez ajouter tout cela dans une Gulpfile avec gulp-nodemon à faire encore plus de tâches séquentielles après l'exécution de nodemon pour regarder le backend/Express comme peluchage votre backend, l'exécution de tests en parallèle de vos constructions, minifying votre backend, ou tout autre chose que vous pouvez penser à utiliser Gulp pour. Utiliser npm ou de Fils à ajouter et installer nodemon de votre projet dépendances, puis exécutez la commande suivante pour démarrer votre Express server:
nodemon app.js
Remplacer app.js avec tout fichier que vous utilisez pour construire votre Express backend, et il doit maintenant reconstruire à tout moment il ya des modifications apportées à votre backend.
tldr;
Exécuter deux processus distincts dans le fond pour commencer votre environnement de développement. Première exécution:
ng build --watch
Ensuite, ajoutez nodemon à votre projet dépendances, et exécutez la commande suivante dans le contexte où app.js est remplacée par tout Expresse de votre part, le fichier est appelée:
nodemon app.js
Bonus
Depuis que vous avez demandé comment recharger automatiquement le navigateur, votre meilleur pari sera de prendre avantage d'un navigateur plug-in appelé LiveReload. Puisque nous sommes déjà en cours à l'aide de nodemon pour regarder notre backend, vous pouvez sérieusement envisager d'utiliser Gulp si vous n'êtes pas déjà à exécuter à la fois nodemon et LiveReload que les deux tâches. Votre meilleur pari pour la mise en œuvre de LiveReload dans Gulp est d'utiliser le trait d'actualisation de plugin, comme c'est une version mise à jour de la gulp-livereload plugin. Vous vous retrouverez avec un Gulpfile ressemblant à ceci:
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);
});
Maintenant, il suffit de lancer la gorgée de commande à la place de nodemon app.js pour commencer votre Express server.
