How Can I Generate a Localhost SSL Certificate for My Angular 17 Application?

I want to generate a localhost certificate for using SSL in my Angular 17 application. Angular provides SSL by configuring it in the devserver (Vite) with:

{
"ssl": true,
"sslKey": "./path_to_your_key.key",
"sslCert": "./path_to_your_certificate.crt"
}


To generate the localhost key and certificate, I found a solution using mkcert. However, mkcert requires installation on every developer's computer, which is inconvenient, especially for those using Windows. Moreover, I have multiple projects that do not require HTTPS, so I prefer not to use mkcert.

Another solution suggested by ChatGPT involved running the following OpenSSL commands:

openssl genpkey -algorithm RSA -out localhost.key -pkeyopt rsa_keygen_bits:2048
openssl req -new -key localhost.key -out localhost.csr -subj "/C=US/ST=State/L=City/O=Organization/OU=OrgUnit/CN=localhost"
openssl x509 -req -days 365 -in localhost.csr -signkey localhost.key -out localhost.crt


I configured the generated files in my Angular application as follows:

{
"ssl": true,
"sslKey": "./localhost.key",
"sslCert": "./localhost.crt"
}


However, when I opened the browser at https://localhost:4300, I encountered the error: "Your connection is not private."





I also found a gist here suggesting the following commands to create a RootCA:

openssl req -x509 -nodes -new -sha256 -days 1024 -newkey rsa:2048 -keyout RootCA.key -out RootCA.pem -subj "/C=US/CN=Example-Root-CA"
openssl x509 -outform pem -in RootCA.pem -out RootCA.crt


After generating the RootCA files and setting them in Angular, I still encountered the same issue: "Your connection is not private."



I'm not sure what else needs to be done or how to resolve this issue. Any guidance would be appreciated.

Continue reading...