Angular HTTPS localhost

Last modified 2 months ago / Edit on Github

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

In case you wanna create a simple app testing-angular to test
npm i -g @angular/cli
ng new testing-angular
cd testing-angular/
mkdir ssl
cd ssl
# Create rootCA.key (with password)
openssl genrsa -des3 -out rootCA.key 2048
# Create rootCA.pem
# Using previous password & FR & "Random" & "Fake email"
openssl 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.

# Create 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=[email protected]
CN = localhost
# Create v3.ext
authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost
# Create server.key
openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <( cat server.csr.cnf )
# Create server.crt
openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

Open angular.json,

{
"projects" : {
"architect" : {
"serve": {
"options": {
"browserTarget": "testing-angular:build",
"ssl": true,
"sslKey": "./ssl/server.key",
"sslCert": "./ssl/server.crt",
"port": 4200
}
},
}
}
}

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

ng serve -o

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