Angular HTTPS localhost

Make your web browser trust the link https://localhost:4200!

1cd testing-angular/
2mkdir ssl
3cd ssl

1# Create rootCA.key (with password)
2openssl genrsa -des3 -out rootCA.key 2048
3# Create rootCA.pem
4# Using previous password & FR & "Random" & "Fake email"
5openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

On Mac, open Keychain Access > File > Import items > choose "rootCA.pem" > Double click on it > set "Always trust" in "When using this certificate" > Type your system password to confirm.

1# Create server.csr.cnf
2[req]
3default_bits = 2048
4prompt = no
5default_md = sha256
6distinguished_name = dn
7
8[dn]
9C=US
10ST=RandomState
11L=RandomCity
12O=RandomOrganization
13OU=RandomOrganizationUnit
14emailAddress=hello@example.com
15CN = localhost

1# Create v3.ext
2authorityKeyIdentifier=keyid,issuer
3basicConstraints=CA:FALSE
4keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
5subjectAltName = @alt_names
6
7[alt_names]
8DNS.1 = localhost

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

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

Open angular.json

1{
2    "projects" : {
3        "architect" : {
4             "serve": {
5                "options": {
6                    "browserTarget": "testing-angular:build",
7                    "ssl": true,
8                    "sslKey": "./ssl/server.key",
9                    "sslCert": "./ssl/server.crt",
10                    "port": 4200
11                }
12            },
13        }
14    }
15}

Restart your browser (sometimes, it's not necessary) and then

1ng serve -o

Go to https://localhost:4200 to verify!