構成ファイルでng serveのデフォルトのホストとポートを設定します

入力する必要がないように、構成ファイルでホストとポートを設定できるかどうかを知りたい

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

ただの代わりに

ng serve

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

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

{
  "defaults": {
    "serve": {
      "port": 4444,
      "host": "10.1.2.3"
    }
  }
}

現在のところ、その機能はサポートされていませんが、これがあなたを困らせるものである場合、package.json ...

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

このように、単純に実行できます npm start

複数のプロジェクト間でこれを行う場合の別のオプションはngserve、上記のコマンドを実行する可能性がある名前を付けることができるエイリアスを作成することです。

デフォルトのHTTPポートと、LiveReloadサーバーが使用するポートを、2つのコマンドラインオプションで構成できます。

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

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

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

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

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

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

別のオプションは、実行することですng serveし、コマンドを--portオプションなど

ng serve --port 5050 （つまり、ポート5050の場合）

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

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

最初の方法はCLIコマンドによるものです。

ng serve --port 2400 --open

2番目の方法は、次の場所で構成することです。

ProjectName\node_modules\@angular-devkit\build-angular\src\dev-server\schema.json.

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

{
 "title": "Dev Server Target",
  "description": "Dev Server target options for Build Facade.",
  "type": "object",
  "properties": {
    "browserTarget": {
      "type": "string",
      "description": "Target to serve."
    },
    "port": {
      "type": "number",
      "description": "Port to listen on.",
      "default": 2400
    },

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

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

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

カスタムホスト/ IPおよびポートで角度プロジェクトを実行することを計画している場合は、構成ファイルを変更する必要はありません。

次のコマンドは私のために働きました

ng serve --host aaa.bbb.ccc.ddd --port xxxx

どこ、

aaa.bbb.ccc.ddd --> IP you want to run the project
xxx --> Port you want to run the project

例

ng serve --host 192.168.322.144 --port 6300

私の結果は

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

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

ng serve --host 192.168.1.2 --open

3. これで、配信したいときにいつでもこのファイルをクリックして開くことができます。

これは標準的な方法ではありませんが、使いやすいと思います。

ここに私が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の内容を取り込みます。コンテンツに他のオプションを追加することもできます

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

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

ng serveの実行時にローカルIPアドレスを明示的に開いておきたい場合は、以下を実行できます。

npm install internal-ip-cli --save
ng serve --open --host $(./node_modules/.bin/internal-ip --ipv4)