If you’re a developer on Windows or a.Net developer getting to grips with Angular the steps outlined will create the various certificates and get local Angular 4 running under SSL.
The main steps are as follows and you will need to have installed makecert.exe and openSSL. For us Windows users the easiest way to get OpenSSL is to use one of the binaries installer listed here https://wiki.openssl.org/index.php/Binaries
- Create a Developer Root CA
- Install the Root CA certificate into your local certificate store
- Generate the developer localhost SSL certificates suitable for Angular 4
- Run Angular project using the developer localhost SSL certificate
Create a Developer Root CA Certificate
Create a folder to work in. Then open a command or PowerShell console and navigate to this folder.
You can either use makecert.exe, which I find the simplest, or openSSL to generate a certificate
makecert.exe -r -n "CN=DevRoot" -pe -sv DevRoot.pvk -a MD5 -len 2048 -b 01/21/2010 -e 01/21/2030 -cy authority DevRoot.cer
You will be asked to provide a password to protect the private key and two files will be created. A private key file .PVK and a Microsoft format certificate .CER
If you want to use openSSL then you can follow the instructions here https://gist.github.com/ismyrnow/4e4bf71fa3e4b269bf1b
Install and trust the Root CA Certificate
In order for the browsers to trust the SSL certificate we will make in the next we need to install the Root CA Certificate we have just created into our ‘trusted Root Certificate’ store.
- Right-click on the CER file and select ‘Install Certificate’
- Select User
- Select the Trusted Root Certificate Authorities
- Click Next and Finish
All developers in you team should do this.
Generate the developer localhost SSL certificates
You can do this using makecert.exe or openSSL. You will be using the Root CA private key and certificate you created in step 1.
makecert.exe -iv DevRoot.pvk -ic DevRoot.cer -n "CN=localhost" -pe -sv dev.web.local.pvk -a MD5 -len 2048 -b 01/21/2010 -e 01/21/2020 -sky exchange dev.web.local.cer -eku 18.104.22.168.22.214.171.124.1
You will be prompted to enter the RootCA private key password and also to set a password for the SSL certificate private key. I chose not to set one for the new key as I could not find how to specify this later using the Angular CLI. You will now have a PVK and CER files for the SSL, but Angular CLI needs a PEM and a CRT files. Use the following command to generate the convert both files to compatible formats.
REM Convert CER to CRT
openssl x509 -inform DER -in web.local.cer -out web.local.crt
REM Convert PVK to PEM
openssl rsa -inform pvk -in web.local.pvk -outform pem -out web.local.pem
Run Angular project with Developer SSL Certificates
Copy the PEM and CRT files to the root of your Angular 4 project.
The following Angular 4 CLI command can be used to run the project using the Developer SSL private key and certificate.
ng serve --ssl --ssl-key "web.local.pem" --ssl-cert "web.local.crt"
-o to open your browser too!
Additional useful command if you need a PFX file for anything
You will need to locate a copy of pvk2pfx.exe.
REM Make PFX
pvk2pfx.exe -pvk web.local.pvk -spc web.local.cer -pfx web.local.pfx