wake-up-neo.com

Express.js mit der Angular CLI in dev-Umgebung verbinden

Ich habe ein tolles Tutorial gefunden, in dem erklärt wird, wie man express.js mit Angular CLI einrichtet. In diesem Tutorial wird die winklige App jedoch in einen Produktions-Dist-Ordner kompiliert: https://scotch.io/tutorials/mean-app -mit-wink-2-and-the-angle-cli

Wie kann ich express.js mit Angular CLI integrieren, aber ich möchte, dass express.js mit der Entwicklungsversion der Angular-App zusammenarbeitet, und ich möchte, dass nodemon neu gestartet wird, wenn ich Änderungen an der express OR - Winkel-App vornehme .

Ich habe über acht Stunden damit verbracht, diese Arbeit zum Laufen zu bringen. Vielen Dank!

Ich möchte nicht jedes Mal 'ng build' ausführen, wenn ich eine Änderung an der Angular-App vornehme (dies dauert zu lange). Ich möchte sofort nachladen, wenn ich eine Änderung an meiner Winkel-App speichere (als ob ich 'n'g'n'Dient ausführen würde ') oder Express-App.

Ich habe ein Tutorial gefunden, in dem Sie Angular 2 QuickStart mit Express verbinden. Es funktioniert, aber ich möchte Angular CLI verwenden.

Ich verstehe, dass die Angular-CLI WebPack verwendet, während der QuickStart System.js verwendet

35
etayluz

NEUE ANTWORT

Meine Erfahrung von 15 Stunden hat mich gelehrt, dass der Versuch, eine Angular App mit Express während der Entwicklung zu bedienen, keine gute Idee ist. Die richtige Methode ist, Angular und Express als zwei verschiedene Apps an zwei verschiedenen Ports. Angular wird wie gewohnt an Port 4200 und Express an Port 3000 bereitgestellt. Konfigurieren Sie dann einen Proxy für API-Aufrufe an die Express-App.

Fügen Sie proxy.config.json zum Stammverzeichnis von Angular project:

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

Öffnen Sie eine neue Terminal-Registerkarte und führen Sie diesen Befehl aus, um die Express-App zu starten:

nodemon [YOUR_EXPRESS_APP.js] --watch server

(YOUR_EXPRESS_APP.js heißt normalerweise server.js oder app.js. server ist ein Verzeichnis, in dem Sie alle Ihre Express-App-Dateien aufbewahren.)

Öffnen Sie eine zweite Terminal-Registerkarte und führen Sie diesen Befehl aus, um Angular app zu starten:

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

Dadurch wird sichergestellt, dass die Angular App neu erstellt und der Browser neu geladen wird, wenn eine Änderung an einer Angular App-Datei vorgenommen wird. Ebenso wird der Express-Server neu gestartet, wenn eine Änderung vorgenommen wird gemacht, um alle Express-App-Dateien.

Ihre Angular App ist hier: http: // localhost: 4200 /

In diesem Video erfahren Sie, wie Sie einen Proxy für Ihre API-Aufrufe mit Angular CLI konfigurieren

HINWEIS: Dieses Setup gilt nur für Entwicklungsumgebungen. In der Produktion sollten Sie ng build Ausführen und die Angular) - App in einem von Express bereitgestellten Verzeichnis ablegen. In der Produktion wird nur EINE App ausgeführt - eine Express App, die Ihre Angular App bereitstellt.

VORHERIGE ANTWORT

Unter Verwendung der Eingaben von @echonax habe ich diese Lösung gefunden, die recht schnell ist:

  • Fügen Sie Express zu Angular 2 App (erstellt mit Angular CLI)) wie in diesem Tutorial hinzu
  • Führen Sie dies im Terminal aus:

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

