web-dev-qa-db-fra.com

Connexion express.js avec une CLI angulaire dans un environnement de développement

J'ai trouvé un bon tutoriel qui explique comment configurer express.js avec Angular CLI, mais dans ce tutoriel, l'application angular est compilée dans un dossier de production dist: https://scotch.io/tutorials/mean-app -with-angular-2-and-the-angular-cli

Comment puis-je intégrer express.js avec Angular CLI, mais je souhaite que express.js fonctionne avec la version de développement de l'application Angular et que le nodemon redémarre si je modifie l'application angulaire express OR .

J'ai passé plus de huit heures à essayer de faire fonctionner cela. Merci!

Je ne veux pas lancer 'ng build' à chaque fois que je modifie l'application angulaire (cela prend trop de temps). Je souhaite un rechargement instantané chaque fois que je sauvegarde un changement dans mon application angulaire (comme si j'exécutais 'ng serve ') ou une application express.

J'ai trouvé un tutoriel dans lequel vous connectez Angular 2 QuickStart avec Express, mais je cherche à utiliser Angular CLI.

Je comprends que la CLI angulaire utilise WebPack alors que le logiciel QuickStart utilise System.js

node.jsangularexpressangular-cli
35
etayluz

NOUVELLE RÉPONSE

Mon expérience de 15 heures m’a appris qu’essayer de servir une application angulaire Avec Express au cours du développement n’était PAS une bonne idée. La méthode appropriée consiste à exécuter Angular et Express en tant que deux applications différentes sur deux ports différents. Angular sera servi sur le port 4200 et Express sur le port 3000 comme d’habitude. Configurez ensuite un proxy pour les appels d'API à Express app.

Ajoutez proxy.config.json à la racine du projet Angular:

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

Ouvrez un nouvel onglet de terminal et exécutez cette commande pour lancer Express app:

nodemon [YOUR_EXPRESS_APP.js] --watch server

