Get angular-cli to ng serve over HTTPS

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.

You can use

--ssl

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

Click certificate (invalid)
Click the Details tab
Click Copy to File...
next next finish and export it somewhere.
start-> run-> inetcpl.cpl
click Content tab
click Certificates
click Trusted Root Certication Authorities tab
Click Import button
Import the cert
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

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

Very simple solution from this page

npm install browser-sync --save-dev

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

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