CODEWITHSUNDEEP
angularsslhttpsssl-certificateangular-cli
grim_i_am
grim_i_am

Reputation: 3923

Get angular-cli to ng serve over HTTPS

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.

Upvotes: 170

Views: 296965

Answers (11)

Brad C
Brad C

Reputation: 2982

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.

Upvotes: 3

Oleksandr Poshtaruk
Oleksandr Poshtaruk

Reputation: 2146

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

Upvotes: 32

Mohammadreza Askari
Mohammadreza Askari

Reputation: 583

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

Upvotes: 1

Akitha_MJ
Akitha_MJ

Reputation: 4294

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

Upvotes: 44

RadhaMohan
RadhaMohan

Reputation: 10

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/

Upvotes: -3

Post Impatica
Post Impatica

Reputation: 16383

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

Upvotes: 132

San Jaisy
San Jaisy

Reputation: 17068

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/

Upvotes: 8

Charles Silva
Charles Silva

Reputation: 11

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.

Upvotes: 1

Taul
Taul

Reputation: 2273

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.

Upvotes: 159

Cyril Blanchet
Cyril Blanchet

Reputation: 528

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

Upvotes: 36

Stefan Baramov
Stefan Baramov

Reputation: 49

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.

Upvotes: 4

Related Questions