Infinite Reload-Loop on application startup

[davidbilge]

OS?

Windows 10, Chrome (Version 54.0.2840.71 m)

Versions.

λ ng version
angular-cli: 1.0.0-beta.18
node: 5.7.0
os: win32 x64

Repro steps.

When serving my app with beta.18's new --ssl option, I get an endless reload-loop in Chrome. I.e.: I navigate to https://localhost:4200/, the app loads and initializes completely and then reloads (as if I had hit F5).

Angular CLI's output does change (stays at webpack: bundle is now VALID.). The issue might have been caused by files being touched by another process, triggering a rebuild in angular-cli and thus a reload in the browser. This does not happen.

I can reproduce the problem with the "blank" app as created by ng init, but it does not occur everytime like it does with my (more complex) app:

The problem does not occur in Firefox. I tried this Chrome's incognito mode to avoid plugin-problems, but the problem still occurs.

Also, when I switch away to another tab, the cycle stops. The reload itself still works: when I change a file on the filesystem, angular-cli correctly picks that up, rebuilds, triggers a reload and the browser is not sent into the infinite loop.

It feels like this is a timing issue between the reload-script running in the browser and the application's initialization.

As a sidenote: I tried to disable live-reloading (using --live-reload=false) but that does not seem to work.

The log given by the failure.

No error is logged, neither on the command line nor in the browser's console.

Chrome's devtools' network view looks like this:

[filipesilva]

Heya, I can investigate, but can you give me exact repro steps, i.e. what you used for --ssl, or something I can use myself.

[davidbilge]

Hi, thanks for taking the time to look into this!

I simply used ng serve --ssl.

You can do this in the default app as generated by angular-cli, but that does not always trigger the problem (chances seem to improve if it is opened in a new browser tab or window). Chances also seem to improve if used on a more complex app.

[filipesilva]

Closing in favor of #5826, it has some extra details about the issue cause.

[nasiruddin-saiyed]

same here without ssl on local.

  _                      _                 ____ _     ___
  / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
 / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
/ ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
              |___/
   
Angular CLI: 1.6.0
Node: 9.3.0
OS: linux x64
Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.0
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

[extrablind]

Had the same problem here.
I work with atom. It automatically add an extra carriage return at the end of the file which is deleted by webpack at build, but recreate by atom immediatly, forcing rebuild, and so on...
You can monitor this issue by looking at the created webpack hashs which will be the same one after the other : one for extra carriage return, one for no carriage return.
So closing index.html (or configure your ide) will do the trick; well it does for me.
Good luck !

[Kolezhniuk]

The same problem too. Please help!!!!!
Your global Angular CLI version (1.6.3) is greater than your local
version (1.6.2). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".

Angular CLI: 1.6.2
Node: 6.11.0
OS: win32 x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router
... tsc-wrapped

@angular/cli: 1.6.2
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.28
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.2
@schematics/angular: 0.1.17
typescript: 2.7.2
webpack: 3.10.0

@extrablind What IDE are you using? I'm getting this too.

I run

ng server --host 0.0.0.0 --ssl

with

"@angular/cli": "^1.7.4",
"@angular/compiler-cli": "^5.2.0",
"typescript": "~2.5.3",

[extrablind]

@silentsnooc : working with atom. Double check auto format options from Prettier / beautifier add on... or native atom settings. Regards.