Angular-CliでPortを変更する

Angular-Cliを使って Dev ServerのPortを変更する

• 背景
• Projectをつくる
• Portの設定

背景

アプリケーション側、管理画面側のプロジェジュトを同時に開発することがあり、Portの切り離しが必要になったため。

Projectの作成

$ pwd # Project Path
$ ng new other-port-project
$ cd other-port-project
$ ng serve

localhost:4200で以下の画面が確認できれば、次に行きます。

Portの設定

angular.jsonのserve プロパティにportの設定を記入していきます。
確認した際は、50行目あたりにありました。

angular.json(編集前)

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angular-practice:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angular-practice:build:production"
            }
          }
        },

portを4201に編集します。
optionsプロパティにport: という形で設定します。

angular.json(編集後)

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angular-practice:build",
　　　　　　　　　　　　　　　　　　　　　　　　///ここから
            "port": 4201
　　　　　　　　　　　　　　　　　　　　　　　　///ここまで
          },
          "configurations": {
            "production": {
              "browserTarget": "angular-practice:build:production"
            }
          }
        },

localhost:4201にさきほどあげた画面がみれれば完了。