Angular 7: Upgrading & Summary of New Features

Angular 7 was just released and while it looks a little light on new features, there are some very interesting new tooling changes as well as some great features to improve performance. And continuing the recent trend from previous versions, upgrading is a breeze (and actually faster than ever).

Additions & New Features

The list below is just a short summary of the new features in this release but make sure you find your way down to the further reading section and check out even more this release has to offer!

CLI Prompts

The Angular team has consistently focused on improving the tools available to developers and the new CLI prompts are no different. Usually when you run commands like ng new or ng add, it’s a single pass. Forget to include routing? Ah, tough break. Wanted to skip installs? Well, I guess you can terminate the command.

Not with the new CLI. Now the CLI responds with prompts. Simply try ng new myangular7app and what do you get? A brand new prompt asking if you would like to add routing. Want to try a different stylesheet format? Don’t worry. The CLI will let you select between CSS, SCSS, SASS and more (or actually LESS HA!). And the great news, it’s customizable! Add a schematic.json using the Schematic CLI and you can tell the Angular CLI which prompts to execute! Find out more about schematics in the further reading section.

The Angular Material CDK

ScrollingModule

As many mobile frameworks have started to make the move toward dynamically loading data such as images or long lists, Angular has followed suit by adding the ScrollingModule to allow for virtual scrolling. As elements gain or lose visibility, they are virtually loaded and unloaded from the DOM. Performance is greatly increased to the user’s eyes. Next time you have a potentially large list of items for your users to scroll, stick it in a cdk-virtual-scroll-viewport component and take advantage of the performance boost!

DragDropModule

Now you can remain entirely within the Angular Material module and implement drag and drop support including reordering lists and transferring items between lists. The CDK includes automatic rendering, drag handlers, drop handlers and even the ability to transfer data. Don’t like the standard drag animation? No sweat. It’s Angular; it’s yours to override.

As for Angular Material itself, version 7 comes with some updated component styles to follow with the new Material Design specification.

Application Performance

First things first: Angular 7 is even faster than previous versions. The upgrade is faster (less than 10 minutes for many apps according to the official announcement), the framework is faster, the virtual scrolling CDK module detailed above makes apps run with better performance.

Here is where things get interesting: Angular is not only dedicated to making the framework as small as possible, it’s also dedicated to making your apps as small as possible! They’ve corrected a common production mistake where the reflect-metadata polyfill is included in production. V7 automatically removes it.

New projects are also now defaulted using Budget Bundles which work to notify you when your app is reaching size limits. By default, you get warnings when you reach 2MB and errors at 5MB. And when you need a little more space, just jump in your angular.json and adjust as necessary.

"budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}]

Updated Dependencies

Angular is up to Typescript 3.1, RxJS is up to 6.3 and Node 10 support has been added! Check out the release notes in (link below in further reading).

Ivy Renderer

The next generation ready-when-it’s-ready renderer…still isn’t quite ready. The Angular team won’t commit to a final timeline but the development is still active and progressing. They note backwards compatibility validation is beginning and while no official team member has commented, a few fervent followers of the commits are expecting a complete beta to launch some time during V7’s lifespan with a possible official release alongside version 8. Follow the progress yourself on the GitHub Ivy Renderer issue under the official Angular repo. The best news? They fully expect that Ivy can be released in a minor release as long as it’s fully tested and validated. So who knows? Maybe we’ll see it in v7 after all.

Upgrading

Could this be any easier?

For a large majority of the Angular apps out there, and assuming you’re already running on Angular 6 and RxJS 6, you’re simply going to have to run a single command:

$ ng update @angular/cli @angular/core

And if you’re using Angular Material, just follow with this command:

$ ng update @angular/material

If something seems a bit awry, make sure you visit the Update Guide to see if you need any special commands.

Further Reading

Make sure you check out even more of the Angular 7 resources below:

• Angular 7 official announcement.
• Angular 7 CLI documentation.
• An introduction to Schematics.
• Read more about Virtual Scrolling & Drag and Drop.
• Angular Update Guide.
• Typescript 3.1 version notes.
• RxJS 6.3 CHANGELOG.
• Node 10 support.