在配置文件中设置ng服务的默认主机和端口

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

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

而不只是

ng serve

Angular CLI 6+

在最新版本的Angular中，这是在config文件中设置的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}

Angular CLI <6

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

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

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

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

这样您可以简单地运行 npm start

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

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

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

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

这在最新的Angular CLI中已更改。

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

这是您应该做的：

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

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

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

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

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

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

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

编辑：您现在可以在提交https://github.com/angular/angular-cli/commit/da255b0808dcbe2f9da62086baec98dacc4b7ec9以来的angular-cli.json中进行设置，该版本位于1.0.0-beta.30版本中

如果您打算在自定义主机/ 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

对我来说结果是

如果您在Windows上，则可以通过以下方式进行操作：

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

ng serve --host 192.168.1.2 --open

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

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

这是我放入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的内容。也可以向内容添加其他选项

在此处输入图片说明

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

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

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