web-dev-qa-db-ja.com

開発環境でAngular CLIを使用してexpress.jsを接続する

Angular CLIを使用してexpress.jsをセットアップする方法を説明する素晴らしいチュートリアルを見つけましたが、このチュートリアルではangularアプリが本番distフォルダーにコンパイルされます： https：// scotch。 io/tutorials/mean-app-with-angular-2-and-the-angular-cli

Express.jsをAngular CLIと統合する方法はありますが、express.jsをAngularアプリの開発バージョンと連携させ、いずれかの変更を行った場合にnodemonを再起動したいエクスプレスOR angularアプリ。

これを機能させるために8時間以上費やしてきました。ありがとう！

Angularアプリに変更を加えるたびに 'ng build'を実行したくありません（これには時間がかかりすぎます）-angularアプリに変更を保存するたびに即座にリロードします（ 「ng serve」を実行しているかのように）またはエクスプレスアプリ。

ExpressでAngular 2 QuickStartを接続するチュートリアルを見つけましたが、動作しますが、Angular CLIを使用したいと考えています。

Angular CLIはWebPackを使用し、QuickStartはSystem.jsを使用することを理解しています

node.jsangularexpressangular-cli
38
etayluz

新しい回答

15時間の私の経験から、開発中にExpressでAngularアプリを提供しようとするのは良い考えではないことがわかりました。適切な方法は、AngularとExpressを2つの異なるポートで2つの異なるアプリとして実行することです。 Angularは通常どおりポート4200で、Expressはポート3000で提供されます。次に、ExpressアプリへのAPI呼び出しのプロキシを構成します。

Proxy.config.jsonをAngularプロジェクトのルートに追加します。

{
  "/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という名前です。サーバーはすべてのExpressアプリファイルを保持するディレクトリです）

2番目のターミナルタブを開き、次のコマンドを実行してAngularアプリを起動します。

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

これにより、Angularアプリファイルに変更が加えられたときに、Angularアプリが再構築され、ブラウザーがリロードされます。同様に、Expressアプリファイルに変更が加えられると、Expressサーバーが再起動します。

Angularアプリは次の場所にあります： http：// localhost：4200 /

Angular CLI を使用してAPI呼び出しのプロキシを構成する方法については、このビデオをご覧ください

注：このセットアップは、開発環境にのみ適用されます。本番環境では、ng buildを実行し、AngularアプリをExpressが提供するdistディレクトリ内に配置します。実稼働環境では、実行中のアプリは1つだけです。ExpressアプリはAngularアプリを提供します。

前の回答

@echonaxからの入力を使用して、非常に高速なこのソリューションを思い付きました。

  • この tutorial のように、Angular 2アプリ（Angular CLIで構築）にExpressを追加します。
  • ターミナルでこれを実行します：

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

これにより、Angularアプリがdistフォルダーに再構築され、ノードサーバーはそのたびに再起動します。ただし、このセットアップではブラウザの自動更新はありません:(

詳細はこちら：

https://github.com/jprichardson/reload

89
etayluz

"etayluz" solution は非常に良いです。しかし、NEW ANSWERの追加オプションを追加して、ターミナルを2回開かないようにします。

まず、同時にパッケージをインストールする必要があります（ 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でプロジェクトを実行できます。

14
yusuf

Angle-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.
5
eko

長い説明

私は自分の開発環境でこれを行う方法を見つけるのにかなりの時間を費やしました。私が思いついた最高の方法は、エコーナックス、リスサック、およびマックスのソリューションの多くを組み合わせた2つの実装ですが、組み込みのAngular CLI戦略を利用してフロントエンド/角度の変更を監視し、 nodemonを使用して、バックエンド/エクスプレスの変更を監視します。要するに、開発環境を稼働させるために2つのプロセス（ng buildとnodemon）を実行することになりますが、1つのExpress Webサーバーの下ですべてを自動的に再構築して実行します。

実行する必要がある最初のプロセスは、Angular distフォルダーをビルドし、Angularフロントエンドに加えられた変更を監視することです。幸いなことに、Angular CLIは、次のコマンドでこれをネイティブに実行できます（Angular CLI> = 1.5でテスト済み）。

ng build --watch

これをバックグラウンドで実行したままにする必要がありますが、これはAngularコードで行われた変更を監視し、その場でバンドルを再構築します。

2番目のプロセスでは、nodemonを使用してExpressサーバーを実行します。バックエンド/ Expressセットアップの規模によっては、セットアップと計画がもう少し必要になる場合があります。 Expressがdistフォルダー内のインデックスファイルを指していることを確認してください。ここでの大きな利点は、nodemonを実行してバックエンドをリントする、バックエンドをリントする、ビルドと並行してテストを実行する、バックエンドを縮小するなど、nodemonを実行した後、gulp-nodemonを使用してこれらすべてをGulpfileに追加できることです、またはGulpを使用するために考えられる他のあらゆるもの。 npmまたはYarnを使用してnodemonをプロジェクトの依存関係に追加およびインストールし、次を実行してExpressサーバーを起動します。

nodemon app.js

app.jsをExpressバックエンドのビルドに使用しているファイルに置き換えます。そして、shouldはいつでも再構築できますバックエンドに加えられた変更。

tldr;

バックグラウンドで2つの別個のプロセスを実行して、開発環境を開始します。ファーストラン：

ng build --watch

次に、nodemonをプロジェクトの依存関係に追加し、バックグラウンドで次のコマンドを実行します。ここでapp.jsはExpressファイルが呼び出されたものに置き換えられます。

nodemon app.js

ボーナス

ブラウザーを自動的にリロードする方法を尋ねたので、最善の策はLiveReloadと呼ばれるブラウザープラグインを利用することです。すでにnodemonを使用してバックエンドを監視しているので、nodemonとLiveReloadの両方を2つのタスクとして実行する予定がない場合は、Gulpの使用を真剣に検討するかもしれません。 LiveReloadをGulpに実装する最善の方法は、gulp-livefreshプラグインの更新バージョンであるgulp-refreshプラグインを使用することです。これに似た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);
});

ここで、nodemon app.jsの代わりにgulpコマンドを実行して、Expressサーバーを起動します。

2
Clark Brent

これも不思議でした。 MaxSchwarzmüllerによるMEANスタックのUdemyコースには、ExpressとAngularを統合するためのサンプルコードがあります。そのサンプルコードのpackage.jsonファイルでは、scripts.buildプロパティを使用して、webpackにangularファイルを監視し、それに応じて更新するコマンドを与えます。ここで彼のコードをコピーしたくありませんが、それは一般的な考え方です。残りはディスカバリー作業が必要です。

Readmeファイルでは、webpackを実行するnpm run buildを実行し、次にノードサーバーのnpm startを実行する新しいターミナルで実行することを提案しています。したがって、理論的には、これはあなたが答えのバージョンで提案したような2つのプログラムを実行します。ただし、Angularサブディレクトリに移動してng build --watch inと入力する代わりに、Angularビルドプロセスを開始する、より「スクリプト化された」/事前定義された方法を実行します。そこで、Expressアプリを個別に起動します。

1
squirrelsareduck

「 concurrently 」または（ npm-run-all 、 parallelshell ）と呼ばれる依存関係を追加できます。

npm i concurrently --save-dev

次に、package.jsonを次のように編集します： `

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

`これは動作する可能性があります。

参照：

同時に 例： https://stackoverflow.com/a/30950298/7421101 、

npm-run-all 例： https://stackoverflow.com/a/38213212/7421101 、

parallelshell 例： https://stackoverflow.com/a/42373547/7421101 .

0
jackchen