角度ポートを4200から他のポートに変更する方法

4200の代わりに5000を使用したい

私が試したのは、ルート名にファイルを作成し、ember-cli以下のコードに従ってJSONを配置したことです。

{
   "port": 5000
}

しかし、私のアプリは5000ではなく4200で実行されます

私のために働いた解決策は

ng serve --port 4401    

（4401は任意の数に変更できます）

次に、ブラウザを起動します-> http：// localhost：4401 /

基本的に、私は2つのアプリケーションを持っていて、上記のアプローチの助けを借りて、私の開発環境で同時に両方を実行することができます。

次のコマンドを入力して、アプリケーションポートを変更できます。

ng serve --port 4200

また、永続的なセットアップでは、angular-cli.jsonファイルを編集してポートを変更できます

 "defaults": {
    "serve": {
      "port": 8080
    }
  }

最近のバージョンのCLI（私はを使用しています6.0.1）で状況が変わったようです。私のプロジェクトにオプションをng serve追加することで、使用されるデフォルトのポートを変更できました：portangular.json

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

（この例では、関連するプロパティのみが示されています。）

nodel_modules/angular-cli/commands/server.js新しいバージョンのをインストールすると更新されるため、変更はお勧めできませんangular-cli。代わりに、次のようにng serve --port 5000を指定する必要がありますpackage.json。

"scripts": {
    "start": "ng serve --port 5000"
}

--host 127.0.0.1でホストを指定することもできます

ポート設定の場所が数回変更されました。

Angular CLI 1を使用している場合

変化する angular-cli.json

{
  "defaults": {
    "serve": {
      "host": "0.0.0.0",
      "port": 5000 
    }
  }
}

最新のAngular CLIを使用している場合

変化する angular.json

"projects": {
    "project-name": {
        ...
        "architect": {
            "serve": {
                "options": {
                  "host": "0.0.0.0",
                  "port": 5000
                }
            }
        }
        ...
    }
}

ファイルを変更せずに

コマンドを実行する

ng serve --host 0.0.0.0 --port 5000

最新のAngular CLIの回答を更新した人はいません。 Angular CLI

latest version角度-cli.jsonが名前に変更した角度-CLIのangular.json、あなたが編集してポートを変更することができますangular.jsonファイルをあなたは今、ポートごとに指定します"project"

projects": {
    "my-cool-project": {
        ... rest of project config omitted
        "architect": {
            "serve": {
                "options": {
                    "port": 4500
                }
            }
        }
    }
}

それについてもっと読む here

私は通常、ng setコマンドを使用してプロジェクトレベルのAngular CLI設定を変更します。

ng set defaults.serve.port=4201

前述のように.angular.cli.json、変更によりポート設定が変更され、追加されます。

この変更後は簡単ng serveに使用でき、毎回指定する必要なく優先ポートを使用します。

通常npm startと入力する角度cliで以下のコマンドを入力することもできます

ng serve --host "ip-address" --port "port-number"

このコマンドを書くこともできます： ng serve -p 5000

このファイルに移動

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

そして検索ポート

"port": {
  "type": "number",
  "description": "Port to listen on.",
  "default": 4200
},

必要に応じてデフォルト値を変更し、サーバーを再起動します

• 永久の場合：

  後藤nodel_modules /角度-CLI /コマンド/ server.js を検索するVAR defaultPort = process.env.PORT || 4200; そして4200をあなたが望む他のものに変更してください。

• 今すぐ実行するには：

  ng serve --port 4500 （ポートとして使用する任意の番号に4500を変更します）

更新または再インストールによりこれらの変更が削除される可能性があるため、ノードモジュールを変更することはお勧めしません。角度クリで変更するのが良い

angular.jsonのAngular 9

{
    "projects": {
            "targets": {
                "serve": {
                    "options": {
                         "port": 5000
                     }
                }     
            }     
    }
}  

serve.jsファイルで構成されているデフォルトのポート番号を編集できます。

パスはになりますproject_direcory/node_modules/angular-cli/commands/serve.js。

この行を検索->この行でvar defaultPort = process.env.PORT || 4200;
置換->var defaultPort = process.env.PORT || 5000;

単に走る ng serve --port 5000 --open

4200以外の場合は、以下のコマンドを実行します

ng serve --port 4500

angular.jsonでは：

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
          "browserTarget": "projectname:build",
          "port": 5000
         }

angular-cliを使用しています。これでうまくいきました。

角度2 ++で。

ポートを変更するには、ターミナルで以下のコマンドを実行します：

ng serve --host 0.0.0.0 --port 5000.

上記の回答にはすでに多数の有効なソリューションがありますが、ここではVisual Studio Codeを使用したAngular 7プロジェクト（以前のバージョンも可能ですが、保証はありません）の具体的なソリューションとビジュアルガイドを示します。画像ツリーに示されているディレクトリでschema.jsonを見つけ、port- > defaultの下の整数を変更して、ブラウザーでポートを永続的に変更します。

angular.jsonファイルに移動し、

キーワード「サーブ」を検索：

port以下に示すようにキーワードを追加します。

 "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "options": {
         "browserTarget": "my-new-angular-app:build",
         "port": 3001
     },
     ...

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
    },

とにかく走れ

ng serve --port yourport

例：

ng serve --port 4401

私のために働いたコードは次のとおりでした

ng serve --port ABCD

例えば

ng serve --port 6300

ブラウザーで実行して開くには、自動的にフラグを使用する-openか、単に-o

ng serve -o --port 4200

注：ポート4200は任意です。選択した任意のポートにすることができます

NodeJS環境変数を使用してAngular CLI開発サーバーのポートの値を設定する場合は、次の方法が可能です。

• NodeJSスクリプトを作成します。これは、環境変数（たとえば、DEV_SERVER_PORT）にアクセスでき、その変数から取得ng serveした--portパラメーター値で実行できます（child_processは、ここでの友だちかもしれません）。

const child_process = require('child_process');
const child = child_process.exec(`ng serve --port=${process.env.DEV_SERVER_PORT}`);
child.stdout.on('data', data => console.log(data.toString()));

• npmを介して実行されるこのスクリプトを提供するためにpackage.jsonを更新します
• DEV_SERVER_PORT環境変数を設定することを忘れないでください（dotenvで行うことができます）

このアプローチの完全な説明もここにあります：.envを介してAngular CLI開発サーバーのポートを変更する方法。

これにより、ウィンドウも自動的に開きます

ng serve -o --port 4801