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:2048openssl 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.