Using SSL in angular-cli & localhost

This guide explains setting up SSL in an Angular development environment (localhost). The Angular applications in the local server serve the applications over the HTTP protocol. This is ok in most use cases, but there are circumstances where you need to run it over an https protocol. This requires us to install the SSL certificate and set up the ng serve to use that certificate.

SSL Settings in Angular

If you already have the SSL certificate, then you can use the following ng serve command

ng serve -ssl true –sslKey {KEY_PATH} –sslCert {CERT_PATH}

Where
ssl : set it to true to start using HTTPS.
sslCert : path to the SSL certificate to file use
sslKey : path to the SSL key to use for serving HTTPS.

You can also configure these values in angular.json file, so that you do not have to specify them every time.

Open the angular.json file and update the

But if you do not have a SSL Certificate, then you have three options

• Use the self signed Certificate created from Angular CLI
• Create a Self signed Certificate using mkcert, openSSL, etc
• Buy a Valid Certificate from a CA

What is a Self Signed Certificate ?

A self-signed certificate is an SSL certificate that is not issued by a trusted Certificate Authority (CA) but instead is signed by the party that creates it.

Such certificates are not trusted by browsers & computers. When you browse a site that has a self-signed certificate, you will receive your connection is not private warning.

To get rid of the warning, you can do one of the following

1. Advanced -> select Proceed to [website]. But you need to do it very often.
2. Add the certificate to the system’s list of trusted certificates.
3. Create your own Local CA (Certificate Authority) and use that CA to sign our certificates

Using the default SSL Certificate created by ng serve

Angular CLI generates a self-signed SSL Certificate, when we run the application with ng serve --ssl.

You can also set the ssl:true in angular.json as shown below

These certificates are stored in following location

The certificate files are

These certificates have one-month validity. So, you’ll need to regenerate them again after the expiry date. To do that, delete the .angular folder, and run the command ng serve --ssl again. A new self-signed certificate will be generated again.

The certificate created above does not prevent the browser from displaying the “your connection is not private” message. You can easily bypass this error in Chrome by clicking  Advanced -> select Proceed to https://localhost:4200/. But you need to do it very often.

To remove the error permanently, you can add the certificate to the Windows trust store. To do that follow these steps.

Start the Angular application using https. You will see the message “your connection is not private“. Click on the message “Not secured” next to the address bar.

Click on the Certificate details, which will take you to the Certificate Viewer page

Select Details tab and click on Export button and save the Certificate on your hard disk.

Go to the folder where you saved the Certificate file, and right-click on it. Click on the install certificate option.

This will start the Certificate import wizard. Chose either Current user or Local Machine and click on Next

In the next screen, we are asked to choose the certificate store. Click on Browse and select the Trusted Root Certificate Authority.

Windows will warn you about the certificate source. Click ok to continue and the certificate will be successfully imported.

This will remove your connection is not private message until the certificate expires. When it expires, you need to generate new certificate and repeat the process again.

Use a Self-Signed Certificate & Trust It Locally

Another option is to generate a Self-signed certificate locally, trust it, and use it in an angular application. You can make use of utilities like OpenSSL, mkcert, etc for this purpose.

mkcert is easier, faster, and automatically trusted. Hence it is recommended.

Installing mkCert

mkcert is a simple tool that generates locally trusted certificates. You can install it as shown below

Windows (with Chocolatey)

Mac (with Homebrew)

On MacPorts

Linux

Set Up a Local CA

The next step is to create a Local Certificate Authority (CA). We then use the Local CA to generate the certificate. You need to create Local CA only once, and use that to create as many certificates as you need.

mkcert makes it easier to create a Local CA in a single command.

You will see a security warning from the windows. accept it.

Generate a Trusted Self Signed SSL Certificate using mkcert

The next step is to generate a self-signed SSL certificate. To do this, run the following command:

The above command will create two files in the current folder.

• localhost.pem (certificate)
• localhost-key.pem (private key)

Use the Certificate with Angular

or add in in angular.json

And run the application. If all is done correctly, you will receive no warnings and should be able to see Connection is secure message.

Buy a SSL Certificate from a Trusted CA

You can buy a Valid SSL Certificate from a trusted CA.  But note that CA do not issue SSL certificates for the localhost. You can get the certificate for the IP address or a domain name and you can then use those certificates in Angular CLI

Use a Custom Domain with a Trusted CA Certificate

Instead of localhost, you can use a custom domain (e.g., local.yourdomain.com) and request a certificate for that domain.

Add an entry in your system’s hosts file (/etc/hosts on macOS/Linux or C:\Windows\System32\drivers\etc\hosts on Windows)

This makes local.yourdomain.com point to 127.0.0.1 (localhost).

Obtain an SSL certificate for local.yourdomain.com from a CA.

Serve Angular with the Certificate