如何将 angular 端口从默认 4200 改成其他端口？

我想用 5000 而不是 4200 端口

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

{
"port": 5000
}

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

668351 次浏览
小开
  • < p > 永久的:

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

  • < p > 现在就跑:

    Ng serve——端口4500(你可以将4500更改为任何你想要用作端口的数字)

小开

更改nodel_modules/angular-cli/commands/server.js是一个坏主意，因为当你安装新版本的angular-cli时，它会被更新。相反，你应该像这样在package.json中指定Ng serve——端口5000:

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

你也可以用——主机127.0.0.1指定主机

小开

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

Ng serve——端口4200

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

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

你也可以在通常输入NPM start的angular cli中输入下面的命令

Ng服务器——主机“ip-address”——端口“port-number”

小开
最佳答案

对我来说有效的解决方法是

ng serve --port 4401

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

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

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

小开

你也可以这样写:ng serve -p 5000

小开

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

ng set defaults.serve.port=4201

它会改变你的.angular.cli.json并将端口设置添加为之前提到过。

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

小开

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

(本例中只显示相关属性。)

小开

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

如果使用Angular CLI

改变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.json:

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

我使用的是angular-cli。这对我很管用。

小开

没有人更新了最新的Angular CLI的答案。使用最新的Angular CLI

With angular-cli的latest versionjson重命名为angular.json，你可以通过编辑angular.json文件来改变端口 你现在为"project"

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

阅读更多关于它here

小开

在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
},
小开

虽然上面的答案中已经有许多有效的解决方案，这里是一个视觉指南和针对Angular 7项目的特定解决方案(可能是早期版本，但不保证)使用visual Studio Code。定位模式。在图像树中显示的目录中，修改端口——>默认值下的整数，以永久改变浏览器中的端口。

enter image description here

小开

转到这个文件

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

搜索端口

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

改变默认的的值并重新启动服务器

小开

进入angular.json文件，

搜索关键字“serve”:

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

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

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

Angular .json中的Angular 9

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

如果你想使用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()));
  • 更新包。Json提供这个脚本通过NPM运行
  • 不要忘记设置DEV_SERVER_PORT环境变量(可以通过dotenv来完成)

下面是这种方法的完整描述:如何通过.env更改Angular CLI开发服务器端口。

小开

对于角10+:

  1. 导航到angular。json文件。
  2. 搜索“服务”;字段。
  3. 在“serve"这将是“选项”;字段(如果不存在则添加选项字段)。
  4. 将这一行添加到“;options" "port": 4333(你想要的任何端口).

例子:

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

如果你有多个环境，你可以在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项目中更改端口号的方法:

  1. Node_modules \ @angular-devkit\build-angular\src\dev-server\schemaJson文件
    "port": {
"type": "number",
"description": "Port to listen on.",
"default": <<port number>>     /* write your required port number here */
}
  1. 使用以下命令运行项目
    ng serve --port <<port number>> --open
  1. 在角。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.
小开

简单设置在包中。json文件

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

然后运行命令

npm start
小开

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

ng serve --port 5000

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

  1. 使用angular.json
< p >搜索“serve"在添加字段"options"如下: enter image description here < / p >

  1. In node_modules >@angular-devkit祝辞build-angular祝辞src祝辞dev-server祝辞模式。Json，你会发现下面的代码和更新端口，如你想要的5000。 enter image description here < / p >

    2. <李> < p >在包中。Json在“;scripts"时我们已经“开始”用下面的命令更新它，这样每次运行“npm start"它将在5000上运行。 enter image description here < / p >

注意:在终端中使用'ng serve'或'npm start'发布所有的重启服务器反馈有助于改进。谢谢!

小开

在package.json中设置你的首选项

-o或——open是在浏览器中自动运行应用程序

使用NPM start或ng serve运行你的应用程序

"scripts": {
"start": "ng serve --port 4500 -o"
}

提交答案