Debug Angular apps locally with a self signed SSL certificate
How to setup and serve Angular apps over HTTPs locally on Mac and Windows both with localhost and over an IP address with a self signed SSL certificate using openssl
For many reasons like callbacks from auth providers you might want to run your Angular app locally over HTTPS. While in some scenarios setting the ssl flag in the ng serve command might do the trick (which will create a temporary certificate), there are other occasions, like testing PWAs where you end up needing a fully trusted ssl certificate and no browser complaining.
In this case we need to create our own certificate, install it on our machine, trust it and finally tell the Angular CLI to use it.
Create a certificate with openssl
Here is a minimal openssl certificate configuration:
Replace commonName and subjectAltName with your IP or localhost.
Use the following set of commands e.g. in Git Bash to create both the certificate and key file:
This will result in a server.crt certificate and a server.key file.
Install Certificate on Windows
Double click the .crt file and click “Install Certificate”:
Select “Current User” as the Store Location and click “Next”:
Select “Place all cert…”, click “Browse” and choose “Trusted Root Certification Authorities”. Finish the wizard.
Install Certificate on Mac
Double click the .crt file to add it to the keychain:
Right click the certificate and select “Get Info”. Set “Secure Sockets Layer (SSL)” to “Always Trust”. When closing the window you will need to provide your admin password to confirm the change:
Serve Angular with a custom certificate
Finally let’s serve angular over https with our custom certificate with this command:
And we should see valid https connection in the browser both for windows and mac:
That’s all folks! Hope to save you some time researching…
