Angular CLI v6.0 でローカルサーバのポート番号を変更

はじめに

複数のAngularプロジェクトを開発する中で、ポート番号を変更してローカルサーバを複数立ち上げたいケースがあり、設定方法を探してみました。

対象の環境

以下の環境で動作確認してます。

Angular CLI: 6.0.8
Node: 8.11.2
OS: darwin x64
Angular: 6.0.5

方法１：設定ファイルを書き換える

AngularCLIの設定ファイルですが、以前までは.anglular-cli.jsonでしたが、v6.0よりangular.jsonに変更となっています。
angular.jsonファイルに以下の設定を追加することで、ローカルサーバのポート番号を変更できます。

angular.json

"projects": {
    "ng": {
        "architect": {
            "serve": {
                "options": {
                    "browserTarget": "ng:build",
                    "port": 4300
                }
            }
        }
    }
}

方法２：起動オプションで指定する

ローカルサーバの起動オプションとしてポート番号の指定ができます。

ng serve --port 4300

※npm-scripts（npm startなど）を使用してローカルサーバを起動している場合は、以下のようにpackege.jsonを変更してください。

package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve --port 4300",
}

最後に

ローカルサーバ起動時に以下のように表示されていればOKです。

** Angular Live Development Server is listening on localhost:4300, open your browser on http://localhost:4300/ **

参考文献

How to change angular port from 4200 to any other
Angular 6 - How to change default port 4200