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.

Improve this question
9
  • 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 ** Commented Oct 17, 2018 at 2:52
  • Do you get anything at all if you try and access localhost:4200? Commented Oct 17, 2018 at 3:02
  • Thanks for responding! When I use localhost:4200 the app operates correctly. However the URL is 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 localhost:4200 Commented Oct 17, 2018 at 4:39
  • 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. Commented Oct 19, 2018 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({ Commented Oct 25, 2018 at 17:53

1 Answer 1

Reset to default
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({
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

In .../node_modules/@angular/cli/tasks/server.js, do you mean serve.js (no "r") ? I had serve.js but no server.js.
That if statement would return false for me. I just added serveTaskOptions.ssl = true; without the if statement and it worked.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.