CODEWITHSUNDEEP
angularhttpslocalhostserve
Dave Eland
Dave Eland

Reputation: 81

Unable to get Angular ng serve command to establish an https context

When we utilize the ng serve command, the following message appears during the compilation process:

** NG Live Development Server is running on http://localhost:4200 ** <==== older version of @angular/cli

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** <==== latest version of @angular/cli

Is it possible to configure the development server on localhost to use the https protocol? In other words the following would work correctly as a URL in the browser:

https://localhost:4200

We have attempted the command shown below, but it still results in using the http protocol:

ng serve my-app —-ssl true --ssl-cert "./ssl/localhost.crt" --ssl-key "./ssl/localhost.key" --open

Notes:

  1. The proper steps were followed to provide the SSL certificate for a Mac El Capitan environment (correct configuration of the SSL certificate has been confirmed by launching a server that has an https URL utilizing node.js and express).

  2. This result was observed in both the @angular/cli versions 1.0.0-rc.4 and 6.2.5

  3. Why have we been unable to configure the localhost development server to operate under https://localhost:4200?

  4. Our motivation for solving this problem is that we are using Facebook for login to our app, and they now require that you make Facebook API calls from an https page. We have the production version of our Angular app running via https. However, when attempting to develop and test code, we are using localhost to run our tests. In order to do this, we need our test environment to be operating in an https context.

Upvotes: 3

Views: 2835

Answers (1)

Dave Eland
Dave Eland

Reputation: 81

I have observed that issuing the following command:

$ ng serve --ssl true --ssl-cert "./ssl/localhost.crt" --ssl-key "./ssl/localhost.key"

will intermittently correctly utilize an https environment.

The following information has enabled resolution of the "intermittent" issue:

Location of code that launches Angular development server: .../node_modules/@angular/cli/tasks/server.js

This code can be modified to fix problem with intermittent https by placing the following line:

if (serveTaskOptions.sslKey === './ssl/localhost.key') serveTaskOptions.ssl = true; // kludge to fix intermittent https problem

prior to the following line:

const serverAddress = url.format({

Upvotes: 2

Related Questions