Angular app on HTTPS in localhost

While developing the angular application, we came to a point where we need to host our application on HTTPS like from 'http://localhost:4200' to 'https://localhost:4200'.

I will be sharing my knowledge on how to configure the angular app with HTTPS.

I have used OpenSSL to generate a certificate, thanks to the Git Bash, where I can easily create a self-signed certificate. I already have an angular app developed which is running on the "http://localhost:4200".

Please follow the below command to create a hello-world project :

ng new https-self-signed-app        

In the first step, we will create a self-signed certificate with the help of OpenSSL. There are other open-source projects which offer OpenSSL, but I will be using Git Bash for the same.

Create a certificate configuration file inside a folder such as "C:\SSL", which will contain all the information to create the certificate.

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


[dn]
C = BE
ST = digem
L = brussels
O = EY
OU = PAS
emailAddress = mailer@domain.com
CN = localhost


[v3_req]
subjectAltName = @alt_names


[alt_names]
DNS.1 = localhost        

Save the above file as certificate.cnf.

Open the git bash terminal, go to the create folder "C:\SSL" which contains the certificate.cnf, execute the below command to generate a certificate and the private key.

openssl req -new -x509 -newkey rsa:2048 -sha256 -nodes -keyout localhost.key -days 3560 -out localhost.crt -config certificate.cnf        

The above command will create a key and crt file which will be required to configure the HTTPS. Go to the folder we can see both the files,

Click on the localhost.crt file and select " Install Certificate", choose "Current User" in Store Location. Click Next

select current user.

Saving the certificate to the store,

We move the certificate and key file inside the angular app in a folder named : "SSL"

https-self-signed-app
 - node_modules
 - src
 - ssl        

Now, we configure the certificate in the angular app, we can do it in two ways, One we can pass the certificate and the key in the ng serve as an argument. we can run the below command

ng serve --ssl --ssl-key ssl/localhost.key --ssl-cert ssl/localhost.crt
        

configure "https" in the environment.ts frontend url.

In a second way, we configure inside the "angular.json"

and then run the command

ng serve --ssl        

Finally, if we run the URL with "https://localhost:4200", it will run successfully with the valid certificate.