在配置文件中为 ng serve 设置默认主机和端口

Question

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

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

而不仅仅是

ng serve

Answer 1

截至目前，该功能不受支持，但是如果这让您感到困扰，您的 package.json...

中会有一个替代方案

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

这样你就可以运行npm start

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

Answer 2

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

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

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

Answer 3

你可以将这些保存在一个文件中，但你必须将它放在 .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

中

Answer 4

Angular 命令行界面 6+

在最新版本Angular中，这是在the angular.json config file中设置的。示例：

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

您还可以 use ng config 到 view/edit 值：

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

Angular 命令行界面 <6

在以前的版本中，这是 defaults 元素下面的 set in angular-cli.json：

{
  "defaults": {
    "serve": {
      "port": 4444,
      "host": "10.1.2.3"
    }
  }
}

Answer 5

另一种选择是运行 ng serve 命令带有 --port 选项，例如

ng serve --port 5050（即端口 5050）

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

Answer 6

这在最新的 Angular CLI 中有所改变。

文件名更改为angular.json，结构也发生了变化

这是你应该做的：

"projects": {
    "project-name": {
        ...
        "architect": {
            "serve": {
                "options": {
                  "host": "foo.bar",
                  "port": 80
                }
            }
        }
        ...
    }
}

Answer 7

这是我输入 package.json (运行 angular 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 的内容。还可以向内容添加其他选项

Answer 8

enter image description here

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

Answer 9

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

如果您在 windows 上，您可以这样做：

在你的项目根目录下，创建文件run.bat
在此文件中添加带有您选择的配置的命令。例如

ng serve --host 192.168.1.2 --open

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

这不是标准方式，但使用起来很舒服（我觉得）。

Answer 11

如果您打算 运行 angular 项目 自定义 host/IP 并且端口不需要在配置文件

中进行更改

以下命令对我有用

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

我的结果是

Answer 12

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

npm install internal-ip-cli --save-dev
ng serve --open --host $(./node_modules/.bin/internal-ip --ipv4)

Answer 13

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

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

然后可以在 angular.json:

中配置 architect > serve 部分

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

并且可能还想更改 package.json 中的 hostname:

ng run app:serve --host=localho.st --port=8100

在配置文件中为 ng serve 设置默认主机和端口

Set default host and port for ng serve in config file

angular

angular-cli

Angular 命令行界面 6+

Angular 命令行界面 <6