Angular Upgrade from 4.4.5 => 5.2.1

angular-upgrade-5.md

Angular Upgrade from 4.4.5 => 5.2.1

Breaking Changes

• Replace all HttpModule => HttpClientModule
• Replace all Http => HttpClient

Upgrade npm packages

npm install @angular/animations@'^5.2.1' @angular/common@'^5.2.1' @angular/compiler@'^5.2.1' @angular/compiler-cli@'^5.2.1' @angular/core@'^5.2.1' @angular/forms@'^5.2.1' @angular/http@'^5.2.1' @angular/platform-browser@'^5.2.1' @angular/platform-browser-dynamic@'^5.2.1' @angular/platform-server@'^5.2.1' @angular/router@'^5.2.1' typescript@2.4.2 rxjs@'^5.5.2'

npm install typescript@2.6.2 --save-exact

Further resources

• angular class starter template: https://github.com/gdi2290/angular-starter

Changelog Summaries

V 5.0

• [CLI Feature] Build Optimizer := tool for making bundles smaller
  • marks some parts as pure => improves tree shaking
  • removes angular decorator from runtime code
• SSR (server-side rendering) support
  • Domino
  • server & client share state => less server calls neccessary
• Compiler improvements
  • incremental AOT compilation => faster rebuilds
  • introduced preserveWhitespaces attribute for @Component's => if set, avoids whitespaces in compiled code
  • improved decorators support
• internationalized pipes
  • intl polyfill no longer required
  • culture has to be provided if it's not en-US
  • changelog
  • comparison v4 vs v5
• introduced exportAs => multiple export aliases for components
• introduced updateOn hooks for forms
  • avoid updating model on each input change
  • available hooks: updateOn: 'blur' and updateOn: 'submit'
• RxJs upgrade to v5.5
  • nicer imports
  • no more side-effects

V 5.1

• TypeScript 2.5 Support
• Angular Material / CDK v5 release (no more beta!)
• [CLI Feature] Service Worker Support
  • introduced @angular/service-worker which leverages service workers
  • improves performance (allows to make loading experience more like that of a natively installed app)
• [CLI Feature] Improved Angular Universal (SSR) & App Shell Support
• Improved decorator error messages

V 5.2

• TypeScript 2.6 Support
• type checking for templates
  • introduced fullTemplateTypeCheck as an angularCompilerOption (uses TypeScript to validate binding expressions in templates)
  • will be enabled on default in future releases
• improved router param & data inheritance => allows child routes to access their anchestor's parameters and data

Resources

• changelog: https://github.com/angular/angular/blob/master/CHANGELOG.md
• upgrade overview: https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced
• upgrade guide: https://angular-update-guide.firebaseapp.com