Nanolier

Angularでlocalhost:4200が見れない時の対処法

2022/06/27

勉強がてらAngularでTodoアプリでも作ってみるか〜、、っと思ったときに少し詰まりました。

ng serveが見れない

ng serveコマンドを実行後正常に起動しているのに、Chromeでlocalhost:4200を開くと開くことができません。
httpsに転送されているのかと思いましたが、そういうわけでもありませんでした。

ポートを使っているか調べる

下記コマンドで4200番portが使われていないか確認してみます。

lsof -i :4200

確認するとDockerが4200番portを使用していました。

ng serveのポートを変更する

4200をkillしてもいいのですが、Dockerで使っているポートを変えるのも面倒なので今回はangularの起動するポートを変更して対応します。

ng serve --port 8975

実行すると無事開くことができました。

hello angular

package.jsonの内容も変更しておきます。

{
    "scripts": {
        "start": "ng serve --port 8975"
    }
}

これでyarn startしたときに8975番でangularを起動できるようになりました。