Enable SSL in Your Angular App to resolve most of native OS issues (IOS/Android)

Today we are talking about an issue which is more painful to developers when we are doing the deployments to outside of localhost(To your local ip address with a port) in Angular.

If you are targeting IOS/Android operating system to launch you angular app, this will probably a good tip.

Enable SSL in your angular app by using a certificate. Create below file and keep inside your folder path and name it as certificate.cnf.

[req]

default_bits = 2048

prompt = no

default_md = sha256

x509_extensions = v3_req

distinguished_name = dn

[dn]

C = BE

ST = digem

L = brussels

O = EY

OU = PAS

emailAddress = lahiru.dhananjaya@randomsoftware.net

CN = <serving address>

[v3_req]

subjectAltName = @alt_names

[alt_names]

DNS.1 = <serving address>

Then you have to run this command to create the certificate in your terminal.

openssl req -new -x509 -newkey rsa:2048 -sha256 -nodes -keyout localhost-remote.key -days 3560 -out localhost-remote.crt -config certificate.cnf

You can try below command in the terminal inside your angular project path

ng serve --host 192.168.x.x  --port 4200 --ssl --ssl-key <key-path> --ssl-cert <cert-path>

or you can add this to .angular-cli.json

{

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

            ...

        }, ...

    }, ...

}

After following the steps , you will get the change to smoothly use https over your ip and do debugging easily.This will enable most native features which Chrome/Safari has (Such as settings for the page camera etc)