Angular 5 Release Imminent!

Front-end developers, rejoice – after a short delay, the Angular 5 release is scheduled for October 23rd!

Update (October 27th): Unfortunately, Angular 5 hasn’t been released yet – the latest release in this stream is 5.0.0 RC 7, which was released today. However, we’re sure the release is right around the corner … watch this space for updates.

Several beta releases have been available since August, and this version is now at the release candidate stage. Being the first major release since version 4 in March (yes, there never was an “Angular 3” – see here to find out what happened), what key Angular 5 features can you expect to find? Read on to find out …

Top Angular 5 Features

If you make your way through the entries against version 5.0.0 in changelog, performance seems to be a key theme – this release includes:

• Several changes that result in reduced bundle sizes.

• Dozens of fixes to the compiler which increase the speed of both initial and incremental compilation.

There are other important performance fixes, like this one, which could make the registration of event listeners about 3x faster, and more versatile i18n (Internationalization). There have also been several improvements to the upgrade module, which allows you to incrementally upgrade your AngularJS apps to more recent versions of Angular. For those unaware, with this module, you can run both frameworks side by side, in the same application, during your upgrade process.

Another take on this release can be found in this article at Infoworld, by Paul Krill:

Angular 5 features include:
• An emphasis on making it easier to build progressive web apps, so apps can be cached in the browser.
• A build optimizer that makes the application smaller by eliminating unnecessary code.
• Making Material Design components compatible with server-side rendering.

Build Improvements

In the latest versions of the Angular CLI, a combination of the on-by-default AOT compiler, and integration with the latest version of Webpack (which itself has performance improvements), typically results in highly optimized builds that take less time to deploy. Thanks to a decreased JavaScript payload, Angular applications take significantly less time to bootstrap, and are fully interactive much sooner – sometimes in as little as half the time! See this article for an analysis of sites built with AOT, and this on writing AOT friendly applications.

A caveat though is that build time could increase, and at the time of writing this post, the AOT guide suggests that you use JIT during development and AOT in production. Also, for very large websites, you should ensure that lazy loading is enabled alongside AOT, to avoid longer load times.

Better Mobile Experience

Progressive Web Apps are all about delivering user experiences for mobile devices that are reliable, fast, and engaging. The @angular/service-worker package in Angular 5 plays a key role in making this possible. On a related note, while not new in this version, if you haven’t already looked into server-side rendering, this is a good time to look up Angular Universal.

Breaking Changes

Yes – there are quite a few. Dozens of elements, deprecated since version 4, have been removed. i18n pipes (date, number, currency, percent) were changed too, with some breaking changes within. Head back to the changelog and search for “breaking changes” within each 5.0.0 release entry, to see how your application could be affected.

What’s Coming

Well, Angular 6, obviously! Okay, okay, you have to wait until March or April next year. In the meantime, there are plenty of exciting goings-on in the Angularverse, like the recently announced Angular Labs concept.

In Stephen Fluin’s words, “The goal of Angular Labs is to more clearly communicate the balance between new explorations by the team, with the normal stability that our community has come to expect since the release of Angular in September of 2016.” Ideas under Angular Labs include Schematics, the Component Dev Kit, ABC (Angular + Bazel + Closure) and a brand new project – Angular Elements. For more details, head on over to this article. Check the Angular Mix YouTube channel for more videos on these topics, and Angular in general.

Angular IDE will support development with Angular 5 in a couple of weeks. Of course, we provide the same level of Angular support in Webclipse and MyEclipse too. If you’re raring to go, create a new Angular project, change the Angular dependencies in your package.json to version 5, and get cracking right away!