facebook
Brian Fernandes
Director of Customer Engagement - Loves technology and almost everything related to computing. Wants to help you write better software. Follow at @brianfernandes.
Posted on Oct 17th 2017

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

Update (November 1st): It’s finally here! After ten release candidates, Angular version 5.0.0, “pentagonal-donut”, has been released.

Update (October 31st): Well, we’re still waiting for Angular version 5, and we’re now at 5.0.0 RC 9 – but, I’m sure you’d all rather have a high quality release, as opposed to a rushed one. Clearly, some key fixes are still being made, and we’re glad the Angular team is taking its time to ensure quality. If this tweet is anything to go by, the release should be real soon!

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 earlier 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

Angular 5 Release

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.
• A change to the Angular CLI, whereby the ahead-of-time (AOT) compiler is now on by default.

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.

With Angular IDE, you don’t need to have any prerequisites installed to get started with Angular development. We’ll download your preferred versions of Node, NPM and the Angular CLI for you – or you can use versions you already have installed. The best part: your projects remain 100% compatible with the Angular CLI, so you can switch between the CLI and IDE as desired.

Update (November 1st): See this post by Stephen Fluin for a detailed run-down on what’s new in this version.

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 this writing, 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

angular-5-angular-labs

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 CodeMix 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!