Run the angular 2+ application with HTTPS in local machine

 Why HTTPS

        By default if you run the angular 2+ application in your local machine means it will run in the local host only i.e http://localhost:4200. In some cases we need run our local application into https protocol like  https://localhost:4200. I was face this scenario when I developed the PWA application angular 2+. Because you can able to test or run the PWA application with help of HTTPS protocol only. So, that I read some articles and implement successfully in my local machine. In this post I've shared the steps to implement the HTTPS protocol in your local machine.

Steps

1. We have to create the identify information. For this we need to create one folder in that create one text file and name it as certificate.cnf . The below one is the sample file, You can copy the same thing and edit the necessary information according to your purpose.

[req]

default_bits = 2048

prompt = no

default_md = sha256

x509_extensions = v3_req

distinguished_name = dn

[dn]

C = GB

ST = London

L = London

O = My Organisation

OU = My Organisational Unit

emailAddress = email@domain.com

CN = localhost

[v3_req]

subjectAltName = @alt_names

[alt_names]

DNS.1 = localhost

2. We need to generate the certificate using below the command. Here run this command in git bash. If want to install the git means. You can get it from here. Once you get the git bash you can open the create folder in the git bash. Now, We're going to execute the command to generate the certificate. After the generating the command it'll create the two different files. One for certificate and another one for key.

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

4. Then, Open the package.json file in the project and edit the start command to

 

"start": "ng serve --ssl --ssl-key d:\\certificates\\localhost.key  --ssl-cert d:\\certificates\localhost.crt"

Now, Try to run the application in the localhost. It'll run the application in https://localhost:4200. But we may face some Not secure  warning in the URL starting bar. The problem here is our machine not trust our certificate. For resolve this issue we have add the certificate in the system. The below steps will explain about this.

5. For this we have to run the mmc command in the runner. once your run it, It'll open the Microsoft management console. Then click the file and then select  Add/Remove snap in... option or simply press the ctrl+m. Then click the certificate folder. It'll  ask select the type of account please choose the my user account. 

6. It'll open the Trusted root certification section. If you right click you can see the import certificate option. Here you can import generate certificate file and save the changes. Now reload the chrome browser, that error will be remove.

That's it. You're done with SSL configuration with your self.