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

Question

我想用 5000 而不是 4200。

我已尝试在根名称 ember-cli 上创建一个文件，并根据以下代码放置 JSON：

{
   "port": 5000
}

但我的应用程序仍然在 4200 而不是 5000 上运行

Answer 1

对于永久：

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

ng serve --port 4500（您将 4500 更改为您想要用作端口的任何数字）

Answer 2

更改 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

指定主机

Answer 3

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

ng 服务 --port 4200

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

来更改端口

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

Answer 4

您还可以在通常输入 npm start

的 angular cli 中输入以下命令

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

Answer 5

对我有用的解决方案是

ng serve --port 4401

(4401可以改成任何你想要的号码)

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

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

Answer 6

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

Answer 7

我通常使用 ng set 命令更改项目级别的 Angular CLI 设置。

ng set defaults.serve.port=4201

它更改了您的 .angular.cli.json 并将端口设置添加为。

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

Answer 8

最近版本的 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
                    }
                }
            }
        }
    }
}

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

Answer 9

端口设置的位置已经改变了几次。

如果使用 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

Answer 10

在angular.json中：

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

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

Answer 11

没有人更新最新 Angular CLI.With 最新 Angular CLI

的答案

使用 latest version 的 angular-cli，其中 angular-cli.json 重命名为 angular.json ，你可以通过编辑 angular.json 文件来更改端口您现在为每个 "project"

指定一个端口

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

了解更多信息 here

Answer 12

我们有两种方法可以更改 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
    },

Answer 13

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

Answer 14

转到此文件

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

和搜索端口

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

更改默认值任何你想要的值并重新启动服务器

Answer 15

转到 angular.json 文件，

搜索关键字 "serve":

添加port关键字如下图：

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

Answer 16

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

中更改

Angular angular.json

中的 9 个

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

Answer 17

如果你想使用 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()));

更新 package.json 以通过 npm运行ning 提供此脚本
不要忘记设置 DEV_SERVER_PORT 环境变量（可以通过 dotenv 完成）

这里也是对这种方法的完整描述：How to change Angular CLI Development Server Port via .env。

Answer 18

对于 angular 10+:

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

示例：

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

Answer 19

如果你有多个环境，你可以在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"
        }
      }
    },

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

Answer 20

在 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.

Answer 21

只需在package.json文件中设置

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

然后运行命令

npm start

Answer 22

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

ng serve --port 5000

如果 ng 服务的每个运行您需要有 5000 个端口。使用以下方法

使用angular.json

在添加字段“选项”下搜索“服务”，如下所示：

在node_modules > @angular-devkit > build-angular > src > dev-server > schema.json中，你会在下面找到根据需要编码和更新端口，如 5000。
在“脚本”下的 package.json 中，我们使用以下命令“开始”更新它，因此在“npm start”的每个运行上它将在 5000 上运行。

注意：Post所有在终端重启服务器的'ng serve'或'npm start'反馈有助于改进。谢谢！

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

How to change angular port from 4200 to any other

angular-cli

如果使用 Angular CLI 1

如果使用最新的 Angular CLI

不改变任何文件