[Fixed] How to run Angular with https when by default it runs with http?

Issue

By default if we run Angular applications they run with http (e.g. on http://localhost:4200).

How to convert it from http to use https?

Solution

Simple fix is instead of running:

ng s -o

Run it with an extra attribute:

ng s -o ---ssl true

It will run on https://localhost:4200. But, if you have a .crt and a .key file, then add that attribute also.

You will see a browser which will start with https, although it will say "not secure" as a warning.

---

This is sufficient if you just wanna run on https and you don’t care about the "not secure" message. If you do care, proceed with further instructions.

ng s -o ---ssl true --ssl-key <path to key file>  --ssl-cert <path to crt file>

or give relative path to .key and .crt file.

If you don’t want to provide these attributes each time, or running for example a full NGINX server for angular, then add these attributes in angular.json or angular-cli.json depending upon angular version:

"serve": 
 {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": 
      {
        "browserTarget": "ideationapp:build",
        "ssl": true,
        "sslKey": "ssl/server.key",
        "sslCert": "ssl/server.crt",
      }
}

sslkey and sslcert are not required if you don’t have .key and .crt file.

Here, I assumed to have both files in a ssl dir where src. Now, runningonly ng s -o is sufficient to use the certificate via the angular.json file.

---

How to create temporary fix for localhost for only your machine or only for one users.

Requirements:

1. Git bash (Download fom here)

Now go to Git bash and type this command one at a time

git clone https://github.com/RubenVermeulen/generate-trusted-ssl-certificate.git(cloned to local computer)
cd generate-trusted-ssl-certificate(Going to application path)
bash generate.sh(starting shell script wher we called openssl)

The cloned application use openssl(software library for applications that secure communications over computer networks against eavesdropping or need to identify the party at the other end) to generate .crt and .key file

It will create server.key and server.crt file.

Now click on server.crt

For OS X

1. Double click on the certificate (server.crt)
2. Select your desired keychain (login should suffice)
3. Add the certificate
4. Open Keychain Access if it isn’t already open
5. Select the keychain you chose earlier
6. You should see the certificate localhost
7. Double click on the certificate
8. Expand Trust
9. Select the option Always Trust in When using this certificate
10. Close the certificate window

Windows 10

1. Double click on the certificate (server.crt)
2. Click on the button “Install Certificate …”
3. Select whether you want to store it on user level or on machine level
4. Click “Next”
5. Select “Place all certificates in the following store”
6. Click “Browse”
7. Select “Trusted Root Certification Authorities”
8. Click “Ok”
9. Click “Next”
10. Click “Finish”
11. If you get a prompt, click “Yes”

The certificate is now installed.

Now store the certificate in a ssl directory.

Now use the command line to provde ssl key and certificate, or add these files to angular.json (or angular-cli.json, depending on your Angular version).

You will not see any "not secure", and it will show "secure" if you click on lock icon adjacent to address bar.

But, if you will run the application in other’s laptop it will show "not secure"
as they have not installed the certificate (trusted).