Angular CLI 6 +

Question

以下似乎没有做任何事情。

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

通过在默认的ssl目录中提供证书和密钥仍然无效。看起来ng server完全忽略--ssl参数，并一直说NG Live Development Server is running on http://localhost:4200.

Answer 1

Angular 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”：true，选项。

您可以在Angular CLI documentation找到angular.json架构。

Angular CLI 1.0.0 +的旧答案。

Angular-CLI现在可以使用SSL选项。如您所知，您可以使用以下命令手动选择要使用的密钥和证书：

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

如果您想为密钥和证书设置默认路径，那么您可以进入.angular-cli.json文件，相应地调整默认值部分：

{
    "$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”：true，选项。

Answer 2

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"
    },
    ...
}

Answer 3

为了补充这个解决方案，如果你想知道如何为localhost生成密钥和证书，这里有一篇很好的分步文章：

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

Answer 4

您可以使用

--ssl

或

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

，系统会自动为您生成一个ssl证书。

然后让Chrome接受本地主机see this SO的自签名证书

Answer 5

来自this page

的非常简单的解决方案

npm安装浏览器同步--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

快速大胆）刚刚在我的angular cli 6.2.3项目中使用了它

Answer 6

你是对的。当前实现不考虑帐户下的ssl配置选项。我创建了pull request来解决此问题。但是，在撰写本文时，它尚未在大师中合并。

Answer 7

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

ng serve --ssl

完美运行将自动为您在chrome浏览器上测试过的证书创建一个证书，表明无法进行信任连接

希望这会有所帮助！

Answer 8

Angular CLI 1.0.0 +。

ng服务-ssl 1 -ssl-key {{key-path}} -ssl-cert {{cert -path}}

Angular CLI 6 +

ng服务-ssl true -sslKey {{key-path}} -sslCert {{cert-path}}

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

Answer 9

如果您要创建自己的证书并添加到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

在可以使用新创建的Root SSL证书开始颁发域证书之前，还有一个步骤。您需要告诉Mac信任您的根证书，这样它颁发的所有单个证书也将受到信任。

在Mac上使用钥匙串访问，然后转到系统钥匙串中的“证书”类别。在那里，使用文件>导入项目导入rootCA.pem。双击导入的证书，然后在“信任”部分中将“使用此证书时：”下拉列表更改为“始终信任”。

如果您到目前为止正确地遵循了说明，那么您的证书在“钥匙串访问”中应该看起来像这样。

# Step 3: Domain SSL certificate

现在可以使用根SSL证书来颁发证书，专门用于位于本地主机的本地开发环境。

创建一个新的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证书。请注意，我们如何在此处指定subjectAltName。

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

[alt_names]
DNS.1 = localhost

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

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

通过我们先前创建的根SSL证书发出证书签名请求，以为localhost创建域证书。输出是一个名为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"
          }
        }

清除Google chrome中的缓存并重新启动浏览器，还删除mac中的缓存和临时文件

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

参考

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

Answer 10

始终建议向服务器团队提供证书和端口。他们在服务器级别配置。这种方式对于生产代码总是有好处的。

团队将使用域配置证书和 DNS 映射。

所以它变成了 HTTPS://你的应用域名：你选择的端口/

Answer 11

刚刚在这个 Angular -- node API over SSL 上花了几天时间，你可以在这个 SO post 看到我的解决方案

通过HTTPS获取angular-cli到ng服务

11 个答案:

Angular CLI 6 +

Angular CLI 1.0.0 +的旧答案。