Introduction
Angular has a convenient launcher to serve your app during development (ng serve).
It watches for file changes and automatically reloads saving time.
By default it serves over HTTP but to avoid issues with mixing HTTP
and HTTPS content, you might want to run the local development server
using SSL to serve over HTTPS. This will cover how to use ng serve
and npm run start to include SSL certificates to use HTTPS.
Launch ng serve with SSL
There is a simple flag you can get with ng serve to turn on SSL.
All you have to do is run with -ssl true like this:
ng serve --ssl true
This will generate self-signed certs automatically.
Specify certificate and key
If you don't want to use the auto-generated certificate, you can create
and specify which certificate and key to use with the --ssl-cert and
--ssl-key flags.
I have a couple tutorials on creating certificates:
Here is an openssl command that will generate a self-signed certificate and private key:
openssl req -newkey rsa:2048 -nodes -keyout privkey.pem -x509 -days 36500 -out certificate.pem -subj "/C=US/ST=NRW/L=Earth/O=CompanyName/OU=IT/CN=www.example.com/emailAddress=email@example.com"
Then you can try passing in the privkey.pem and certificate.pem files.
ng serve --ssl --ssl-cert certificate.pem --ssl-key privkey.pem
Update npm script
The default npm start script runs ng serve in the package.json file.
You can change the start command by modifying the scripts section
in the package.json file of your project. For example:
{
// ...
"scripts": {
// ...
"start": "ng serve --ssl true",
// ...
},
// ...
}
Then you can run the start script like normal and it will include SSL:
npm run start
You can set other options with the ng serve command, like specifying
which configuration and environment files to use. For more information on that
check out my tutorial Angular Create Multiple Environment files.
Conclusion
After reading this, you should be able to run your Angular app locally over HTTPS.