Get angular-cli to ng serve over HTTPS

Question

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.

Solution 1

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.

Solution 2

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

Solution 3

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

Solution 4

Very simple solution from this page

npm install browser-sync --save-dev

And then

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

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

Solution 5

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

View more solutions

Comments

[Andreas]

try ng serve --ssl 1 --ssl-key "ssl/local.brianflove.com.key" --ssl-cert "ssl/local.brianflove.com.crt"

[Jason Yost]

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

[Stefan Baramov]

The latest version of angular-cli fixes the issue. So to fix the issue all you have to do is upgrade to latest angular-cli

[JustRandom]

"ssl" : "true" will start ssl by default

[Mahi]

@Dominik, where to write "ssl" : "true" . Can you tell me either in ng serve command or in angular-cli.json. Thank you

[Taul]

@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".

[Satish Patro]

You should first explain, then give link. The recommneded way. If link go down. You will only get downvote and people will not get the knowledge

[James Hancock]

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",

[Post Impatica]

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

[Brian Bobek]

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.

[ChinaHelloWorld]

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

[Anh-Thi DINH]

It doesn't work. We have to "accept le risk" and https is always in red!

[Abdullah Tahan]

remove cash if didn't work

[Heike]

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.