2018年如何通过HTTPS运行Angular CLI的ng serve命令

我之前也碰到过一模一样的坑！试了好几个教程都没搞定，后来摸索出几个亲测有效的方法，你可以一步步试试：

这是最省心的方式，不用改配置文件，启动服务时直接加--ssl参数：

ng serve --ssl

如果想每次启动默认都用HTTPS，不用重复加参数，就修改项目根目录的angular.json：
找到projects -> [你的项目名称] -> architect -> serve -> options节点，新增"ssl": true配置：

"options": {
  "ssl": true,
  "browserTarget": "your-project-name:build",
  // 其他原有配置保持不变
}

之后直接运行ng serve，服务就会自动以HTTPS启动了。

CLI自动生成的临时证书经常会被浏览器标记为“不安全”，如果需要更规范的证书，可以自己生成自签名证书：

1. 先确保你安装了OpenSSL（Windows可以用Git Bash或者单独安装，macOS/Linux一般自带），然后在项目根目录执行命令生成证书：

openssl req -x509 -sha256 -nodes -newkey rsa:2048 -days 365 -keyout localhost.key -out localhost.crt

跟着提示填写信息就行，大部分选项直接回车跳过，Common Name一定要填localhost。
2. 把生成的localhost.key和localhost.crt放到项目里（比如新建一个ssl文件夹存放），然后修改angular.json的serve配置，指定证书路径：

"options": {
  "ssl": true,
  "sslKey": "./ssl/localhost.key",
  "sslCert": "./ssl/localhost.crt",
  // 其他原有配置
}

3. 重启服务后，浏览器可能还是会警告，你可以把localhost.crt导入浏览器的信任列表（比如Chrome：设置→隐私和安全→安全→管理证书→导入），之后访问就不会有警告了。

如果上面的方法都没效果，大概率是这些小问题：

• 检查package.json里的启动脚本，有没有写死ng serve --ssl=false，或者覆盖了ssl配置；
• 清空Angular CLI的缓存：执行ng cache clean，然后重新启动服务；
• 试试换个HTTPS端口，比如ng serve --ssl --port 4430（默认443端口可能需要管理员权限，用非标准端口更稳妥）；
• 最后确认访问地址是https://localhost:4200（对应你设置的端口），不要手滑输成HTTP！

内容的提问来源于stack exchange，提问作者Smokey Dawson