Angular 7 upgrade | What will you miss if you ignore?

avatar

by

on

Angular 6, released earlier in May 2018 didn’t offer much improvements on the performance part. It was mainly focused on making Angular migration-friendly. Google dropped Angular 7 just after four months of development and it seems to make up for that part of the framework.

The upgrade was released on October 18 followed by an incremental update 7.1 on November 28.

Angular 7 version upgrade is not a feature-intense update, instead it focuses on the core framework. As a result you get better performing applications with small packages and faster response.

The long-due Ivy compiler is still under works but other things were delivered as promised.

CLI prompts

Angular CLI can prompt users to help them make decisions. ng new prompts users of routes and styles to use, while ng add @angular/material asks users what theme they want and if they want gestures or animations.

Performance

Application performance has been improved by automatically adding or removing the reflect metadata polyfill, making applications smaller in production.

Angular Material and CDK (Component Dev Kit)

Angular 7 features virtual scrolling, for dynamically loading and unloading items from DOM according to the visible parts of the lists. Also, applications can be fitted with a drag-and-drop capability. Angular Elements components now support content projection via slots.

Why Angular 7?

Why not when it offers brilliant perks like these.

  • Comes with better mobile and desktop application support.
  • Application packages are smaller and efficient.
  • CLI prompts help you make decisions and code faster.
  • Angular 7 now features budget bundle. It warns when application exceeds the default size
  • Fast rendering of large lists with virtual scrolling
  • Upgrade takes less than 10 minutes for most of the apps.

Things that were further improved with the latest incremental update Angular 7.1

  • A bug fix to the Ivy compiler so it now can generate inputs and aliases properly. The compiler had been generating an outdated input property format.
  • Also in the compiler, a bug fix generates a relative path only in summary file errors.
  • Previously, errors in the summary file included absolute file names.
  • The compiler now can mark an InvokeFunctionExpr as pure.
  • For the core of the framework, a static dependency to @angular/compiler has been removed from @angular/core.
  • A regression in the router has been fixed in which the navigateByUrl promise did not resolve on CanLoad failure.
  • For service workers, typing has been added to the public API guard and lint errors have been fixed.

Planning an Angular 7 upgrade? Mind these prerequisites.

For apps that are running on Angular 6 & RxJS 6 use this command:

$ ng update @angular/cli @angular/core

And for the apps running Angular Material

$ ng update @angular/material

Upgrading Angular is a hassle-free process but more often than not version upgrades can mess your app’s current state. Upgrade failures are universal for every software so it is highly advised that you perform the upgrade with the help of an Angular expert. Speaking of which, you can get in touch with us.