Run an Angular App Over HTTPS Locally

The quickest way to serve an Angular project over HTTPS during development is to start the dev server with the SSL option enabled. The rest of this guide covers when you need HTTPS, how to avoid the browser's certificate warning, how to make HTTPS the default, and how to confirm the result if your app uses the camera or microphone.

The short answer

Run the Angular CLI dev server with the ssl flag:

ng serve --ssl

Without a certificate of your own, the CLI generates a self-signed certificate. A self-signed certificate is one that no authority your browser already trusts has vouched for, so the browser shows a security warning the first time you open the page. You can click past the warning for a quick check. For regular work, use a locally trusted certificate as described below so the warning goes away.

Do you need HTTPS for camera and microphone testing?

Browsers only allow camera and microphone access on pages they treat as a secure context. A secure context is a page delivered over HTTPS, or a page loaded from your own machine through the loopback name localhost. Because of that exception, a camera feature often works over plain HTTP when you open the app on the same computer through localhost.

HTTPS becomes necessary when:

• You open the app from a phone, tablet or second computer using your development machine's network address.
• You use a custom local hostname instead of localhost.
• You want local behavior to match production, for example cookies marked Secure or other features restricted to HTTPS.
• You are troubleshooting a problem that only appears once the app is served over HTTPS.

If none of these apply, plain ng serve on localhost may be all you need. Running HTTPS anyway is harmless and keeps your setup closer to the deployed app.

Use a locally trusted certificate

To get rid of the warning, create a certificate signed by a small certificate authority that exists only on your computer. mkcert is a widely used tool for this. The general steps are:

• 1. Install mkcert using your operating system's usual package manager or installer.
• 2. Run its install command once. This creates a local certificate authority and adds it to your system's trust store.
• 3. In your project folder, generate a certificate and key for localhost.
• 4. Point the Angular dev server at those two files.

mkcert -install
mkdir certs
cd certs
mkcert localhost
cd ..
ng serve --ssl --ssl-cert certs/localhost.pem --ssl-key certs/localhost-key.pem

The output file names come from the name you pass to mkcert. If you list extra hostnames, the generated names change, so check the folder and use the file names you actually see. Some browsers keep their own certificate store. If one browser still shows a warning after step 2, restart it. If the warning persists, check whether that browser needs the local authority added separately.

Make HTTPS the default in angular.json

To avoid typing the flags every time, add the same settings to the serve target in angular.json. Replace the project name placeholder with your project's name. Keep any options that are already in the file.

"serve": {
  "options": {
    "ssl": true,
    "sslCert": "certs/localhost.pem",
    "sslKey": "certs/localhost-key.pem"
  }
}

After saving, a plain ng serve starts the server over HTTPS. The serve target's layout differs between Angular versions; in some projects it uses a configurations section. If your file is structured differently, put these keys where the existing serve options live. Run ng serve --help to see the exact option names your CLI version supports.

Testing from a phone or another computer

By default the dev server only accepts connections from your own computer. To reach it from another device on the same network, start the server with the host option so it listens on your network interface. Then open the page on the other device using your computer's network address with the HTTPS scheme and the dev server port.

Two conditions must both hold for the camera to work there. The certificate must cover the name or address the device uses; a certificate made only for localhost does not. mkcert accepts several names in one command, so you can include your machine's network address or hostname. The other device must also trust your local certificate authority. Otherwise it shows the same warning and may block access. mkcert's documentation explains how to install its root certificate on mobile devices. Allow the dev server port through your computer's firewall if the page doesn't load at all.

Verify the result

Check each stage separately. A secure page, granted camera permission, a working video feed and good call quality are four different things. Passing one does not prove the next.

• Connection: the address bar shows HTTPS with no certificate warning.
• Secure context: in the browser's developer console, the isSecureContext check returns true.
• API availability: navigator.mediaDevices is defined. On an insecure page it is usually missing, which is a common cause of errors such as being unable to read getUserMedia of undefined.
• Permission: the browser asks to use the camera or microphone when your app requests it, and you allow it.
• Capture: live video appears in your app's preview, and the microphone shows input activity, such as a moving level meter.
• Quality: lighting, framing, frame rate and clear speech are a separate check, done in a test call or recording.

window.isSecureContext
// true means camera and microphone APIs are allowed on this page

!!navigator.mediaDevices
// true means the media devices API is available

If something goes wrong

• Warning still shown: the certificate isn't trusted on this device or browser, or it doesn't cover the name in the address bar.
• Page won't load over HTTPS: confirm the server actually started with SSL enabled, and that you typed the HTTPS scheme and the correct port.
• Server fails to start: check that the certificate and key paths are correct relative to the project folder.
• Camera blocked with no prompt: an earlier denial may be saved. Reset the site's camera and microphone permission in the browser's site settings, then reload.
• Permission granted but no video: another app may be using the camera, or the operating system's privacy settings may block the browser from accessing it.

Keep the certificate files private

The private key file and your local certificate authority should stay on your machine. Add the certs folder to your project's ignore file so it is never committed or shared. Anyone holding your local authority's key could create certificates your computer would trust. Use this setup only for development, and never use these certificates on a public server.

Limits of this guide

The source material for this article contained no version-specific details. Exact flag names, the angular.json layout and the way the CLI creates its built-in certificate may differ in your Angular release, so check them against your CLI's help output. Browser warning screens and certificate store behavior also vary by browser and operating system.