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

时间：2016-11-21 10:02:17

标签： angular-cli

我想用5000而不是4200 ..

我试过的是我在根名称ember-cli上创建了一个文件并根据下面的代码放置了JSON：

{
   "port": 5000
}

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

31 个答案:

答案 0 :(得分：215)

解决方案对我有用

ng serve --port 4401

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

然后启动浏览器 - ＆gt; http://localhost:4401/

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

答案 1 :(得分：96)

您可以输入以下命令

来更改应用程序端口

ng serve --port 4200

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

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

答案 2 :(得分：44)

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

指定主机

答案 3 :(得分：30)

最近版本的CLI似乎发生了变化（我使用6.0.1）。通过向我的项目ng serve添加port选项，我可以更改angular.json使用的默认端口：

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

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

答案 4 :(得分：24)

端口设置的位置已更改了两次。

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

答案 5 :(得分：15)

没有人为最新的Angular CLI更新答案。最新的 Angular CLI

使用angular-cli的 latest version （其中angular-cli.json重命名为 angular.json ），您可以通过编辑< strong> angular.json 文件 您现在可以按 "project"

指定一个端口 
projects": {
    "my-cool-project": {
        ... rest of project config omitted
        "architect": {
            "serve": {
                "options": {
                    "port": 4500
                }
            }
        }
    }
}

详细了解它 here

答案 6 :(得分：12)

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

ng set defaults.serve.port=4201

它会更改您的.angular.cli.json，并将端口设置添加为it mentioned earlier。

在此更改之后，您只需使用ng serve即可使用首选端口，而无需每次都进行指定。

答案 7 :(得分：7)

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

angular.json中的Angular 9 

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

答案 8 :(得分：7)

您也可以在角度cli中输入以下命令，通常输入npm start

ng serve --host“ip-address”--port“port-number”

答案 9 :(得分：5)

转到angular.json文件，

搜索关键字“ serve”：

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

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

答案 10 :(得分：5)

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

答案 11 :(得分：4)

  • 永久：

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

  • 立即运行：

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

答案 12 :(得分：3)

在angular 2 ++中。

要更改端口，可以在终端中运行以下命令：

ng serve --host 0.0.0.0 --port 5000.

答案 13 :(得分：3)

您可以编辑在serve.js文件中配置的默认端口号。

路径为project_direcory/node_modules/angular-cli/commands/serve.js。

搜索此行 - ＆gt; var defaultPort = process.env.PORT || 4200;
替换为此行 - ＆gt; var defaultPort = process.env.PORT || 5000;

答案 14 :(得分：3)

这也会自动打开您的窗口

ng serve -o --port 4801

答案 15 :(得分：2)

运行以下命令而不是4200 

ng serve --port 4500

答案 16 :(得分：2)

在angular.json中：

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

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

答案 17 :(得分：2)

您可以使用以下命令更改应用程序端口：-

ng serve --port 4400

注意：-在我的情况下，所需的端口号是4400。可以选择任何端口。

要查看更改：-

只需使用以下命令启动浏览器：http://localhost:4400/

答案 18 :(得分：1)

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

  1. 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 */
   }
  1. 使用
    2. 运行项目 
    ng serve --port <<port number>> --open
  1. 在 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.

答案 19 :(得分：1)

对于10度以上的用户：

  1. 导航到angular.json文件。
  2. 搜索“服务”字段。
  3. 在“服务”下将显示“选项”字段。
  4. 将此行添加到“选项”中： “端口”：4202（您想要的任何端口）。

示例：

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

答案 20 :(得分：1)

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

enter image description here

答案 21 :(得分：1)

对我有用的代码如下

ng serve --port ABCD

例如

ng serve --port 6300

答案 22 :(得分：0)

要运行并在浏览器中自动打开，请使用标志-open或仅使用-o 

ng serve -o --port 4200

注意：端口4200是任意的。它可以是您选择的任何端口

答案 23 :(得分：0)

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

  • 创建NodeJS脚本，该脚本将可以访问环境变量（例如DEV_SERVER_PORT），并且可以使用从该变量中获取的ng serve参数值（{{3} }可能是我们这里的朋友）：
--port
  • 更新package.json以提供通过npm运行的脚本
  • 不要忘记设置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())); 环境变量（可以通过child_process完成）

这也是此方法的完整说明：dotenv。

答案 24 :(得分：0)

这适用于所有用户：

ng s -o --port 4450

服务：

s

构建并提供您的应用，并根据文件更改进行重建。

答案 25 :(得分：0)

您可以尝试：

ng serve --host 0.0.0.0 --port 4001

然后使用以下命令启动浏览器：http：// localhost：4001 /

答案 26 :(得分：0)

只需运行

ng服务-端口您的端口

示例：

  

ng serve --port 4401

答案 27 :(得分：0)

转到此文件

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

和搜索端口

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

根据需要更改默认值，然后重新启动服务器

答案 28 :(得分：0)

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

这种方式只有本地指向另一个端口。

答案 29 :(得分：0)

只需在 package.json 文件中设置

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

然后运行命令

npm start

答案 30 :(得分：-1)

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

cli命令的第一种方式：

index.html

第二种方法是通过在ng serve --port 2400 --open 位置进行配置。

在ProjectName\node_modules\@angular-devkit\build-angular\src\dev-server\schema.json文件中进行更改。

schema.json
相关问题
最新问题