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)
