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=[email protected]
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!