Running Angular CLI over HTTPS with a Trusted Certificate
Running an Angular application over a secure connection is pretty straight forward. There are plenty of tutorials how you can enable this. However, you can run into some problems.
This blog post covers the basics to run your Angular application over HTTPS and the possible problems it can cause by doing so. At the end a solution is included to solve the most common problems.
Let’s get started!
Enabling SSL
The Angular CLI provides us with three parameters we can pass along with the ng serve command to enable and configure SSL.
// enable or disable SSL
--ssl <boolean: defaults to false>// path to root certificate
--ssl-cert <string: defaults to "ssl/server.crt">// path to private key
--ssl-key <string: defaults to "ssl/server.key">
ANGULAR 6 REQUIRES YOU TO DEFINE THE PARAMS: —-ssl-cert
AND --ssl-key
.
Example #1
ng serve —-ssl true
- SSL is enabled
- Check whether there is a certificate and private key in the default ssl folder
- If nothing is found, the CLI will generate his own certificate and private key
Example #2
ng serve \
--ssl true \
--ssl-cert "/home/john/ssl/example.crt" \
--ssl-key "/home/john/ssl/example.key"
- SSL is enabled
- Check whether there is a certificate and private key in the given path
- If nothing is found, the CLI will generate his own certificate and private key
Problems
- The browser doesn’t trust our certificate, so we get a warning
- Disconnect and restart loop
Certificate is not trusted
This problem is pretty easy to bypass. We can just ignore the warning and continue to visit our application.
If you don’t experience the second problem and you can live with the fact you have an untrusted certificate, you can just stop right here and keep on developing your awesome application.
Disconnect and restart loop
This is a problem that comes and goes. The application can disconnect from the socket that listens to the event that restarts the application when a piece of code has changed. Along with the disconnect, the application restarts several times over and over again.
Several people have/had this problem. There’s an issue reported in Github in the Angular repository.
Issue: https://github.com/angular/angular-cli/issues/5826
Solution
To solve all the problems, the only thing we need is for our browser to trust our certificate. For some reason the Angular CLI doesn’t have any problems when we use a trusted certificate. So this means by using a trusted certificate both problems are solved.
Requirements
OS X
You should be all set. OS X has by default openssl installed.
Windows 10
Install openssl. I recommend using the Git bash. It has openssl preinstalled. Git Bash is bundled with the Git installer.
Step 1: Generate a certificate
Clone the following repository on your local machine and run the generate.sh script in either the terminal or Git Bash. The repository contains all necessary configuration for creating a new trusted certificate.
https://github.com/RubenVermeulen/generate-trusted-ssl-certificate
git clone https://github.com/RubenVermeulen/generate-trusted-ssl-certificate.gitcd generate-trusted-ssl-certificatebash generate.sh
You should now have a server.crt and a server.key file in the repository folder.
Step 2: Install the certificate
We have to make sure the browser trust our certificate, so we’re going to install it on our local machine.
OS X
- Double click on the certificate (server.crt)
- Select your desired keychain (login should suffice)
- Add the certificate
- Open Keychain Access if it isn’t already open
- Select the keychain you chose earlier
- You should see the certificate localhost
- Double click on the certificate
- Expand Trust
- Select the option Always Trust in When using this certificate
- Close the certificate window
The certificate is now installed.
Windows 10
- Double click on the certificate (server.crt)
- Click on the button “Install Certificate …”
- Select whether you want to store it on user level or on machine level
- Click “Next”
- Select “Place all certificates in the following store”
- Click “Browse”
- Select “Trusted Root Certification Authorities”
- Click “Ok”
- Click “Next”
- Click “Finish”
- If you get a prompt, click “Yes”
The certificate is now installed.
Step 3: Configure the application
Now our certificate is ready to be consumed we have to make sure our application uses the correct certificate.
Create a folder ssl in the application folder.
angular-app:
- e2e
- src
- ssl
.angular-cli.json
Copy the private key and root certificate from step 1 into the ssl folder. Make sure the file names are like this:
server.key (private key)
server.crt (root certificate)
Before we run our application, make sure you have restarted your browser and updated the start script in package.json.
"start": "ng serve --ssl true"
ANGULAR 6 REQUIRES YOU TO DEFINE THE PARAMS: —-ssl-cert
AND --ssl-key
.
The only thing we know have to do, is run our application.
npm start
You should now have a fully working application with a trusted certificate.
Feedback is appreciated!
Website: https://rubenvermeulen.be
Twitter: https://twitter.com/rubverm
Github: https://github.com/RubenVermeulen
LinkedIn: https://www.linkedin.com/in/ruben-vermeulen/