如何将角度端口从 4200 更改为任何其他

对我有用的解决方案是

ng serve --port 4401    

（您可以将 4401 更改为您想要的任何数字）

然后启动浏览器-> http://localhost:4401/

基本上，我有两个应用程序，现在借助上述方法，我可以在我的开发环境中同时运行它们。

---

在最近的 CLI 版本中，情况似乎发生了变化（我使用的是 6.0.1）。通过向我的项目的 angular.json 添加一个 port 选项，我能够更改 ng serve 使用的默认端口：

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

（此示例中仅显示相关属性。）

---

您可以通过输入以下命令来更改应用程序端口，

ng 服务 --port 4200

此外，对于永久设置，您可以通过编辑 angular-cli.json 文件来更改端口

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

---

更改 nodel_modules/angular-cli/commands/server.js 是个坏主意，因为它会在您安装新版本的 angular-cli 时更新。相反，您应该像这样在 package.json 中指定 ng serve --port 5000：

"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

使用 angular-cli 的 latest version ，其中 angular-cli.json 重命名为 angular.json ，您可以通过编辑 angular.json 来更改端口strong> 文件，您现在可以为每个 "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 并将端口设置添加为 it mentioned earlier。

在此更改之后，您可以简单地使用 ng serve，它会使用首选端口，而无需每次都指定它。

---

您还可以在通常输入 npm start 的 Angular cli 中输入以下命令

ng 服务 --host "ip-address" --port "port-number"

---

要在运行时更改端口一次并且不更改配置，您可以使用以下命令

ng serve --port 5000

如果每次运行 ng serve 都需要 5000 个端口。使用以下方法

使用 angular.json

https://i.stack.imgur.com/jyYaR.png

在 node_modules > @angular-devkit > build-angular > src > dev-server > schema.json 中，您会发现下面的代码并根据需要更新端口，例如 5000。在 package.json 中的“脚本”下，我们已经“开始”使用以下命令对其进行更新，因此在每次运行“npm start”时，它将在 5000 上运行。

注意：使用“ng serve”或“npm start”在终端中发布所有重新启动服务器的反馈有助于改进。谢谢！

---

不建议更改节点模块，因为更新或重新安装可能会删除这些更改。所以最好改变角度cli

angular.json 中的 Angular 9

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

---

你也可以写这个命令：ng serve -p 5000

---

对于角度 10+：

导航到 angular.json 文件。搜索“服务”字段。在“服务”下，它将是“选项”字段（如果不存在，请添加选项字段）。将此行添加到“选项”：“端口”：4333（您想要的任何端口）。

例子：

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

---

对于永久：转到 nodel_modules/angular-cli/commands/server.js 搜索 var defaultPort = process.env.PORT || 4200;并将 4200 更改为您想要的任何其他内容。

现在运行： ng serve --port 4500 （您将 4500 更改为您想用作端口的任何数字）

---

转到此文件

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

和搜索端口

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

随意更改默认值并重新启动服务器

---

只需在 package.json 文件中设置

"scripts": {
    "ng": "ng",
    "start": "ng serve --port 3000",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

然后运行命令

npm start

---

在 angular.json 中：

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

我正在使用 angular-cli。这对我有用。

---

转到 angular.json 文件，

搜索关键字“服务”：

添加 port 关键字，如下所示：

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

---

在 Angular 项目中更改端口号的方法：

node_modules \ @angular-devkit\build-angular\src\dev-server\schema.json 在这个路径

    "port": {
             "type": "number",
             "description": "Port to listen on.",
             "default": <<port number>>     /* write your required port number here */
   } 

使用运行项目

    ng serve --port <<port number>> --open

在 angular.json 文件中

   "server": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
          "browserTarget": "projectname:build",
          "port": 5000   /* add this part */
         }

adding this part and starting the server.

---

尽管上述答案中已经有许多有效的解决方案，但这里是使用 Visual Studio Code 的 Angular 7 项目（也可能是早期版本，但不能保证）的视觉指南和特定解决方案。在图像树所示的目录中找到 schema.json 并更改 port --> default 下的整数以永久更改浏览器中的端口。

https://i.stack.imgur.com/oOtuY.jpg

---

如果您有多个环境，您可以在 angular.json 中添加以下方式：

 "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "your_project:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "your_project:build:production"
        },
        "es5": {
          "browserTarget": "your_project:build:es5"
        },
        "local": {
          "browserTarget": "your_project:build:local",
          "port": 4201
        },
        "uat": {
          "browserTarget": "your_project:build:uat"
        }
      }
    },

这样只有本地指向另一个端口。

---

我们有两种方法可以更改 Angular 中的默认端口号。

cli命令的第一种方法：

ng serve --port 2400 --open

第二种方法是在位置：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
    },

---

如果要使用 NodeJS 环境变量来设置 Angular CLI 开发服务器的端口值，可以采用以下方法：

创建 NodeJS 脚本，它可以访问环境变量（例如 DEV_SERVER_PORT），并且可以使用从该变量获取的 --port 参数值运行 ng serve（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()));

更新 package.json 以提供通过 npm 运行的此脚本

不要忘记设置 DEV_SERVER_PORT 环境变量（可以通过 dotenv 完成）

以下也是此方法的完整说明：How to change Angular CLI Development Server Port via .env。

---