If you have been developing any Angular application you will come to a point when you need to serve it on localhost under HTTPS. So how to serve your Angular app on localhost via HTTPS using self signed SSL certificate? Luckily there is an easy solution for this using Angular 6+ CLI and some small changes in your Chrome browser.
So let's start.
Angular CLI have a built in command to serve the app under https, use this command:
ng serve --ssl
After this is executed you will see this in your terminal output:
10% building 3/3 modules 0 activeℹ ｢wds｣: Generating SSL Certificate
...
** Angular Live Development Server is listening on localhost:4200, open your browser on https://localhost:4200/ **
Angular CLI will automatically build self signed SSL certificate and include it in your project! Isn't that great!
But you could face another problem, when you open in https://localhost:4200/ in your browser you could see this:
Your connection is not private...
Looks like Chrome does not like self signed certificates and basically tells you to *uck off. That is not nice. But what if we just tell Chrome "Hey buddy, localhost self signed SSL certificate are just fine. Can you please just use them?". So the way how to say it to Chrome, and enable localhost SSL certificate is by going to chrome settings and turn of auto disabled option to accept "invalid" certificates. Paste this in your browser:
chrome://flags/#allow-insecure-localhost
and change "Allow invalid certificates for resources loaded from localhost." to enabled and restart your browser:
Allow invalid certificates for resources loaded from localhost
And guess what, that is it! You can use your Angular app on localhost over HTTPS!
