Angular 2 not updating browser after changes

user_3753499 0
Viewed 6777

basically when I change something in my app, the console can detect the changes...

[0] 9:23:22 AM - File change detected. Starting incremental compilation...

[0] 9:23:23 AM - Compilation complete. Watching for file changes.

[1] [BS] File changed: app/components/logo/logo.component.js

[1] [BS] File changed: app/components/navBar/navbar.component.js

[1] [BS] File changed: app/components/sideBar/sidebar.component.js

...

But it's no longer updating my web browser automatically (screen going white with the "Loading..." message :( I've no idea why.

Here is my package.json

{
  "name": "room",
  "version": "1.0.0",
  "scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\"  ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install",
"build-master-sass": "node-sass -w style.scss style.css",
"build-children-sass": "node-sass -w -r app/css -o app/css",
"lint" : "tslint app/**/*.ts"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.7",
"systemjs": "0.19.22",
"es6-promise": "^3.1.2",
"es6-shim": "^0.33.4",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15",
"ng2-bootstrap": "1.0.5",
"bootstrap-material-design-icons" : "2.2.0"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.8.2",
"typings": "^0.6.8"
}
}

Any suggestions ?

angular
2 Answers

I know that the question is over one year old but this bug persists. Actually, there is an open issue in Github.

In some situations, live reload fails to do its job, resulting in:

  1. changes in the code doesn't trigger a new compilation
  2. changes trigger a new compilation but the browser serves a stale version

In the first case, the different causes seem to be:

  • a buggy version of Angular-cli (solution: switch to a different version)
  • spaces or some symbols (e.g. parentheses) in the file path (solution: avoid spaces and symbols)
  • file system cache issue (solution: use "sync" after save operation)
  • too many watchers (solution: increase inotify max_user_watches)
  • the time period between polling for file changes (solution: set a custom one with the --poll flag)

For those of you who like me experience the second problem (there is compilation but not browser update) there is not a real fix. Some people reported that disabling "safe write" (in editors without atomic saving, like VS Code, it doesn't apply) helped them but it was not my case. The good news is that it seems to happen mostly when updating interfaces definitions and only after very small changes (1-2 lines of code).

The best workaround I could find is to force a larger change (i.e. cut out all the content of the file, save, paste and save again). In most editors this can be quickly achieved using Ctrl + (A, X, S, V, S).

As last resort, in all cases, restart "ng serve" after the changes fix the problem.

user_52472000
Related