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

254

我想用5000代替4200 ..

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

{
   "port": 5000
}

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

angular-cli 
— 阿舒托什·贾（Ashutosh Jha）
source
2
— 扎克·格里尔逊
您是否也重新启动了服务器？
— 克里斯，
是@kristjanreinhold
— Ashutosh Jha
这回答了你的问题了吗？angular-cli服务器-如何指定默认端口
— elwyn

Answers:

426

对我有用的解决方案是 

ng serve --port 4401

（您可以将4401更改为所需的任何数字）

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

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

— 大卫
source
选项'--port 4201'未在serve命令中注册
— holms '18
5
其他旁注：不要这样做，npm start --port 4401因为npm start似乎没有执行--port
— Jordec
1
— callee.args
仅仅是一个补充，您可以通过添加ng serve --port 4401 --open
— briancollins081
114

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

ng服务-端口4200

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

 "defaults": {
    "serve": {
      "port": 8080
    }
  }
— 加内什·卡列
source
2
在较新的版本中，应使用ng serve --port 8080（不使用“：”，而是空格）。
— 朱利安·
如果这是最后的“默认”设置，则应删除尾随的逗号
— Oswaldo Salazar
1
这在最新版本的CLI中已更改-有关更多详细信息，请参见我的答案。
— 弥敦道之友
98

似乎在最新版本的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
                    }
                }
            }
        }
    }
}

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

— 内森·朋友
source
然后我也想更改主持人
— Kunvar Singh '18年
这是真正正确的永久答案
— WtFudgE
59

更改nodel_modules/angular-cli/commands/server.js是一个坏主意，因为在安装新版本的时会进行更改angular-cli。相反，你应该指定纳克服务--port 5000在package.json这样的：

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

您也可以使用--host 127.0.0.1指定host

— Dhyey
source
您如何启动应用程序？ng serve？当我使用以下方法签入浏览器时，似乎无法正常工作：localhost:5000
— Ashish Ranjan
1
我认为这应该是公认的答案。几乎是针对农民npm start的命令
— blobmaster
为什么要使用脚本选项进行永久配置？有一个文件，这是angular.json
— Mozgor
59

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

如果使用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
— 阿萨尼夫
source
8
这应该被视为正确的答案，因为它涵盖了两种可能性：永久性或临时性解决方案。
— 丹尼尔·桑塔纳
1
我同意@Dan
— marknt15
如果永久更改，您是否知道是否应在此angular.json文件的其他位置指定新端口？我的serve选项级别包含两个项目进行browserTarget，options和configurations/production。我应该port在这两个条目中还是仅在options其中一个条目中添加这个新条目？
— Mozgor
19

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

使用latest versionangular-cli（其中angular-cli.json重命名为）angular.json，您可以通过编辑angular.json文件来更改端口，现在您可以按以下方式指定端口："project"

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

进一步了解 here

— 萨耶塔兰（Sajeetharan）
source
关于“服务/配置/生产”条目，该条目也包含一个browserTarget条目，与serve / options我们添加新条目的位置相同port吗？
— Mozgor
1
最新版本的Angular CLI的最佳答案
— Dacomis，
14

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

ng set defaults.serve.port=4201

如前所述，它会更改您.angular.cli.json的设置并添加端口设置。

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

— 奇斯科亚诺斯
source
get / set在6.0中似乎不建议使用config，因此不再有效。
— VanAlbert
6

转到此文件

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

和搜索端口

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

更改默认值，然后重新启动服务器

— 索艾尔·艾哈迈德（Sohail Ahmad）
source
为我工作，只需要注意更改提到的文件，而不更改node_modules/@angular/cli/lib/config/schema.json 包含相同属性的其他文件。
— lingar
5

  • 永久：

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

  • 立即运行：

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

— 迪帕克·斯温
source
1
我认为更改本地安装的软件包的内容不是node_modules一个好习惯。
— 布鲁诺·布兰特
5

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

angular.json中的Angular 9

{
    "projects": {
            "targets": {
                "serve": {
                    "options": {
                         "port": 5000
                     }
                }     
            }     
    }
}
— 夏姆
source
4

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

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

搜索此行-> var defaultPort = process.env.PORT || 4200;
用此行替换->var defaultPort = process.env.PORT || 5000;

— 阿姆鲁斯LS
source
4
如果您正在阅读并考虑这样做……请不要编辑依赖文件。
— emix
4

在angular.json中： 

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

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

— 迪帕克·辛格拉（Deepak Singla）
source
4

在angular 2 ++中。

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

ng serve --host 0.0.0.0 --port 5000.
— Nitya nand
source
2

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

在此处输入图片说明

— 他们
source
@ s34N很高兴听到这个消息。如果答案是有帮助的，请记住在帖子上注明（如果尚未完成）。谢了哥们。
— themightyhulk
2

转到angular.json文件，

搜索关键字“ serve”：

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

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

我们有两种方法可以更改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
    },
— 萨蒂恩德拉·帕特尔（Satyendra Patel）
source
不建议在重新安装软件包后更改node_modules中可能被覆盖的文件。Sajeetharan提出了一个很好的解决方案。
— 丹尼尔·桑塔纳
1

赶紧跑

ng serve --port yourport

例：

ng serve --port 4401

— Akitha_MJ
source
0

如果要使用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运行的脚本
  • 不要忘记设置DEV_SERVER_PORT环境变量（可以通过dotenv来完成）

这也是此方法的完整说明： 如何通过.env更改Angular CLI开发服务器端口。

— hil
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.