Dadurch wird die App Angular im Ordner dist neu erstellt, und der Knotenserver wird jedes Mal neu gestartet, wenn dies geschieht. Bei diesem Setup wird jedoch KEINE automatische Browseraktualisierung durchgeführt :(

Mehr dazu hier:

https://github.com/jprichardson/reload

89
etayluz

"etayluz" -Lösung ist sehr gut. Aber ich möchte eine zusätzliche Option für NEW ANSWER hinzufügen, um nicht zweimal das Terminal zu öffnen.

Zunächst müssen Sie das Paket gleichzeitig installieren ( https://www.npmjs.com/package/concurrently );

npm install concurrently --save 

Dann könnten Sie unten stehende Codes in Ihre package.json-Datei einfügen.

"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 reicht aus, um Ihr Projekt auszuführen.

11
yusuf

Bei Verwendung von angle-cli erhalten Sie mit dem Befehl ng build oder ng build --prod gebündelte Dateien zusammen mit einem index.html. Legen Sie Ihren app.js (Knoten/Express) als Ziel für diese Datei fest. 

Beispiel: 

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

Längere Erklärung

Ich habe ziemlich viel Zeit damit verbracht, herauszufinden, wie ich dies in meinen eigenen Entwicklungsumgebungen tun kann. Das Beste, was ich mir ausgedacht habe, ist eine zweifache Implementierung, die eine Menge von Echonaxs, Squirrelsareducks und Maxs Lösungen kombiniert, aber die integrierten Angular CLI-Strategien zur Beobachtung von Frontend-/Angular-Änderungen und die Verwendung von Nodemon zum Backend/nutzt Änderungen ausdrücken. Kurz gesagt: Sie müssen am Ende zwei Prozesse (ng build und nodemon) ausführen, um die Entwicklungsumgebung zum Laufen zu bringen, aber sie erstellt automatisch alles neu und führt alles unter einem Express-Webserver aus.

Der erste Prozess, den Sie ausführen müssen, besteht darin, den Ordner Angular dist zu erstellen und die am Angular-Frontend vorgenommenen Änderungen zu überwachen. Zum Glück kann Angular CLI dies nativ (mit Angular CLI> = 1.5 getestet) mit dem folgenden Befehl ausführen:

ng build --watch

Sie müssen dies im Hintergrund laufen lassen, aber dies wird auf Änderungen am Angular-Code achten und die Bundles im laufenden Betrieb neu erstellen.

Der zweite Prozess umfasst die Verwendung von nodemon zum Ausführen Ihres Express-Servers. Je nach Umfang Ihres Backend/Express-Setups können Setup und Planung ein wenig mehr Zeit in Anspruch nehmen. Stellen Sie einfach sicher, dass Express auf Ihre Indexdatei im Ordner dist verweist. Der große Vorteil hier ist, dass Sie all dies in eine Gulpfile mit gulp-nodemon einfügen können, um nach dem Ausführen von nodemon noch mehr sequenzielle Aufgaben auszuführen, um das Backend/Express zu beobachten, z oder was auch immer Sie sonst für Gulp halten können. Verwenden Sie npm oder Yarn , um nodemon zu den Abhängigkeiten Ihres Projekts hinzuzufügen und zu installieren, und führen Sie dann Folgendes aus, um Ihren Express-Server zu starten:

nodemon app.js

Ersetzen Sie app.js mit der Datei, die Sie zum Erstellen Ihres Express-Backends verwenden, und sollte jetzt neu erstellen, sobald Änderungen am Backend vorgenommen wurden.

tldr;

Führen Sie zwei separate Prozesse im Hintergrund aus, um Ihre Entwicklungsumgebung zu starten. Erster Lauf:

ng build --watch

Fügen Sie nodemon zu Ihren Projektabhängigkeiten hinzu und führen Sie den folgenden Befehl im Hintergrund aus, wobei app.js durch das ersetzt wird, was Ihre Express-Datei heißt:

nodemon app.js

Bonus

Da Sie gefragt wurden, wie Sie den Browser automatisch neu laden können, sollten Sie das Browser-Plugin LiveReload nutzen. Da wir bereits nodemon verwenden, um unser Backend zu überwachen, sollten Sie Gulp ernsthaft in Betracht ziehen, wenn Sie nodemon und LiveReload nicht bereits als zwei Aufgaben ausführen. Die beste Wette für die Implementierung von LiveReload in Gulp ist die Verwendung des gulp-refresh-Plugins, da dies eine aktualisierte Version des gulp-livereload-Plugins ist. Sie erhalten am Ende ein Gulpfile, das diesem ähnelt:

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);
});

Jetzt führen Sie einfach den Befehl gulp anstelle von nodemon app.js aus, um Ihren Express-Server zu starten.

2
Clark Brent

Ich habe mich auch gefragt. Der Udemy-Kurs zum MEAN-Stack von Max Schwarzmüller enthält einen Beispielcode für die Integration von Express und Angular. Verwenden Sie in der package.json-Datei dieses Beispielcodes die Eigenschaft scripts.build, um webpack einen Befehl zu geben, der die Winkeldateien überwacht und entsprechend aktualisiert. Ich möchte seinen Code hier nicht kopieren, aber das ist die allgemeine Idee. Der Rest erfordert einige Entdeckungsarbeit.

In der Readme-Datei schlägt er vor, npm run build auszuführen, das webpack ausführt, und dann in einem neuen Terminal mit npm start für den Knotenserver. Theoretisch werden hier also zwei Programme ausgeführt, wie Sie es in Ihrer Version der Antwort vorgeschlagen haben. Der Start des Angular-Build-Prozesses wird jedoch mehr "scripted"/vordefiniert. Statt zum Unterverzeichnis Angular zu navigieren, ng build --watch einzugeben und die Express-App separat zu starten.

1

Sie können eine Abhängigkeit namens ' gleichzeitig ' oder ( npm-run-all , parallelshell ) hinzufügen.

npm i concurrently --save-dev

bearbeiten Sie dann die package.json wie folgt: `

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

` das kann Arbeit sein.

Verweise:

gleichzeitig Beispiel: https://stackoverflow.com/a/30950298/7421101 ,

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

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

0
jackchen