Apr 25, 2023 Author - Sai gowtham

How to use HTTPS in Angular development

angular1min read

In this tutorial, we are going to learn about how to use https instead of http in the angular-CLI project.

By default, the angular app runs on http protocol http://localhost:4200.

Using the Https

Open the angular app in your favorite code editor.
Now, open your angular.json file and add the ssl: true to serve options object.

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "my-p-angular:build",
        "ssl": true      },
      "configurations": {
        "production": {
          "browserTarget": "my-p-angular:build:production"
        }
      }
}

Run the app using ng serve command.

** Angular Live Development Server is listening on localhost:4200,
open your browser on https://localhost:4200/ **

Navigate to https://localhost:4200, you will see a warning message in your browser because of an invalid certificate.

To fix this warning, you need to add a custom ssl certificate inside the angular.json file.

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "my-p-angular:build",
        "ssl": true,
        "sslCert": "path/cert.crt",        "sslKey": "path/cert.key",      },
      "configurations": {
        "production": {
          "browserTarget": "my-p-angular:build:production"
        }
      }
}