Configuring HTTPS Development Server in Angular CLI: From Basics to Practice

Introduction

In modern web development, using HTTPS for local development has become a standard practice, especially when handling sensitive data or simulating production environments. Angular CLI, as a popular front-end development tool, offers flexible HTTPS configuration options. However, many developers may encounter issues where configurations do not take effect initially, such as when running the command ng serve --ssl true --ssl-key <key-path> --ssl-cert <cert-path> and the server still operates over HTTP. Based on community best practices, this article systematically explains the methods for configuring HTTPS in Angular CLI to help developers get started quickly.

HTTPS Configuration in Angular CLI 6+

Starting from Angular CLI 6, the primary method for configuring HTTPS is by modifying the angular.json file in the project root directory. This file defines build and server options for the project. Here are the detailed steps:

First, in the angular.json file, locate the configuration for the specific project under the projects section. Add the sslKey and sslCert fields in architect.serve.options, specifying the relative paths to the SSL key and certificate files (relative to the angular.json file). For example:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "<PROJECT-NAME>": {
      "architect": {
        "serve": {
          "options": {
            "sslKey": "ssl/server.key",
            "sslCert": "ssl/server.crt",
            ...
          },
          ...
        },
        ...
      },
      ...
    },
    ...
  },
  ...
}

After configuration, run the command ng serve --ssl to start the HTTPS development server. If you want SSL enabled by default, add "ssl": true in the options; this ensures the server uses HTTPS even without the --ssl flag.

Configuration Methods in Older Angular CLI Versions

For Angular CLI versions 1.0.0 and above but below 6.0, the configuration approach differs slightly. Use the .angular-cli.json file (note the dot in the filename) and set the sslKey and sslCert paths in the defaults.serve section:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "defaults": {
    "serve": {
      "sslKey": "ssl/server.key",
      "sslCert": "ssl/server.crt",
      ...
    },
    ...
  },
  ...
}

Similarly, run ng serve --ssl to apply the changes. This variation stems from the evolution of Angular CLI's architecture, with newer versions adopting a more modular configuration system.

Simplified Approach with Auto-Generated Certificates

If developers prefer not to manage certificates manually, Angular CLI supports auto-generating self-signed certificates. Simply set "ssl": true in serve.options of angular.json without specifying sslKey and sslCert:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "app:build",
    "ssl": true
  },
  ...
}

When running ng serve --ssl, the CLI automatically creates certificates, but browsers may display "not secure" warnings. This method is suitable for quick testing, but trusted certificates are recommended for production environments.

Handling Browser Trust Issues

Self-signed certificates are typically not trusted by browsers by default. In Chrome, you can temporarily allow insecure local connections by visiting chrome://flags/#allow-insecure-localhost and enabling the flag. For a more permanent solution, import the certificate into the system's trusted root certification authorities:

1. Click the certificate error in the browser and select "certificate (invalid)".
2. Go to the "Details" tab and click "Copy to File" to export the certificate.
3. Import the certificate into "Trusted Root Certification Authorities" using the system certificate manager (e.g., inetcpl.cpl in Windows).
4. Restart the browser and development server.

Note that auto-generated certificates often have short validity periods (e.g., one month), requiring regeneration or manual updates upon expiration.

Alternative Solutions and Tool Integration

Beyond native support, developers can use third-party tools like browser-sync to simplify HTTPS configuration. After installation, use its built-in certificates directly:

ng serve --ssl true --ssl-key ./node_modules/browser-sync/certs/server.key --ssl-cert ./node_modules/browser-sync/certs/server.crt

This approach avoids manual certificate management but adds dependencies, making it suitable for specific workflows.

Summary and Best Practices

Configuring HTTPS for Angular development servers involves version adaptation, certificate management, and browser compatibility. Key points include: using angular.json (newer versions) or .angular-cli.json (older versions) to set paths; prioritizing auto-generated certificates for simplicity; and balancing security and convenience when handling browser trust issues. It is advisable to standardize configurations within teams and regularly check certificate expiration dates. By following the steps in this article, developers should be able to efficiently set up secure local development environments.