By Brian Hines
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
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).
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!
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
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.
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!
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.
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.
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).
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.
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.
Make sure you check out even more of the Angular 7 resources below:
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.