如何在开发环境中更改 Angular 4 的 localhost 名称以进行 ssl 测试？答案

【问题标题】：How to change localhost name for angular 4 in dev env for ssl testing?如何在开发环境中更改 Angular 4 的 localhost 名称以进行 ssl 测试？
【发布时间】：2018-01-05 05:02:56
【问题描述】：

我正在尝试将我的托管环境而不是 localhost/ 更改为类似 www.example.com 的内容。我尝试更改主机文件 (sudo nano /private/etc/hosts) 中的 conf 并执行以下操作并清除我的 DNS 缓存 dscacheutil -flushcache 但没有奏效。我错过了什么吗？

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
127.0.0.1       www.example.com
255.255.255.255 broadcasthost
::1             localhost
10.211.55.4     window10pro
127.0.0.1       AcronisDriveSearchPlugin

注意，我使用代理配置来重定向 url 调用，

{
  "/api": {
     "target": "https://localhost:5001",
     "secure": false
  }
}

我的脚本从package.json开始

"scripts": {
    "ng": "ng",
    "start": "ng serve --ssl --proxy-config proxy.config.json",....

我打电话给npm start 为我的项目服务

【问题讨论】：

这是打电话ng serve的时候吗？如果是这样，它默认只监听localhost。查看stackoverflow.com/questions/37762125/… 了解一些解决方案

标签： angular localhost

【解决方案1】：

刚刚在我的/private/etc/hosts defaults 配置中的angular-cli 中添加了相应的主机名（www.example.com），

 "defaults": {
    "styleExt": "scss",
    "serve": {
      "host": "www.example.com",
      "sslKey": "server.key",
      "sslCert": "server.crt"
    },

并在package.json中修改了我的ng start script，如下所示，

{
  "name": "quickstart-angular5",
  "version": "5.0.5",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --ssl --proxy-config proxy.config.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:free": "ngm build -p src/app/typescripts/free --clean && gulp npmFree && gulp startFree && gulp onlyFree",
    "build:pro": "ngm build -p src/app/typescripts/pro --clean && gulp only-pro && gulp startPro",
    "build:all": "npm run build:free && npm run build:pro",
    "aot:build": "ng build --prod --sm=false --aot=true --output-path=dist",
    "pre-commit": "ng lint"
  },

终于打到npm start

【讨论】：