Run angular with ssl

Question

I want to run my angular (7+) project with ssl certificate on localhost ( https://localhost:4200).

I tried the following from this link source - Get angular-cli to ng serve over HTTPS:

1) angular.json

{
 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 "projects": {
   "<PROJECT-NAME>": {
       "architect": {
           "serve: {
               "options": {
                   "sslKey": "<relative path from angular.json>/server.key",
                   "sslCert": "<relative path from angular.json>/server.crt",
                   ...
               }, ...
             }, ...
         }, ...
     }, ...
 }, ...

}

2) browser-sync

ng serve --ssl true --ssl-key /node_modules/browser-sync/lib/server/certs/server.key --ssl-cert /node_modules/browser-sync/lib/server/certs/server.crt

When I am running: ng serve--ssl I am getting this log:

** Angular Live Development Server is listening on localhost:4200, open your browser on https://localhost:4200/ **

In browser

Answer 1

I'm not sure if you are writing code in a Windows dev environment but if you are here are the steps you'll need to run through to make this happen

1. Install Chocolatey (to install OpenSSL for Windows)
2. Install OpenSSL
3. Create OpenSSL Certificate
4. Install Certificate
5. Update npm package.json start script

Rather than copy the steps in detail here, I'll link to a guide I've built on how to do this for Windows dev environments as well as an Angular SSL starter project I've built out

• Configuring Angular 12+ with SSL on Windows Dev Environments
  • https://www.briangetsbinary.com/angular/software%20engineering/2021/09/20/angular-cli-configuring-ssl.html
• ngssl Github starter project
  • https://github.com/BrianMikinski/ngssl