Angular-CLI サーバー ポート変更方法

Angular-CLI サーバーのデフォルトポート指定について

Angular-CLI を使用して Angular アプリケーションを開発する際に、サーバーを起動するコマンド ng serve のデフォルトポートは通常 4200 です。しかし、特定のポートを使用したい場合、コマンドラインオプションを使って指定することができます。

コマンドラインオプション: --port

このオプションを使用することで、サーバーの起動時に任意のポートを指定できます。

例

ng serve --port 8080

このコマンドを実行すると、サーバーはポート 8080 で起動します。

angular.json ファイルでの設定

Angularプロジェクトのルートディレクトリにある angular.json ファイルで、デフォルトポートを指定することもできます。

angular.json の serve プロパティ内の options オブジェクトに port キーを追加します。

{
  "projects": {
    "your-project-name": {
      "architect": {
        "serve": {
          "options": {
            "port": 8080
          }
        }
      }
    }
  }
}

この設定を保存し、その後 ng serve を実行すると、デフォルトでポート 8080 が使用されます。

注意

• ポート番号を指定しない場合、デフォルトのポート 4200 が使用されます。
• ポート番号がすでに他のアプリケーションで使用されている場合、エラーが発生します。
• ポート番号は 0 から 65535 の範囲で指定できます。

コマンドラインオプションを使用したポート指定

ng serve --port 8080

• --port 8080: ポート番号を 8080 に指定するオプション
• ng serve: Angular-CLI サーバーを起動するコマンド

{
  "projects": {
    "your-project-name": {
      "architect": {
        "serve": {
          "options": {
            "port": 8080
          }
        }
      }
    }
  }
}

• port: ポート番号を指定するプロパティ
• your-project-name: プロジェクトの名前

TypeScript ファイルでのポート設定 (Angular 13 以降)

import { provideRouter, Route } from '@angular/router';
import { AppComponent } from './app.component';

const routes: Route[] = [
  // ...
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes, {
      initialNavigation: 'enabled',
      // ポート番号を指定
      useHash: true,
      baseHref: 'http://localhost:8080/'
    })
  ],
  providers: [
    provideRouter(routes)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

• baseHref: ベースURLを指定
• useHash: URL にハッシュを使用する

環境変数を使用する

環境変数 PORT を設定することで、Angular-CLI サーバーのポートを指定することができます。

コマンドライン

PORT=8080 ng serve

シェルスクリプト

export PORT=8080
ng serve

package.json ファイルのスクリプトを使用する

package.json ファイルの scripts プロパティにカスタムスクリプトを定義し、その中でポートを指定することができます。

package.json

{
  "scripts": {
    "serve:custom": "ng serve --port 8080"
  }
}

実行

npm run serve:custom

Angular CLI の serve コマンドのオプションを使用する

ng serve コマンドには、他にもポートを指定するためのオプションがあります。

• --proxy-config: プロキシ設定を指定します。
• --host: サーバーのホスト名を指定します。

ng serve --host 0.0.0.0 --port 8080

ng serve コマンドのエイリアスを作成し、そのエイリアスにデフォルトのポートを指定することができます。

alias ng-serve-custom='ng serve --port 8080'

ng-serve-custom