你说得对。当前的实现没有考虑 ssl 配置选项。我已经创建了一个 撤回请求来修复这个问题。然而，在撰写本文时，它还没有被合并到主服务器中。

角 CLI 6 +

我已经更新了我自己的项目，所以我想我现在可以更新这个答案了。

现在，您将把密钥和证书的路径放在 angular.json 文件中，如下所示:

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"projects": {
"<PROJECT-NAME>": {
"architect": {
"serve: {
"options": {
"sslKey": "<relative path from angular.json>/server.key",
"sslCert": "<relative path from angular.json>/server.crt",
...
}, ...
}, ...
}, ...
}, ...
}, ...
}

然后你就可以跑了:

ng serve --ssl

如果您希望默认情况下开启 SSL，那么您应该在 SslKey和 SslCert之下添加一个 “ ssl”: 没错,选项。

您可以在 角度 CLI 文档中找到 angular.json 模式。

角 CLI 1.0.0 + 的老答案。

Angular-CLI 现在可以使用 SSL 选项。正如您注意到的，您可以手动选择您希望使用的密钥和证书与命令:

ng serve --ssl --ssl-key <key-path> --ssl-cert <cert-path>

如果您想为密钥和 cert 设置一个默认路径，那么您可以进入。角斜肌。Json 文件相应地调整 Default 部分:

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"defaults": {
"serve": {
"sslKey": "<relative path from .angular-cli.json>/server.key",
"sslCert": "<relative path from .angular-cli.json>/server.crt",
...
}, ...
}, ...
}

然后你就可以跑了:

ng serve --ssl

如果您希望默认情况下开启 SSL，那么您应该在 SslKey和 SslCert之下添加一个 “ ssl”: 没错,选项。

为了补充这个解决方案，如果您想知道如何为 localhost 生成密钥和证书，这里有一篇关于它的非常好的逐步介绍文章:

Https://medium.freecodecamp.org/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec

JFYI，在 Angular6中你必须把 conf 放在选项中(在 angular.json 中) :

"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app:build",
"ssl": true,
"sslKey": "path to .key",
"sslCert": "path to .crt"
},
...
}

来自 这一页的非常简单的解决方案

npm install browser-sync --save-dev

然后

ng serve --ssl true --ssl-key /node_modules/browser-sync/lib/server/certs/server.key --ssl-cert /node_modules/browser-sync/lib/server/certs/server.crt

又快又大胆) 刚用在我的角立体6.2.3项目中

角 CLI 1.0.0 + 。

Ng 服务于 —— ssl 1 —— ssl-key\{\{ key-path }} —— ssl-cert\{\{ cert-path }}

角 CLI 6 +

Ng 服务于 真的 —— sslKey\{\{ key-path }} —— sslCert\{\{ cert-path }}

将\{\{ *-path }}中的值更改为相应的值。

你可以用

--ssl

或者

"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "someapp:build",
"ssl": true
},

并且会自动为您生成 ssl 证书。

然后，为了让 Chrome 接受本地主机的自签名证书，设置这个标志: chrome://flags/#allow-insecure-localhost

您还需要将该证书导入到您的可信根证书中。要做到这一点，在 Chrome 中点击顶部的 cert 错误，然后:

1. 按 certificate (invalid)
2. 单击 Details选项卡
3. 按 Copy to File...
4. 下一个完成和出口它的地方。
5. 开始-> 运行-> inetcpl.cpl
6. 单击 Content选项卡
7. 按 Certificates
8. 单击 Trusted Root Certication Authorities选项卡
9. 单击 Import按钮
10. 导入证书
11. 重新运行 ng serve --ssl

注意，证书只有一个月有效。在这个月底，你会努力找到一个解决方案，但我已经通过这个和 这就是解决办法

如果您想创建自己的证书并添加到 MAC 中的受信任密钥链

我们将使用 OpenSSL 生成所有的证书。

步骤1: 根 SSL 证书

步骤2: 信任根 SSL 证书

步骤3: 域 SSL 证书

步骤4: 使用新的 SSL 证书

# Step 1: Root SSL certificate


openssl genrsa -des3 -out rootCA.key 2048
openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

# Step 2: Trust the root SSL certificate

在使用新创建的 RootSSL 证书开始发布域证书之前，还有一个步骤。你需要告诉你的 Mac 相信你的根证书，这样它发出的所有单独的证书都是可信的。

在 Mac 上进行钥匙链访问，然后转到系统钥匙链中的“证书”类别。到达目的地后，使用 File > Import Items 导入 rootCA.pem。双击导入的证书并将“ When using this certificate:”下拉菜单更改为“信任”部分中的“始终信任”。

您的证书应该看起来像这样的内部钥匙链访问，如果你已经正确地按照说明，直到现在。

# Step 3: Domain SSL certificate

现在可以使用根 SSL 证书专门为位于 localhost 的本地开发环境颁发证书。

创建一个新的 OpenSSL 配置文件 server.csr.cnf，这样您就可以在创建证书时导入这些设置，而不必在命令行中输入它们。

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn


[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
emailAddress=hello@example.com
CN = localhost

创建一个 v3.ext 文件以创建一个 X509 v3证书。

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names


[alt_names]
DNS.1 = localhost

使用存储在 server.csr.cnf 中的配置设置为 localhost 创建一个证书密钥。

openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <( cat server.csr.cnf )

证书签名请求是通过前面创建的用于为 localhost 创建域证书的根 SSL 证书发出的。输出是一个名为 server.crt 的证书文件。

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

# Step 4 Use your new SSL certificate

现在已经准备好用 HTTPS 保护本地主机。将 server.key 和 server.crt 文件移动到服务器上可访问的位置，并在启动服务器时包含它们。

"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "project-falcon:build",
"ssl": true,
"sslKey": "src/assets/sslcertificate/server.key",
"sslCert": "src/assets/sslcertificate/server.crt"
}
}

清除谷歌浏览器中的缓存并重新启动浏览器，同时删除 Mac 中的缓存和临时文件

现在我们可以使用 ng serve -o

参考文献

Https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/

如果您不想进行配置，只需添加 --ssl

ng serve --ssl

如果工作正常，它将自动为您创建一个证书。在 Chrome 浏览器上测试。它说“不信任连接”，但只是继续。

希望这个能帮上忙

最好向服务器团队提供证书和端口。它们在服务器级别进行配置。这种方法对生产代码总是有好处的。

该小组将使用域配置 Cert 和 DNS 映射。

所以它转到 HTTPS://你的应用域名: 你选择的端口/

刚刚花了几天时间在这个 Angular —— node API over SSL 上，您可以在这个 所以邮局上看到我的解决方案