【发布时间】：2016-10-12 05:47:25
【问题描述】：
我想知道我是否可以在配置文件中设置主机和端口，这样我就不必输入
ng serve --host foo.bar --port 80
而不仅仅是
ng serve
【问题讨论】：
标签： angular angular-cli
【发布时间】：2016-10-12 05:47:25
【问题描述】：
Angular CLI 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查看/编辑值：
ng config projects["my-project"].architect["serve"].options {port:4444}
Angular CLI
在以前的版本中，这是set in angular-cli.json 下方的defaults 元素：
{
"defaults": {
"serve": {
"port": 4444,
"host": "10.1.2.3"
}
}
}
【讨论】：
-
为方便起见，您可以指定
0.0.0.0而不是主机 ip 来监听所有以太网设备。这样本地主机和公网IP地址都可以使用。 -
VS2017 似乎出于某种奇怪的原因忽略了端口设置，但我使用了这个技巧和 @dman 的添加（0.0.0.0 作为主机）至少启用远程连接。
-
最近版本的 CLI 似乎发生了变化（我使用的是版本 6）。 See here for more details.
-
有没有办法让这个配置环境具体化？
截至目前，该功能不受支持，但是如果这让您感到困扰，则可以在您的 package.json 中使用替代方案...
"scripts": {
"start": "ng serve --host foo.bar --port 80"
}
这样你就可以简单地运行npm start
如果您想跨多个项目执行此操作，另一种选择是创建一个别名，您可以将其命名为 ngserve，它将执行您的上述命令。
【讨论】：
-
对不起，foo.bar，指的是什么？更新：我删除它并工作，但不知道。
-
@MuhammedMoussa 将 foo.bar 替换为您希望应用运行的主机地址。
您可以使用两个命令行选项配置默认 HTTP 端口和 LiveReload 服务器使用的端口：
ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153
【讨论】：
这在最新的 Angular CLI 中有所改变。
文件名改成angular.json，结构也变了。
这是你应该做的：
"projects": {
"project-name": {
...
"architect": {
"serve": {
"options": {
"host": "foo.bar",
"port": 80
}
}
}
...
}
}
【讨论】：
-
使用 @angular/cli 版本 6.1.5 为我工作
-
使用 @angular/cli 版本 7.0.6 为我工作
另一个选项是使用--port 选项运行ng serve 命令，例如
ng serve --port 5050（即端口 5050）
或者，命令：ng serve --port 0，将自动分配一个可用端口以供使用。
【讨论】：
-
--port 0位是很好的信息，但我不确定它是否能回答问题。 -
喜欢 --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
},
【讨论】：
-
您不想覆盖或更改源文件。 angular.json 是覆盖模式默认值的正确方法，如接受的答案中所述。
【讨论】：
-
OP 已经知道如何在 CLI 中指定主机/端口（这是他们的问题）......他们希望控制配置，不必每次都包含这些选项。
-
已经有关于 config.json 的答案。我只建议了另一种方式。我很欣赏你的观点@storsoc
您可以将这些保存在文件中，但您必须将其放入.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，它在 build 1.0.0-beta.30 中
【讨论】：
如果你在 Windows 上，你可以这样做：
- 在你的项目根目录下，创建文件run.bat
- 在此文件中添加您选择的配置命令。例如
ng serve --host 192.168.1.2 --open
- 现在您可以随时点击并打开此文件进行投放。
这不是标准方式，但使用起来很舒服（我觉得）。
【讨论】：
如果您想在运行 ng serve 时专门打开您的本地 IP 地址，您可以执行以下操作：
npm install internal-ip-cli --save-dev
ng serve --open --host $(./node_modules/.bin/internal-ip --ipv4)
【讨论】：
这是我放入 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 的内容。还可以为内容添加其他选项
【讨论】：
您只需要做一件事。在命令提示符中输入： ng serve --port 4021 [或您要分配的任何其他端口，例如：5050、5051 等]。无需更改文件。
【讨论】：
使用/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
【讨论】：