web-dev-qa-db-ja.com

設定ファイルでngサーバのデフォルトのホストとポートを設定する

私は私が入力する必要はありませんので、私は設定ファイルでホストとポートを設定できるかどうかを知りたい

ng serve --Host foo.bar --port 80

ただの代わりに

ng serve
angularangular-cli
130
cre8

Angular CLI 6+

Angularの最新バージョンでは、これは angular.json設定ファイル に設定されています。例：

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "projects": {
        "my-project": {
            "architect": {
                "serve": {
                    "options": {
                        "port": 4444
                    }
                }
            }
        }
    }
}

ng config を使用して値を表示/編集することもできます。

ng config projects["my-project"].architect["serve"].options {port:4444}

Angular CLI <6

以前のバージョンでは、これは defaults要素の下のangular-cli.json に設定されていました。

{
  "defaults": {
    "serve": {
      "port": 4444,
      "Host": "10.1.2.3"
    }
  }
}
183
Toby J

現時点では、この機能はサポートされていませんが、これが問題になる場合は、package.jsonに代替手段があります。

"scripts": {
  "start": "ng serve --Host foo.bar --port 80"
}

こうすればnpm startを実行できます

複数のプロジェクトにまたがってこれを行いたい場合のもう1つのオプションは、エイリアスを作成することです。エイリアスには、上記のコマンドを実行するngserveという名前を付けることができます。

61
Brocco

デフォルトのHTTPポートとLiveReloadサーバーで使用されるものを2つのコマンドラインオプションで設定できます。

ng serve --Host 0.0.0.0 --port 4201 --live-reload-port 49153

https://github.com/angular/angular-cli

30
Shreekant N

これは最新のAngular CLIで変更されました。

ファイル名がangular.jsonに変更され、構造も変更されました。

これはあなたがすべきことです：

"projects": {
    "project-name": {
        ...
        "architect": {
            "serve": {
                "options": {
                  "Host": "foo.bar",
                  "port": 80
                }
            }
        }
        ...
    }
}
25
arsanyf

他のオプションは、ng serveオプションを付けて--portコマンドを実行することです。

ng serve --port 5050（すなわちポート5050用）

あるいは、コマンドng serve --port 0は、使用可能なポートを自動的に割り当てます。

13
Mwizak

Angularでデフォルトのポート番号を変更する方法は2つあります。

Cliコマンドへの最初の方法：

ng serve --port 2400 --open

2番目の方法は、ProjectName\node_modules\@ angular-devkit\build-angular\src\dev-server\schema.jsonの場所に設定することです。

Schema.jsonファイルを変更します。

{"タイトル"： "開発サーバーターゲット"、 "説明"： "ビルドファサードの開発サーバーターゲットオプション"、 "タイプ"： "オブジェクト"、 "プロパティ"：{"ブラウザターゲット"：{"タイプ"： "文字列"、"説明 "："奉仕するターゲット。 " }、 "port"：{"type"： "number"、 "description"： "待機するポート"、 "default"：2400}、

7
Satyendra Patel

これらはファイルに保存できますが、.ember-cliに入れる必要があります（現時点では少なくとも）。 を参照してください。https://github.com/angular/angular-cli/issues/1156#issuecomment-227412924

{
"port": 4201,
"liveReload": true,
"Host": "dev.domain.org",
"live-reload-port": 49153
}

編集：あなたは今コミット https://github.com/angular/angular-cli/commit/da255b0808dcbe2f9da62086baec98dacc4b7ec9 のようにangular-cli.jsonでこれらを設定することができますビルド1.0.0-beta.30

6
Dan Mitchell

あなたが窓にいるなら、あなたはこのようにそれをすることができます：

  1. プロジェクトのルートディレクトリに、run.batファイルを作成します。
  2. このファイルに、選択した構成のコマンドを追加してください。例えば

ng serve --Host 192.168.1.2 --open

  1. これで、あなたが奉仕したいときはいつでもこのファイルをクリックして開くことができます。

これは標準的な方法ではありませんが、快適に使用できます（私は感じます）。

3
Sankeerth

これは私がpackage.jsonに入れたものです（Angular 6を実行）。

{
  "name": "local-weather-app",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 5000",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

それから、プレーンなnpm startはstartの内容を引き込みます。コンテンツに他のオプションを追加することもできます

0
John Dugger

ここに画像の説明を入力してください

あなたがしなければならない唯一のこと。これをあなたのコマンドプロンプトに入力してください：ng serve --port 4021 [またはあなたが割り当てたい他のポート：例えば5050、5051など]。ファイルを変更する必要はありません。

0
Shahbaz Ali Khan