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.

I also face the same issue. Also see #2816

We need to test on SSL locally

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 webpack/webpack-dev-server#592 may provide some hints as to why this is happening.

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

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

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

#4839 Update to Chrome 59 might help.

@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_modules\webpack-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

@mjharper84
Take a look at this #4839 (comment)
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 #4839 (comment) abergs comment.
Hope this will help

@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

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

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.

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

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!

Uhhhh I did not unassign anyone GitHub lol 😄

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'

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.

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

@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.

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

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

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.

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

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

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

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

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"

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.

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

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.

Hi @ranouf

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

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