165

The following doesn't seem to do anything.

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

Creating the Certificate and key by providing them in the default ssl directory still does nothing.

It looks like ng server is completely ignoring the --ssl parameter and keeps saying NG Live Development Server is running on http://localhost:4200.

2

11 Answers 11

157

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.

3
  • 4
    "ssl" : "true" will start ssl by default
    – JustRandom
    Commented May 23, 2018 at 16:31
  • 1
    @Dominik, where to write "ssl" : "true" . Can you tell me either in ng serve command or in angular-cli.json. Thank you
    – Manzer A
    Commented Jul 11, 2018 at 5:56
  • 1
    @Ahmadmnzr It would be another key-value pair inside the serve object. So it would go on the line beneath "sslCert": "<relative path from .angular-cli.json>/server.crt".
    – Taul
    Commented Jul 11, 2018 at 18:46
130

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

5
  • With --ssl on a Mac I also needed to leave the --port flag off and run ng serve as an admin. sudo ng serve --ssl --host localdeveloper.whatever.com. Getting localdeveloper.whatever.com to resolve on a mac (meaning an additional localhost hosts file entry) requires aliasing, a topic for another s.o. question. Commented Jan 5, 2021 at 23:54
  • remove cash if didn't work Commented Feb 16, 2022 at 16:23
  • 1
    The code snippet that needs to be updated is in the angular.json file of your project. Hope this will help a lot of new angular developers.
    – Heike
    Commented Mar 2, 2022 at 15:05
  • 1
    Just an FYI but chrome removed the allow-insecure-localhost flag in version 119 Commented Nov 27, 2023 at 16:44
  • This solution is working perfectly. Make sure you don't forget copy new localhost link starting with https.
    – Aakash
    Commented May 30 at 5:13
40

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

ng serve --ssl

Perfectly working, it will automatically create a certificate for you. Tested on chrome browser. It says "not trusted connection", but just proceed.

Hope this helps

4
  • 5
    Be aware, this cert only lasts one month. When it expires you'll be running around all over the place looking for a fix. I battled this so keep this link Commented Sep 9, 2020 at 14:46
  • 5
    chrome://flags/#allow-insecure-localhost FTW Commented Sep 28, 2022 at 16:51
  • 1
    @RubensFarias Hero Commented Feb 1, 2023 at 18:44
  • @PostImpatica What do you mean that the cert will only last one month? Isn't it updated every time I restart the app? Commented Oct 8, 2023 at 13:36
36

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"
    },
    ...
}
0
31

Very simple solution from this page

npm install browser-sync --save-dev

And then

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

Quick and bold) Just used it in my angular cli 6.2.3 project

3
  • 9
    FYI, this still works great in the angular.json file but the paths have changed: "ssl": true, "sslKey": "/node_modules/browser-sync/certs/server.key", "sslCert": "/node_modules/browser-sync/certs/server.crt", Commented Oct 9, 2019 at 12:43
  • 3
    As for latest angular: 12.0.5, node:v14.17.1, browser-sync: ^2.26.14, command update as following: ng serve --ssl true --ssl-key ./node_modules/browser-sync/certs/server.key --ssl-cert ./node_modules/browser-sync/certs/server.crt Commented Jun 22, 2021 at 16:35
  • 4
    It doesn't work. We have to "accept le risk" and https is always in red! Commented Oct 15, 2021 at 8:07
7

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

enter image description here

# 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.

enter image description here

# 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
[email protected]
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

enter image description here

# 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/

4

You are correct. The current implementation does not take the ssl configuration options under account. I have created a pull request that fixes this issue. However it has not been merged yet in the master at the time of this writing.

2
3

I think I actually stumbled onto a much easier way to generate, trust, and use some fresh certs with angular using office-addin-dev-certs. Don't be fooled by the name, they work for any local development!

  1. Run this command to generate the certs and click "Yes" to trust them when it prompts you:
    • npx office-addin-dev-certs install --days 365
  2. The generated certs (localhost.crt and localhost.key) will be in your home folder ~\.office-addin-dev-certs
    • Copy them to your angular project: cp ~\.office-addin-dev-certs\localhost.* .
  3. Feed the certs to angular:
    • Run ng serve --ssl --ssl-key localhost.key --ssl-cert localhost.crt
    • Or add them to your angular.json so you can run ng serve as normal:
"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "configurations": {
        "development": {
            "browserTarget": "blank16:build:development",
            "ssl": true,
            "sslKey": "localhost.key",
            "sslCert": "localhost.crt"
        }
    },
    "defaultConfiguration": "development"
},

I also posted a PowerShell script to automate the process on my blog.

1

Angular CLI 1.0.0+.

ng serve --ssl 1 --ssl-key {{key-path}} --ssl-cert {{cert-path}}

Angular CLI 6+

ng serve --ssl true --sslKey {{key-path}} --sslCert {{cert-path}}

Change the values ​​in {{*-path}}, to the corresponding values.

1

ref to: https://stackoverflow.com/a/40190595/12537072

if ssl configuration exist on package.json same as below:

"scripts": {
  "ng": "ng",
  "start": "ng serve --ssl --ssl-cert %APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem --ssl-key %APPDATA%\\ASP.NET\\https\\%npm_package_name%.key",
  "start:fa": "ng serve --configuration=fa --ssl --ssl-cert %APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem --ssl-key %APPDATA%\\ASP.NET\\https\\%npm_package_name%.key",
  ...
},

use this: npm run start

to use run with different configuration, after define on package use: npm run start:fa

-3

It always advisable to provide the cert and ports to server team. They configure in server level. This way always good for production code.

The team will configure Cert and DNS mapping with domain.

so it turn in to HTTPS://your app domainname:your choosen port/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.