【Angular開発の壁を突破】「ng serve - listen EACCES: permission denied 127.0.0.1:4200」エラーの解決策を画像付きで徹底解説

Angular で発生する "ng serve - listen EACCES: permission denied 127.0.0.1:4200" エラーの原因と解決策

Angular で ng serve コマンドを実行するときに、"ng serve - listen EACCES: permission denied 127.0.0.1:4200" エラーが発生することがあります。これは、開発サーバーがポート 4200 を開くことができないことを示します。このエラーにはいくつかの原因と解決策があります。

原因

このエラーには、以下の原因が考えられます。

• ポート 4200 がすでに使用されている: 別のアプリケーションがポート 4200 を使用している可能性があります。
• ユーザー権限不足: ユーザーアカウントに十分な権限がない可能性があります。
• ファイアウォールによるブロック: ファイアウォールが開発サーバーをブロックしている可能性があります。
• 古い Node.js バージョン: 古い Node.js バージョンを使用している場合、このエラーが発生する可能性があります。

解決策

以下の解決策を試してみてください。

ポート 4200 の解放

• 別のアプリケーションがポート 4200 を使用している場合は、そのアプリケーションを終了する必要があります。
• netstat -ano コマンドを使用して、ポート 4200 を使用しているプロセスを確認できます。
• 以下のコマンドを使用して、ポート 4200 を解放できます。

taskkill /PID <pid> /F

ユーザー権限の確認

• 管理者権限で ng serve コマンドを実行する必要があります。
• Windows の場合は、cmd を管理者権限で実行し、そこから ng serve コマンドを実行します。
• macOS の場合は、sudo ng serve コマンドを実行します。

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

• ファイアウォールが開発サーバーをブロックしていないことを確認します。
• 開発サーバーは通常、ポート 4200 を使用します。
• ファイアウォール設定で、このポートを開放する必要があります。

Node.js バージョンの更新

• 古い Node.js バージョンを使用している場合は、最新バージョンに更新する必要があります。

• 上記の解決策を試しても問題が解決しない場合は、以下の方法も試してみてください。
  • 他のポート番号を指定して ng serve コマンドを実行する: ng serve --port <port>
  • ng build コマンドを使用してビルドを行い、ファイルを Web サーバーにデプロイする

• このエラーは、Angular だけに限らず、他の Node.js アプリケーションでも発生する可能性があります。
• 上記の解決策は、Windows、macOS、Linux などのオペレーティングシステムで共通です。

ng new my-angular-app

This will create a new Angular project named my-angular-app in the current directory.

Navigate into the Project Directory

cd my-angular-app

Start the Development Server

ng serve

This will start the Angular development server and open your application in a web browser. The default port is 4200, so you should be able to access your application at http://localhost:4200.

Modify the Code

The project you created has a basic structure with a src directory that contains the source code for your application. You can modify the code in this directory to change the behavior of your application. For example, you can modify the app.component.html file to change the content of the main page, or you can modify the app.component.ts file to add functionality.

Save Changes and See Results

Whenever you save changes to your code, the development server will automatically rebuild and reload the application in your browser. This allows you to see the results of your changes immediately without having to manually restart the server.

Additional Notes

• The ng serve command will also watch for changes to your code and automatically reload the application when you save changes.
• You can use the ng build command to build your application for production. This will create a production-ready bundle of your code that can be deployed to a web server.

You can specify a different port for the development server using the --port option. For example, to run the server on port 8080, you would use the following command:

ng serve --port 8080

Check for Reserved Ports

On Windows, Hyper-V can reserve ports for its use. You can check for reserved ports using the following command:

netsh interface ipv4 show excludedportrange protocol=tcp

If port 4200 is listed as a reserved port, you can either try a different port or exclude port 4200 from the Hyper-V reservation range.

Restart the Windows NAT Driver

Sometimes, restarting the Windows NAT driver can fix this issue. You can do this by running the following commands:

net stop winnat
net start winnat

Update Node.js

Make sure you are using the latest version of Node.js. You can check your Node.js version using the following command:

node -v

If you are not using the latest version, you can download and install the latest version from .

In some cases, the issue may be related to the specific terminal you are using. Try using a different terminal, such as PowerShell or Git Bash.

Check for Running Processes

Make sure there are no other processes running that are using port 4200. You can use the following command to list all running processes:

netstat -ano

If you see a process using port 4200, you can either stop the process or try a different port.

Check for Antivirus or Firewall Interference

Some antivirus or firewall software may be blocking the development server. Try disabling your antivirus or firewall software temporarily to see if that resolves the issue.

Use sudo (macOS/Linux)

If you are using macOS or Linux, you may need to run the ng serve command with sudo privileges. For example, to run the command with sudo, you would use the following:

sudo ng serve

Check for Environment Variables

Some environment variables may be interfering with the development server. Try setting the following environment variable before running the ng serve command:

NODE_OPTIONS="--max_old_space_size=4096"

Check for Permissions Issues

Make sure that the user account you are using has the necessary permissions to access the project directory and to run the ng serve command.

Use a Virtual Machine

If you have tried all of the above methods and are still unable to resolve the issue, you may want to try using a virtual machine to run your Angular project. This can help to isolate the issue and determine if it is related to your specific system or configuration.