Angular-cli: SSL mode refreshes browser excessively

[mightypenguin]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

v1.0.0

Repro steps.

ng serve --ssl

The log given by the failure.

Browser console shows "[WDS] Disconnect" and then refreshes 5-12 times after recompiling on code change or refreshing the page manually.

Desired functionality.

Not excessively refreshing the browser

Mention any other details that might be useful.

Issue seems to have been triaged already for another project. Known problem with webpack-dev-server. Can we include the same fix?
https://github.com/facebookincubator/create-react-app/issues/574

[mightypenguin]

This issue was made worse by the absence of the @angular/animations module and import of "BrowserAnimationsModule" needed by Material2 (@angular/material). But after fixing that the problem is still there, if less severe.

[aldo-roman]

I also face the same issue. Also see #2816

We need to test on SSL locally

[filipesilva]

I had a look at the linked issues and the proposed fix has already been merged into the webpack-dev-server version we use.

The problem definitely seems related though, and https://github.com/webpack/webpack-dev-server/issues/592 may provide some hints as to why this is happening.

[davidbilge]

Seems like this has been fixed in webpack 1.15.2 (https://github.com/webpack/webpack-dev-server/pull/604). So it might suffice to bump the dependency?

[brbarnett]

Any update on this? We're authenticating with Azure AD on several apps and that requires SSL locally

[veke]

Im also getting this [wds] disconnect error on chrome with self-signed ssl certs.

[veke]

4839 Update to Chrome 59 might help.

[mjharper84]

@veke I'm on Chrome 60 and still have this issue when running SSL. I'm relatively new to node and webpack dev server, I did notice the node_moduleswebpack-dev-server\ssl folder was empty - should I install a cert here? If so is there a guide somewhere?

I tried pointing ng-serve to a certificate that has a SAN (generated via powershell) but chrome/FF seem to ignore it and use one without a SAN.

The refreshing can vary but sometimes it seems infinite and is very difficult to work with!

Many thanks

[veke]

@mjharper84
Take a look at this https://github.com/angular/angular-cli/issues/4839#issuecomment-314608490
You need to create a valid certificate to ssl folder in your ng project root. Then serve your project with ng serve --ssl to start application in https mode. (cli will look cert files from ssl folder by default). You also need to install generated certificate to your OS. In OSX drag n drop .crt file to login keychains (Keychains Access) and modify Trust settings to always trust by double clicking dropped certificate. In Windows see https://github.com/angular/angular-cli/issues/4839#issuecomment-318330303 abergs comment.
Hope this will help

[mjharper84]

@veke Thank you so much for this! your script + installing the certificate in the trusted root cert authority finally persuaded Chrome to fully accept the certificate and get rid of the [wds] refresh loop.

Win

[jschank]

I have been getting this also, with no --ssl.

[TheSamsterZA]

I'm going to chime in here with my experiences specifically on IE11:

I am writing an OfficeJS add-in for Microsoft Word. On Office 2016 for Windows, Word uses IE11 as the browser to my Angular 4.x app. Everything has to be served via SSL, so I created my own self-signed dev certificate using OpenSSL which I pass through to the ng serve command:

ng serve --port 44301 --ssl --ssl-key ssl\development-certificate.key --ssl-cert ssl\development-certificate.crt

This works great - except that I am experiencing the same multi-reload issue described here.

I have installed this certificate and:

Chrome 61.0.3163.100
IE Version 11.608.15063.0, Update Versions 11.0.46 (KB4036586)
Edge

all report the site as trusted.

Firefox 56.0.1 (64-bit) doesn't, complaining about the certificate being self-signed.

Environment Info:

Windows 10 64-bit Version 1703 (OS Build 15063.608)

ng -v
@angular/cli: 1.4.7
node: 7.10.0
os: win32 x64
@angular/animations: 4.4.5
@angular/common: 4.4.5
@angular/compiler: 4.4.5
@angular/core: 4.4.5
@angular/forms: 4.4.5
@angular/http: 4.4.5
@angular/platform-browser: 4.4.5
@angular/platform-browser-dynamic: 4.4.5
@angular/router: 4.4.5
@angular/cli: 1.4.7
@angular/compiler-cli: 4.4.5
@angular/language-service: 4.4.5
typescript: 2.3.4

npm -v
5.4.2

Selected package-lock.json versions:
webpack-dev-middleware: 1.12.0
webpack-dev-server: 2.7.1
sockjs: 0.3.18
sockjs-client: 1.1.4

What I see pretty consistently is:

[WDS] Disconnected!
[WDS] App updated. Reloading...

When I make a change and save, I see:

[WDS] App updated. Recompiling...
[WDS] App updated. Recompiling...
[WDS] App updated. Reloading...

Yes, [WDS] App updated. Recompiling... appears twice every time I make a change and save.

Sometimes, I see this:

SCRIPT5: Access is denied.
htmlfile (8,5)
SCRIPT5007: Unable to get property 'message' of undefined or null reference
htmlfile (10,20)
SCRIPT5007: Unable to get property 'message' of undefined or null reference
htmlfile (10,20)
SCRIPT5007: Unable to get property 'message' of undefined or null reference
htmlfile (10,20)
SCRIPT5007: Unable to get property 'message' of undefined or null reference
htmlfile (10,20)
[WDS] Disconnected!
SCRIPT5007: Unable to get property 'ail0o0w' of undefined or null reference
htmlfile (8,5)
SCRIPT5007: Unable to get property 'message' of undefined or null reference
htmlfile (10,20)
SCRIPT5007: Unable to get property 'message' of undefined or null reference
htmlfile (10,20)
SCRIPT5007: Unable to get property 'message' of undefined or null reference
htmlfile (10,20)
SCRIPT5007: Unable to get property 'message' of undefined or null reference
htmlfile (10,20)
[WDS] App updated. Reloading...

htmlfile points (most recently) to https://localhost:44301/sockjs-node/864/t2ih1f 05/htmlfile?c=_jp.ail0o0w.

After a few loops, everything loads successfully - until I make a change and save. :(

I am not sure if this is just an IE11 thing, because I have to load the app within the context of an Office host, which doesn't allow me to use a different browser.

Maybe this could help pinpoint the issue? @filipesilva please let me know if you need more info.

[jusfeel]

Ubuntu 16.04 Mate Solved it disable tilda from start up.........finally ( systems/preference/personalize)

[TheSamsterZA]

For the record, I am still experiencing this on Angular CLI 1.6.0.

@filipesilva There looks to be a very promising fix for this in WDS v3. Here's the relevant comment on the repo. Just keeping you in the loop here and hoping the Angular CLI will update its dependencies when WDS v3 is released.

Thank you for all of your hard work so far!

[TheSamsterZA]

Uhhhh I did not unassign anyone GitHub lol 😄

[joe45sp]

I am also experiencing this with the latest version of chrome. Here is the command I am running: ng serve -e prod --deploy-url / --ssl 1 --ssl-key 'ssl/local.key' --ssl-cert 'ssl/local.crt'

[clydin]

As @TheSamsterZA mentioned this is an issue with webpack-dev-server and appears to be corrected in the latest alpha release of its v3. Once a stable release is made the CLI should be able to integrate this version.

[dottodot]

Any progress on this. It's impossible to test ssl locally on the ios simulator due to it refreshing constantly.

[TheSamsterZA]

@dottodot What I've done is disable live reload:

ng serve --ssl --ssl-key certificate.key --ssl-cert certificate.crt --live-reload false

The caveat being that I need to manually refresh the browser after the build has succeeded.

I'm not familiar with iOS development, but if you can reload it manually, then that should help ease your frustrations with this.

[dottodot]

Thanks that works, no longer get it constantly reloading on the ios simulator.

[ImranAhmed]

I've got two machines (Win 7 / Win 10) same project: CLI v1.7.1 and Chrome v64. I only see this on the Win 7 machine. I am using the same start command on both machines and the cert is being installed with the green secure Icon on both machines.

ng serve --ssl 1 --ssl-key %certs%localhost.key --ssl-cert %certs%localhost.crt --port 51443 --watch

[ImranAhmed]

Scrap my comment above. I've now started seeing this on the Win 10 machine also. My certs are showing as green in browser and my package versions are as follows.

I am on cli v1.7.1 and latest chrome. I need to run SSL locally so any pointers greatly appreciated.

[ImranAhmed]

@dottodot I really don't want to disable live-reload, is that still the only option?

[dottodot]

Unfortunately that the only method I've found to work so far.

[RubenVermeulen]

I had the same problem as you guys. I've written a blog post about a solution. Hope this can help you guys.
https://medium.com/@rubenvermeulen/running-angular-cli-over-https-with-a-trusted-certificate-4a0d5f92747a

[timelyxyz]

We resolve this issue by setting up a standalone proxy (Nginx) to delegate the SSL.

[PaulvdDool]

I had the refresh issue without ng serve --ssl. The culprit turned out to be the browser-sync dependency. After switching van yarn to npm, something was no longer compatible with browser-sync causing the browser to keep reloading the application.

My fix was to remove the caret in my package.json file.
"browser-sync": "^2.18.8"
"browser-sync": "2.18.8"

[nandu959]

I resolved it by doing this and its working for me.
ng serve --port 8446 --ssl 1 --environment=local --host 127.0.0.1 --open

And instead of using localhost use 127.0.0.1 on your browser, I am assuming the default certificate generated is for 127.0.0.1.

[ranouf]

@TheSamsterZA with that option "--live-reload false" , HMR doesnt work anymore

[ranouf]

I need to be on https to test facebook Api.

I followed these instructions : https://medium.com/@rubenvermeulen/running-angular-cli-over-https-with-a-trusted-certificate-4a0d5f92747a

Strangely even following the instructions, the https://locahost:4200 angular web app is not recognized as safe

I have the same issue, my web loop reboots.

I still didnt find any solution.

[RubenVermeulen]

Hi @ranouf

Thanks for reading my blog post. May I ask what version of Angular you're running?

[ranouf]

Hi again @RubenVermeulen :)

Thanks to remind to answer here too, so for the others, the problem for me was I added coats around the file paths,

The solution was to remove them, like this:
“start”: “ng serve — ssl true — ssl-cert ssl/server.crt — ssl-key ssl/server.key — proxy-config proxy.config.json”,

I also notice that if you put file path which doesnt't there is no error from Angular-Cli. It could be interesting to display somethinr like: Error, the certificate file was not found or is in incorrect format.

For those who want to see the discussion we had on Ruben's page:
https://medium.com/@ranouf/i-found-the-way-to-fix-my-issue-the-correct-command-in-package-json-8aaef2d4a09a

[ItzhakS]

@RubenVermeulen
I read your post.
I implemented the same technique yet I'm still getting the successive reloads.
Angular 5.2
cli 1.7.1

Using this command:
ng serve --ssl true --ssl-key .\cert\localhost.key --ssl-cert .\cert\localhost.crt

Chrome says the certificate is valid.
Strangely it doesn't happen on the home page, only on any child route.

Edit:
@PigBoT In the same boat. Working on my reload reflexes....

[PigBoT]

Live reload is an issue for me as well. I'm setting the angular.json ssl, sslKey, sslCert and host (mapped to matching ssl host in my hostfile) values in the serve > options.
SSL is working great. But the live-reload loop is killing me!

My only workaround at this point is to run with live-reload disabled and refresh manually (Oh, the humanity!!)...
ng serve --live-reload false

Angular CLI: 7.1.4
Node: 8.9.0
OS: win32 x64
Angular: 7.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.11.4
@angular-devkit/build-angular 0.11.4
@angular-devkit/build-optimizer 0.11.4
@angular-devkit/build-webpack 0.11.4
@angular-devkit/core 7.1.4
@angular-devkit/schematics 7.1.4
@angular/cdk 7.3.3
@angular/flex-layout 7.0.0-beta.23
@angular/material 7.3.3
@ngtools/webpack 7.1.4
@schematics/angular 7.1.4
@schematics/update 0.11.4
rxjs 6.3.3
typescript 3.1.6
webpack 4.23.1

[kresdjan]

I'm experiencing this too without SSL.

[timothylombrana]

Same here, and without using SSL:

Angular CLI: 7.2.2
Node: 8.9.4
OS: darwin x64
Angular: 7.2.1
... animations, cdk, common, compiler, core, forms, http
... language-service, material, platform-browser
... platform-browser-dynamic, platform-server, router

Package Version

@angular-devkit/architect 0.13.8
@angular-devkit/build-angular 0.13.8
@angular-devkit/build-optimizer 0.13.8
@angular-devkit/build-webpack 0.13.8
@angular-devkit/core 7.3.8
@angular-devkit/schematics 7.2.2
@angular/cli 7.2.2
@angular/compiler-cli 7.2.9
@angular/flex-layout 7.0.0-beta.23
@ngtools/webpack 7.3.8
@schematics/angular 7.2.2
@schematics/update 0.12.2
rxjs 6.3.3
typescript 3.2.4
webpack 4.29.0

[benjaminrau]

I am subscribing this issue since a year and no soluton is upcoming while many people face it. This is disappointing little bit.

[gvdmiero]

I have the same issue as @PigBoT.
Running with SSL is working. But with live-reload on (which is default) my app keeps refreshing.

I would like to run my app with --ssl AND keep using the live-reload functionality as well...

Are there any updates on this?

[fireflysemantics]

Also running into this issue. I'm creating an App that uses Google Single Sign On with AWS Cognito and as soon as I click "Sign in with Google" the app disconnects with no errors or any other feedback and this is with trusted certificates installed on Ubuntu.

The entire app just breaks. If I go back to the signin page that does not work either. Attaching screenshots of before and after.

I now click sign in and this happens:

If I navigate back to signin it looks like this:

There are no errors showing in either the chrome web development console nor on the terminal after running the command ng serve -o --ssl --live-reload false

[alan-agius4]

I'm sorry, but we can't reproduce the problem following the instructions you provided.
Remember that we have a large number of issues to resolve, and have only a limited amount of time to reproduce your issue.
Short, explicit instructions make it much more likely we'll be able to reproduce the problem so we can fix it.

If the problem persists, please open a new issue following our submission guidelines.

A good way to make a minimal repro is to create a new app via ng new repro-app and add the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}