Accrochage express.js Angulaire de la CLI en environnement de dev

J'ai trouvé un tutoriel qui explique comment le programme d'installation express.js Angulaire de la CLI, mais dans ce tutoriel, l'angulaire de l'application est compilée dans une production dist dossier:
https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli

Comment puis-je intégrer express.js Angulaire de la CLI, mais je veux le express.js travailler avec la version de développement de l'Angulaire de l'app et je veux le nodemon à redémarrer si je fais des modifications sur l'express OU angulaire app.

Ont passé plus de huit heures à essayer d'obtenir ce travail. Merci!

Je ne veux pas courir "ng construire" chaque fois que je fais un changement de l'angle d'application (cela prend trop de temps) - je veux instantanée de rechargement à chaque fois que j'enregistre un changement à mon angulaire de l'application (comme si j'étais en train de "ng servir") ou express app.

J'ai trouvé un tutoriel où vous vous accrochez Angulaire 2 Démarrage rapide avec Express, il fonctionne, mais je suis à la recherche d'utiliser Angulaire de la CLI.

Je comprends que l'ouverture Angulaire de la CLI utilise WebPack alors que le Démarrage rapide utilise System.js

InformationsquelleAutor etayluz | 2017-03-20

89

NOUVELLE RÉPONSE

Mon expérience de 15 heures m'a appris que d'essayer de servir Angulaire app
avec Express au cours du développement n'est PAS une bonne idée. La bonne façon est d'exécuter Angulaire et d'Exprimer que deux applications différentes sur deux ports différents. Angulaire sera servi sur le port 4200 et Express sur le port 3000, comme d'habitude. Puis configurer un proxy pour les appels API pour Exprimer app.

Ajouter proxy.config.json à la racine de Angulaire du projet:
```
{
  "/api/*":{
    "target":"http://localhost:3000",
    "secure":false,
    "logLevel":"debug"
  }
}
```
Ouvrir un nouvel onglet de terminal et exécutez la commande suivante pour démarrer Express app:

nodemon [YOUR_EXPRESS_APP.js] --watch server

(YOUR_EXPRESS_APP.js est généralement nommé server.js ou app.js. le serveur est un répertoire où vous conservez tous vos Express fichiers d'application)

Ouvrir un deuxième onglet de terminal et exécutez la commande suivante pour démarrer Angulaire application:

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

Cela permettra d'assurer que Angulaires de l'app est reconstruit et le navigateur rechargé lorsqu'une modification est apportée à toute Angulaire application fichier. De même, l'Express serveur va redémarrer lorsqu'une modification est apportée à tout Exprimer les fichiers d'application.

Votre Angulaire de l'app est ici: http://localhost:4200/

Regardez cette vidéo pour voir comment configurer un proxy pour vos appels d'API Angulaire de la CLI

NOTE:
cette configuration s'applique seulement pour l'environnement de développement. En production, vous voulez exécuter ng build et de la place de l'Angulaire de l'application à l'intérieur d'un répertoire dist pour être servi par Express. En production, il y a UNE seule application en cours d'exécution - l'Express app portion Angulaire de votre application.

RÉPONSE PRÉCÉDENTE

L'aide de l'entrée de @echonax j'ai trouvé cette solution qui est très rapide:
- Ajout Express Angulaire 2 app (construit Angulaire de la CLI) car dans ce tutoriel
- Exécuter ceci dans le terminal:
ng build -w & nodemon server.js --watch dist --watch server

Cela va reconstruire l'angle de l'app dans le dossier dist, et le nœud de serveur va redémarrer à chaque fois qu'il se passe. Cependant, il n'est PAS automatique actualiser de votre navigateur, avec cette configuration 🙁

Plus à ce sujet ici:

https://github.com/jprichardson/reload
- Cela m'a aidé à comprendre ce que ngCli était en train de faire une tonne. Je ne veux pas pile sur plus de réponses sur ici, mais j'ai fini par avoir un backend et fronend dossier, la copie sur le index.html généré par ng build, puis l'exécution de mon serveur avec node app.js et mon créer des actifs de serveur avec ng serve --live-reload=false, donc il ne serait pas essayer de garder la reconnexion à WDS. C'est en examinant comment je peux rediriger la demande, mais pour l'instant cela semble fonctionner et est similaire à cette réponse, mais avec le back-end et front-end un peu plus séparés
- Ce travail sur le temps réel du serveur?
- L'angle de la documentation a maintenant une bonne couverture de la méthode décrite ici. Voir Proxy vers un serveur d'arrière-plan.
- Je travaillais sur exactement le même problème. Pouvez-vous expliquer pourquoi vous ne recommandons pas d'portion Angulaire sur express? Ma première idée était exactement votre réponse couplé avec Yusuf simultanées de solution (5 heures passées réinventer une roue..) Mais il m'est apparu que la portion Angulaire de l'express serait une solution plus élégante, car il serait tout simplement un service(?) et pas de proxy. C'est à cause de la facilité de mise en œuvre, ou il reflète l'environnement de production plus correctement? Aimerais entendre votre point de vue sur la question. Merci.
InformationsquelleAutor etayluz
13

"etayluz" solution est très bon. Mais je veux ajouter une option supplémentaire pour NOUVELLE RÉPONSE à ne pas ouvrir deux fois le terminal.

Tout d'abord, vous devez installer simultanément paquet (https://www.npmjs.com/package/concurrently);
```
npm install concurrently --save 
```
Alors vous pourriez ajouter ci-dessous les codes de votre colis.fichier 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 est suffisant pour l'exécution de votre projet.
- etayluz solution avec simultanément est parfait et fonctionne très bien. Bonne idée.
InformationsquelleAutor yusuf
5

À l'aide angulaires-cli, le ng build ou ng build --prod commande va vous donner des emmitouflés fichiers avec un index.html. Faites votre app.js(node/express) cible de ce fichier.

Exemple:
```
app.use( express.static(__dirname + '/src' ) ); //<- it will automatically search for index.html under src folder.
```
- "ng construire' construit mon Angulaire de l'application dans un dossier dist. Cela prend du temps. Je ne veux pas attendre si longtemps et créer manuellement l'angle d'app à chaque fois que j'ai besoin de faire un changement. C'est pourquoi je veux quelque chose où exprimer des points à la version de développement du Angulaire 2 app généré Angulaire de la CLI. Est-il possible?
- Si vous ajoutez -w comme ng build -w cli regarder pour les changements qui s'opèrent sur le côté client et re-construire à nouveau(en fonction du delta). Serait résoudre le problème?
- "ng construire -w' prend trop de temps à s'exécuter (comme les 10 secondes) je veux instantanée de rechargement
- Quand je lance "ng servir" - chaque fois que je fais une modification de la TS trans-pilation arrive plutôt instantanément; la recherche de cet effet
- des idées? Je ne vois rien en ligne sur ce
- nan :/ je vais quitter ma réponse est donc que les gens aient une idée de la situation. Peut-être que vous pouvez déposer un problème pour angulaires-cli sur ce sujet?
- ng construire --watch va prendre du temps sur la première manche, mais il compile en 1 ou 2 secondes à chaque fois que vous apportez une modification.
- c'était mon expérience, c'est pourquoi j'ai dit "re-construire à nouveau(en fonction du delta)" mais je pense que l'OP est d'avoir une expérience différente.
- Dernière question, comment puis-je recharger automatiquement le navigateur?
- Exactement ce que j'ai fait. Exécuter ng-construire dans un fichier statique mis en place dans l'Express, puis exécutez nodemon à partir de ce dir, et sert à la fois de serveur et Angulaire application parfaitement. github.com/chriskavanagh/angularauth
InformationsquelleAutor eko
2

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 sera de construire l'angle de 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. Utilisation mnp ou Fil à 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 devrait 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
```
Deuxième, ajouter 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 s'appelle:
```
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:

JS:
```
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 gulp de commande à la place de nodemon app.js de démarrage de votre server Express.

InformationsquelleAutor Clark Brent
1

Je me demandais aussi. Le Udemy cours sur la MOYENNE de la pile par Max Schwarzmüller a un exemple de code en y intégrant Express et Angulaire. Dans cet exemple de code de l'emballage.fichier json, l'utilisation utilise les scripts.construisez la propriété de donner webpack une commande qui regarde l'angle de fichiers et mises à jour en conséquence. Je ne veux pas copier son code ici, mais c'est l'idée générale. Le reste a besoin d'une découverte du travail.

Dans le fichier readme, il suggère l'exécution de mnp run build qui fonctionne webpack, et puis dans un nouveau terminal de l'exécution de la ngp de départ pour le nœud de serveur. Donc, en théorie, cela va de deux programmes, comme vous l'avez suggéré dans votre version de la réponse. Mais, il n'est plus "script"/pré-définis de façon de commencer l'angle de processus de construction, au lieu de naviguer à l'angle de la sous-répertoire et taper ng construire, regardez là-bas, et le démarrage de l'Express app séparément.

InformationsquelleAutor squirrelsareduck
0

Peut-être vous pouvez ajouter une dépendance appelée"simultanément', ou (npm-run-tous les, parallelshell).
```
npm i concurrently --save-dev
```
ensuite modifier le package.json comme ceci:
`
```
"scripts": {
        "dev": "concurrently \"ng build -w\"  \"cross-env NODE_ENV=development node .\" "
    }
```
`
cela peut être le travail.

Références:

simultanément exemple: https://stackoverflow.com/a/30950298/7421101,

npm-run-tous les exemple: https://stackoverflow.com/a/38213212/7421101,

parallelshell exemple: https://stackoverflow.com/a/42373547/7421101.

InformationsquelleAutor jackchen

Vous devez vous connecter pour publier un commentaire.

Une Longue Explication

tldr;

Bonus