188

我想知道我是否可以在配置文件中设置主机和端口,这样我就不必输入

ng serve --host foo.bar --port 80

而不仅仅是

ng serve
4

13 回答 13

246

角 CLI 6+

在最新版本的 Angular 中,这是在配置文件中设置angular.json。例子:

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

您还可以使用ng config查看/编辑值:

ng config projects["my-project"].architect["serve"].options {port:4444}

角 CLI <6

在以前的版本中,这是在元素下方设置的:angular-cli.jsondefaults

{
  "defaults": {
    "serve": {
      "port": 4444,
      "host": "10.1.2.3"
    }
  }
}
于 2017-03-14T14:24:11.653 回答
80

截至目前,该功能不受支持,但是如果这让您感到困扰,则可以在您的 package.json 中使用替代方案...

"scripts": {
  "start": "ng serve --host foo.bar --port 80"
}

这样你就可以简单地运行npm start

如果您想跨多个项目执行此操作,另一种选择是创建一个别名,您可以命名ngserve它来执行上述命令。

于 2016-06-13T13:08:55.540 回答
33

您可以使用两个命令行选项配置默认 HTTP 端口和 LiveReload 服务器使用的端口:

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

https://github.com/angular/angular-cli

于 2016-11-03T07:24:32.493 回答
32

这在最新的 Angular CLI 中发生了变化。

文件名更改为angular.json,结构也更改了。

这是你应该做的:

"projects": {
    "project-name": {
        ...
        "architect": {
            "serve": {
                "options": {
                  "host": "foo.bar",
                  "port": 80
                }
            }
        }
        ...
    }
}
于 2018-07-04T13:46:20.140 回答
16

另一种选择是使用选项运行ng serve命令,--port例如

ng serve --port 5050 (即端口 5050)

或者,命令: ng serve --port 0, 将自动分配一个可用端口以供使用。

于 2018-01-26T07:59:58.673 回答
12

We have two ways to change default port number in Angular.

First way is by CLI command:

ng serve --port 2400 --open

Second way is by configuration at the location:

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

Make changes in schema.json file.

{
 "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
    },
于 2018-11-26T17:49:32.533 回答
7

如果您计划在自定义主机/IP端口中运行 Angular 项目,则无需更改配置文件

以下命令对我有用

ng serve --host aaa.bbb.ccc.ddd --port xxxx

在哪里,

aaa.bbb.ccc.ddd --> IP you want to run the project
xxx --> Port you want to run the project

例子

ng serve --host 192.168.322.144 --port 6300

结果对我来说是

在此处输入图像描述

于 2019-09-13T06:56:33.823 回答
6

您可以将它们保存在文件中,但您必须将其放入.ember-cli(至少目前);见https://github.com/angular/angular-cli/issues/1156#issuecomment-227412924

{
"port": 4201,
"liveReload": true,
"host": "dev.domain.org",
"live-reload-port": 49153
}

编辑:您现在可以在 angular-cli.json 中设置这些作为提交https://github.com/angular/angular-cli/commit/da255b0808dcbe2f9da62086baec98dacc4b7ec9,这是在构建 1.0.0-beta.30

于 2017-01-13T15:07:50.467 回答
3

如果你在 Windows 上,你可以这样做:

  1. 在您的项目根目录中,创建文件 run.bat
  2. 在此文件中使用您选择的配置添加您的命令。例如

ng serve --host 192.168.1.2 --open

  1. 现在,您可以随时单击并打开此文件。

这不是标准的方式,但使用起来很舒服(我觉得)。

于 2019-01-01T03:28:01.267 回答
1

如果您想在运行 ng serve 时专门打开本地 IP 地址,可以执行以下操作:

npm install internal-ip-cli --save-dev
ng serve --open --host $(./node_modules/.bin/internal-ip --ipv4)
于 2019-12-11T00:14:10.533 回答
0

在此处输入图像描述

你只需要做一件事。在您的命令提示符中输入:ng serve --port 4021 [或您要分配的任何其他端口,例如:5050、5051 等]。无需更改文件。

于 2018-10-04T00:00:44.737 回答
0

设置本地名称解析/etc/hosts并不费力。

  • 为了打开hosts文件进行编辑,运行:sudo nano /etc/hosts.
  • 然后在那里设置一个本地主机名,例如:127.0.0.1 localho.st

然后可以在以下配置architect>serve部分angular.json

"options": {
  "browserTarget": "app:build",
  "liveReload": true,
  "host": "localho.st",
  "port": 8100
},

并且可能还想更改hostnamein package.json

ng run app:serve --host=localho.st --port=8100
于 2021-07-26T04:24:14.737 回答
0

这是我放入 package.json 的内容(运行角度 6):

{
  "name": "local-weather-app",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 5000",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

然后一个普通的 npm start 将拉入 start 的内容。还可以向内容添加其他选项

于 2018-07-26T11:22:20.687 回答