Angularで "ng serve" コマンド実行時に "Port 4200 is already in use" エラーが発生する原因と解決方法

2024-04-02

Angularプロジェクトで "ng serve" コマンドを実行時に "Port 4200 is already in use" エラーが発生する場合、ポート4200がすでに別のプロセスによって使用されていることが原因です。このエラーを解決するには、以下の方法を試すことができます。

原因

ポート4200は、Angular CLIがローカル開発サーバーを起動する際にデフォルトで使用するポート番号です。そのため、以下のいずれかの状況で、このエラーが発生する可能性があります。

  • 別のAngularプロジェクトがすでにポート4200を使用している
  • 別のアプリケーションがポート4200を使用している
  • 以前実行した "ng serve" コマンドがまだ実行中である

解決方法

別のポート番号を使用する

"ng serve" コマンドを実行する際に、"--port" オプションを使用して、別のポート番号を指定することができます。

ng serve --port 4201

上記のコマンドは、ポート4201を使用してローカル開発サーバーを起動します。

使用中のポートを確認する

どのプロセスがポート4200を使用しているのかを確認するには、以下のコマンドを使用することができます。

lsof -i tcp:4200

ポート4200を使用しているプロセスを終了することで、ポートを解放することができます。

  • Windowsの場合

    1. タスクマネージャーを開きます。
    2. "プロセス" タブを選択します。
    3. "ポート" 列で "4200" を探します。
    4. ポート4200を使用しているプロセスを選択して、"タスクの終了" をクリックします。

"ng serve" コマンドは、Ctrl+Cキーを押すことで停止することができます。

"ng serve" コマンドの前に "ng kill" コマンドを実行する

"ng kill" コマンドを実行することで、実行中のAngular CLIサーバーを強制終了することができます。

ng kill



例:

ng new my-project
cd my-project
ng serve

上記のコマンドを実行すると、以下のエラーが発生します。

> ng serve

⠼ Serving on http://localhost:4200

ERROR: Port 4200 is already in use. Use '--port' to specify a different port.

このエラーを解決するには、上記の解決方法を試してください。




その他の解決方法

ファイアウォールの設定を確認する

ファイアウォールによってポート4200がブロックされている可能性があります。ファイアウォールの設定を確認して、ポート4200が許可されていることを確認してください。

アンチウイルスソフトの設定を確認する

別のコンピュータで "ng serve" コマンドを実行することで、問題を解決できる可能性があります。

プロキシサーバーを使用している場合は、プロキシサーバーの設定がポート4200を許可していることを確認してください。


angular


TypeScriptとAngularでグローバル定数を定義する方法まとめ

const キーワードを使用する最も簡単な方法は、const キーワードを使用して定数を宣言することです。列挙型を使用する関連する定数のグループを定義する場合は、列挙型を使用することができます。インターフェースを使用するより複雑な定数を定義する場合は、インターフェースを使用することができます。...


Angular と Karma-Jasmine で CUSTOM_ELEMENTS_SCHEMA を追加してもエラーが表示される問題

Angular アプリケーションで CUSTOM_ELEMENTS_SCHEMA を NgModule. schemas に追加しても、Karma-Jasmine テストでエラーが発生する場合があります。原因:この問題は、テスト環境と本番環境でモジュールの読み込み順序が異なることが原因で発生します。...


もう迷わない!Angularで確認ダイアログの基礎知識と実践ガイド

MatDialog は、Angular Material に含まれる、ダイアログを作成するためのコンポーネントです。確認ダイアログを作成するには、以下の手順を行います。MatDialog をインポートします。確認ダイアログコンポーネントを作成します。...


Angular エラー解決策:ブラウザキャッシュやTypeScriptコンパイラ再起動

このエラーは、Angularアプリケーションにおいてコンポーネントが認識されていない場合に発生します。 コンポーネントは、NgModule に宣言してアプリケーションで使用できるようにする必要があります。考えられる原因は以下の通りです:解決策:...


ASP.NET Core 2.0 Razor vs Angular/React/Vue.js: それぞれのフレームワークでToDoアプリを作ってみよう

Webアプリケーション開発において、フロントエンドとバックエンドは重要な役割を担います。フロントエンド: ユーザーが直接操作する画面部分バックエンド: データ処理やサーバー側のロジックを担当今回取り上げるASP. NET Core 2.0 RazorとAngular/React/Vue...