- Identify newest package versions by executing
ncu
(to install:npm install npm-check-updates -g
) - Update all
@angular/
package versions inpackage.json
to the newest version (4.4.5) - Update other angular packages to their newest versions
npm install
npm start
, check for issues and correct
TL;DR: when angular is in an inconsistent state, the error message ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'true'.
will be thrown when in development mode. In earlier versions, in some cases it was masked because in earlier versions, the angular router ran a number of additional change detection checks when inserting components. This is not longer the case, hence the errors will always pop up in case of violating the state.
Fix
Either the 'circular dependency' has to be removed or the code segment, that is responsible for the back coupling change has to be wrapped in a promise or a timeout:
// either of the following approaches will work because
// both will trigger another change detection cycle
Promise.resolve(null).then(() => this.open = opened); // approach 1: promise
setTimeout(() => this.open = opened, 0); // approach 2: timeout
Links:
- issue on GitHub: angular/angular#17572 (comment)
- plunker dev mode: https://plnkr.co/edit/fr7rTNTCgEhHcbKnxAWN?p=preview (issue appears)
- plunker prod mode: https://plnkr.co/edit/GGEzdxK1eHzHyGiAdp56?p=preview (issue won't appear due
enableProdMode()
being enabled)
Links
- AOT and Typescript: http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/
- TypeScript 2.4.X issues: angular/angular#17800 (comment)