Get angular-cli to ng serve over HTTPS

Question

The following doesn\'t seem to do anything.

ng serve --ssl true --ssl-key  --ssl-cert 

---

Creating the

Answer 1

If you don't want to go for configurations just add --ssl

ng serve --ssl

perfectly working it will automatically creating a certificate for you tested on chrome browser it says not trusted connection just proceed

hope this helps !!!

Answer 2

IF you want to create your own certificate and add to the trusted keychain in MAC

We’ll be using OpenSSL to generate all of our certificates.

Step 1: Root SSL certificate

Step 2: Trust the root SSL certificate

Step 3: Domain SSL certificate

Step 4: Use your new SSL certificate

# Step 1: Root SSL certificate

    openssl genrsa -des3 -out rootCA.key 2048
    openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

# Step 2: Trust the root SSL certificate

Before you can use the newly created Root SSL certificate to start issuing domain certificates, there’s one more step. You need to to tell your Mac to trust your root certificate so all individual certificates issued by it are also trusted.

Keychain Access on your Mac and go to the Certificates category in your System keychain. Once there, import the rootCA.pem using File > Import Items. Double click the imported certificate and change the “When using this certificate:” dropdown to Always Trust in the Trust section.

Your certificate should look something like this inside Keychain Access if you’ve correctly followed the instructions till now.

# Step 3: Domain SSL certificate

The root SSL certificate can now be used to issue a certificate specifically for your local development environment located at localhost.

Create a new OpenSSL configuration file server.csr.cnf so you can import these settings when creating a certificate instead of entering them on the command line.

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
emailAddress=hello@example.com
CN = localhost

Create a v3.ext file in order to create a X509 v3 certificate. Notice how we’re specifying subjectAltName here.

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

Create a certificate key for localhost using the configuration settings stored in server.csr.cnf. This key is stored in server.key.

openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <( cat server.csr.cnf )

A certificate signing request is issued via the root SSL certificate we created earlier to create a domain certificate for localhost. The output is a certificate file called server.crt.

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

# Step 4 Use your new SSL certificate

You’re now ready to secure your localhost with HTTPS. Move the server.key and server.crt files to an accessible location on your server and include them when starting your server.

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

Clear the cache in Google chrome and restart the browser, also delete the cache and temp files in mac

Now we can use ng serve -o

Reference

https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/

Answer 3

To complement this solution, if you ever wonder how to generate key and certificate for localhost, here is a great step by step article about it:

https://medium.freecodecamp.org/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec

Answer 4

You can use

--ssl

or

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "someapp:build",
            "ssl": true
          },

and an ssl cert will automatically be generated for you.

Then for Chrome to accept a self signed cert for localhost, set this flag: chrome://flags/#allow-insecure-localhost

You'll also need to import the cert into your Trusted Root Certificates. To do this, click the cert error at top in Chrome then:

1. Click certificate (invalid)
2. Click the Details tab
3. Click Copy to File...
4. next next finish and export it somewhere.
5. start-> run-> inetcpl.cpl
6. click Content tab
7. click Certificates
8. click Trusted Root Certication Authorities tab
9. Click Import button
10. Import the cert
11. Re-run ng serve --ssl

Be aware, the cert only lasts one month. At the end of that month you'll struggle to find a solution but I've already been through this and here is the fix

Answer 5

Angular CLI 6+

I've updated my own projects so I figured I can now update this answer too.

You'll now put the path to your key and certificate in your angular.json file as follows:

{
   "$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",
                       ...
                   }, ...
               }, ...
           }, ...
       }, ...
   }, ...
}

And then you can run:

ng serve --ssl

If you want SSL on by default then you should add a "ssl": true, option immediately below the sslKey and sslCert.

You can find the angular.json schema at the Angular CLI documentation.

Old answer for Angular CLI 1.0.0+.

Angular-CLI now works with the SSL options. Like you've noted, you can manually select which key and cert you'd like to use with the command:

ng serve --ssl --ssl-key <key-path> --ssl-cert <cert-path>

If you'd like to set a default path for your key and cert then you can go into your .angular-cli.json file adjust the Defaults section accordingly:

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

And then you can run:

ng serve --ssl

If you want SSL on by default then you should add a "ssl": true, option immediately below the sslKey and sslCert.

Answer 6

JFYI, in Angular6 you have to put the conf in the options (in angular.json) :

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