Node.jsでAngularアプリを自動リロードしながら開発する方法

node-angular-autoreload.md

プロジェクトのワークスペース

プロジェクトのワークスペースとなるディレクトリを作成し、そのディレクトリにAngularプロジェクトとNode.js(+Express)プロジェクトを作成します。 Node.jsプロジェクトにはnodemon（プロジェクト内のファイルを監視してコードをリロードしてくれる）をインストールします。

$ mkdir myworkspace
$ cd myworkspace
$ ng new myapp
$ mkdir server
$ cd server
$ npm init
$ npm install express --save
$ npm install -D nodemon

ディレクトリ構造は次のようになります。

myworkspace
  |
  +-- myapp
  |
  +-- server

Node.js側（サーバー）の準備

Node.js側の最低限のコードは次のようなものです。

ポイントは4行目のAngularアプリの場所を指定している部分です。

const express = require("express");
const app = express();

app.use(express.static(__dirname + '/../myapp/dist/myapp'));

const server = app.listen(3000, function(){
  console.log("Started. Port:" + server.address().port);
});

package.jsonを次のように編集します。

ポイントはscriptsに追加されたnodemon起動用のエントリです。ここではnodemonがビルドされたAngularアプリとサーバー側のプロジェクトディレクトリを監視するパラメーターを指定しています。

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon --watch ../myapp/dist/myapp --watch . server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "express": "^4.17.1"
  }
}

Angularアプリのwatchオプション付きビルド

手動でng buildとやっても構いませんが、完全自動ビルドするならばng build --watchとします。

サーバーの起動

次のコマンドでオートリロードモードでサーバーを起動します。

$ npm run dev

この状態でAngularアプリまたはサーバーのコードを変更すると自動的にサーバーがリロードするので、ブラウザから最新のアプリケーションにアクセスできます。