使用 Angular CLI v6.0 可以更改本地服务器的端口号

3 年 ago
清, 扬
1 minute

首先

在开发多个Angular项目时，有一种情况是希望通过更改端口号来启动多个本地服务器，因此我开始寻找配置方法。

目标环境

我已在以下环境中进行了操作确认。

Angular CLI: 6.0.8
Node: 8.11.2
OS: darwin x64
Angular: 6.0.5

选项一: 修改配置文件

关于Angular CLI的配置文件，在v6.0之前是以.angular-cli.json命名的，但在v6.0版本之后改为angular.json。
通过在angular.json文件中添加以下配置，可以更改本地服务器的端口号。

"projects": {
    "ng": {
        "architect": {
            "serve": {
                "options": {
                    "browserTarget": "ng:build",
                    "port": 4300
                }
            }
        }
    }
}

第二种方法：通过启动选项进行指定。

您可以指定端口号作为本地服务器的启动选项。

ng serve --port 4300

如果使用npm-scripts（如npm start）启动本地服务器，请按照以下方式更改package.json。

"scripts": {
    "ng": "ng",
    "start": "ng serve --port 4300",
}

最後， 最终， 最终归宿， 最终结果， 最后结局， 结语中.

如果在本地服务器启动时显示如下，则表示OK。

** Angular Live Development Server is listening on localhost:4300, open your browser on http://localhost:4300/ **

文献参考

如何将Angular的端口从4200更改为其他端口
Angular 6 – 如何更改默认端口4200

bannerAds