3

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.

Rafael
  • 7,605
  • 13
  • 31
  • 46
Dave Eland
  • 81
  • 1
  • 7
  • So I have it working on https with CLI V6.2.2 and the only differences I can see in my command line is I don't have "my-app", I don't have "true" after --SSL and I'm not using --open. I do get a mismatch in the message it gives me back e.g. `** Angular Live Development Server is listening on localhost:4200, open your browser on https://localhost:4200 **` – Dale K Oct 17 '18 at 02:52
  • Do you get anything at all if you try and access https://localhost:4200? – Dale K Oct 17 '18 at 03:02
  • Thanks for responding! When I use localhost:4200 the app operates correctly. However the URL is http://localhost:4200/ If I remove my-app from the command line, using the following: ng serve —-ssl --ssl-cert "./ssl/localhost.crt" --ssl-key "./ssl/localhost.key" the following error is reported: Error: Project '—-ssl' could not be found in workspace. If I use the following: ng serve my-app —-ssl --ssl-cert "./ssl/localhost.crt" --ssl-key "./ssl/localhost.key" The following message appears: open your browser on http://localhost:4200/ – Dave Eland Oct 17 '18 at 04:39
  • Which version of node.js are you using? Here are the versions I am using: $ ng -version Angular CLI: 6.2.5 Node: 9.9.0 OS: darwin x64 Angular: 6.1.10 – Dave Eland Oct 17 '18 at 04:39
  • Note: in my comments the http:// protocol was removed from the localhost:4200 that I wrote. – Dave Eland Oct 17 '18 at 04:46
  • In response to your question, if I try https:// localhost:4200 in the Chrome browser, the following error is reported: This site can’t provide a secure connection -- localhost sent an invalid response. ERR_SSL_PROTOCOL_ERROR – Dave Eland Oct 17 '18 at 04:53
  • How odd, it would appear you're doing everything right. I'm using A-CLI 6.2.2, node.js 8.11.4 on windows. Maybe its an issue on darwin? – Dale K Oct 17 '18 at 04:58
  • 1
    I installed Sierra on another Mac, installed latest version of node and ng, and the following correctly set up an https environment: $ ng serve --ssl true --ssl-cert "./ssl/localhost.crt" --ssl-key "./ssl/localhost.key" Upon returning to my Mac (but making no changes to anything), using @angular/cli version 1.0.0-rc.4, node 7.10.1, and El Capitan, the above command worked correctly. For the previous 10 days, that command did not work. This phenomenon is beyond understanding. I will just move on and hope things continue to work. – Dave Eland Oct 19 '18 at 23:16
  • 1
    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({ – Dave Eland Oct 25 '18 at 17:53

1 Answers1

2

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({
David Klempfner
  • 8,700
  • 20
  • 73
  • 153
Dave Eland
  • 81
  • 1
  • 7