(YOUR_EXPRESS_APP.js est généralement nommé server.js ou app.js.serveur est un répertoire dans lequel vous conservez tous vos fichiers de l'application Express)

Ouvrez un deuxième onglet de terminal et exécutez cette commande pour lancer l'application Angular:

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

Cela garantira que l'application Angular est reconstruite et que le navigateur est rechargé lorsqu'une modification est apportée à un fichier d'application Angular. De même, Express Server redémarre lorsqu'une modification est apportée aux fichiers de l'application Express.

Votre application angulaire est ici: http: // localhost: 4200 /

Regardez cette vidéo pour voir comment configurer un proxy pour vos appels d'API avec Angular CLI } _ 

REMARQUE: Cette configuration s'applique uniquement à l'environnement de développement. En production, vous voudrez exécuter ng build et placer l'application Angular dans un répertoire dist à servir par Express. En production, UNE SEULE application est en cours d'exécution - une application Express servant votre application Angular.

RÉPONSE PRÉCÉDENTE

En utilisant les entrées de @echonax, j'ai trouvé cette solution assez rapide:

  • Ajoutez Express à l'application Angular 2 (construite avec CLI angulaire) comme dans ce tutoriel _
  • Exécutez ceci dans le terminal: 

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

Cela reconstruira l'application Angular dans le dossier dist et le serveur de nœud redémarrera chaque fois que cela se produit. Cependant, il n'y a PAS d'actualisation automatique du navigateur avec cette configuration :(

Plus à ce sujet ici:

https://github.com/jprichardson/reload

83
etayluz

La solution "etayluz" est très bonne. Mais je veux ajouter une option supplémentaire pour NEW REPONSE pour ne pas ouvrir le terminal deux fois.

Tout d'abord, vous devez installer simultanément le package ( https://www.npmjs.com/package/concurrently );

npm install concurrently --save

Ensuite, vous pouvez ajouter les codes ci-dessous dans votre fichier 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 suffit pour exécuter votre projet.

11
yusuf

En utilisant angular-cli, la commande ng build ou ng build --prod vous donnera des fichiers groupés avec un index.html. Faites en sorte que votre app.js (noeud/express) cible ce fichier. 

Exemple: 

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

Explication plus longue

J'ai passé un temps décent à comprendre comment procéder dans mes propres environnements de développement. Le meilleur que j'ai trouvé est une implémentation double qui combine beaucoup de solutions echonax, squirrelsareduck et Max, tout en tirant parti des stratégies intégrées de l'interface de ligne de commande angulaire pour observer les modifications du front/angulaires, et utiliser nodemon pour surveiller le backend/Exprimer les changements. En bref, vous devez exécuter deux processus (ng build et nodemon) pour que votre environnement de développement soit opérationnel, mais il reconstruit automatiquement et exécute tout sous un serveur Web Express.

Le premier processus à exécuter consiste à créer le dossier Angular dist et à surveiller les modifications apportées à l’interface angulaire. Heureusement pour nous, CLI angulaire peut le faire de manière native (Testé sur CLI angulaire> = 1.5) avec la commande suivante:

ng build --watch

Vous devrez laisser cela en arrière-plan, mais cela surveillera toute modification apportée au code angulaire et reconstruira les bundles à la volée.

Le deuxième processus implique l’utilisation de nodemon pour exécuter votre serveur Express et peut nécessiter un peu plus de configuration et de planification en fonction de l’ampleur de votre configuration backend/Express. Assurez-vous simplement que Express pointe vers votre fichier d’index dans le dossier dist . Le gros avantage ici est que vous pouvez ajouter tout cela dans un fichier Gulp avec gulp-nodemon pour effectuer encore plus de tâches séquentielles après avoir exécuté nodemon pour surveiller le backend/Express, par exemple en lissant votre backend, en effectuant des tests parallèlement à vos builds, en le réduisant , ou tout ce que vous pouvez penser pour utiliser Gulp. Utilisez npm ou Yarn pour ajouter et installer nodemon aux dépendances de votre projet, puis exécutez la procédure suivante pour démarrer votre serveur Express:

nodemon app.js

Remplacez app.js par le fichier que vous utilisez pour créer votre back-end Express. Le devrait est maintenant reconstruit chaque fois que des modifications sont apportées à votre backend.

tldr;

Exécutez deux processus distincts en arrière-plan pour démarrer votre environnement de développement. Première exécution:

ng build --watch

Deuxièmement, ajoutez nodemon à vos dépendances de projet et exécutez la commande suivante en arrière-plan, où app.js est remplacé par le nom de votre fichier Express:

nodemon app.js

Prime

Puisque vous avez demandé comment recharger automatiquement le navigateur, votre meilleur choix serait de tirer parti d'un plugin de navigateur appelé LiveReload. Puisque nous allons déjà utiliser nodemon pour surveiller notre backend, vous pouvez sérieusement envisager d’utiliser Gulp si vous n’exécutez pas déjà nodemon et LiveReload en tant que deux tâches. Le meilleur moyen d'implémenter LiveReload dans Gulp est d'utiliser le plugin gulp-refresh, car il s'agit d'une version mise à jour du plugin gulp-livereload. Vous allez vous retrouver avec un fichier 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);
});

Vous devez maintenant exécuter la commande gulp à la place de nodemon app.js pour démarrer votre serveur Express.

2
Clark Brent

Je me demandais cela aussi. Le cours Udemy sur la pile MEAN de Max Schwarzmüller contient un exemple de code permettant d’intégrer Express et Angular. Dans le fichier package.json de cet exemple de code, use utilise la propriété scripts.build pour donner à webpack une commande qui surveille les fichiers angulaires et se met à jour en conséquence. Je ne veux pas copier son code ici mais c'est l'idée générale. Le reste nécessitera des travaux de découverte.

Dans le fichier Lisez-moi, il suggère d'exécuter npm run build qui exécute webpack, puis dans un nouveau terminal exécutant npm start pour le serveur de noeud. Donc en théorie, cela exécute deux programmes comme vous l'avez suggéré dans votre version de la réponse. Cependant, il utilise une méthode plus "scriptée"/prédéfinie pour démarrer le processus de construction angulaire, au lieu de naviguer dans le sous-répertoire angulaire, de taper ng build --watch et de lancer séparément l'application Express.

1
squirrelsareduck

Vous pouvez éventuellement ajouter une dépendance appelée ' simultanément ' ou ( npm-run-all , parallelshell ).

npm i concurrently --save-dev

puis éditez le package.json comme ceci: `

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

` cela peut être un travail.

Références:

concurremment exemple: https://stackoverflow.com/a/30950298/7421101 ,

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

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

0
jackchen