Skip to content

Instantly share code, notes, and snippets.

@takahser
Last active October 19, 2017 13:25
Show Gist options
  • Save takahser/3f378c49459b532244a90a1e1a13f024 to your computer and use it in GitHub Desktop.
Save takahser/3f378c49459b532244a90a1e1a13f024 to your computer and use it in GitHub Desktop.
angular upgrade

Angular Upgrade from 4.0.0 => 4.4.5

Summary

  1. Identify newest package versions by executing ncu (to install: npm install npm-check-updates -g)
  2. Update all @angular/ package versions in package.json to the newest version (4.4.5)
  3. Update other angular packages to their newest versions
  4. npm install
  5. npm start, check for issues and correct

Known Issues

ExpressionChangedAfterItHasBeenCheckedError

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:

NgRedux implementation changed to abstract

see: https://stackoverflow.com/questions/46813126/unit-test-redux-powered-angular-app?noredirect=1#comment80606957_46813126

Typescript Update

Links

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment