Software systems to innovate and grow

What’s new in Angular 5?

By Engineering Team July 10, 2018 10 mins read

Wow, Angular team! You guys weren’t kidding when you said you were adopting semantic versioning! Angular 5 was released right at the end of their October 2017 goal, just seven months after the Angular 4 release, and there have already been two minor releases since then. see our post on Angular 4 for a brief review of semantic versioning.

Code-named pentagonal-donut, Angular 5 introduces a number of new features and bugfixes, along with some expected breaking changes. With Angular 6 slated for March 2018, the new major release schedule is moving along at an impressive pace. There’s a ton to discuss, so let’s get cracking!

New Features & Enhancements

“Easier, smaller, faster is the theme for version 5,” according to Brad Green, the Angular Team Director. Easier might be a little tricky to quantify, but based on the number of performance-related changes listed in the official changelog, smaller and faster were clearly driving forces behind 5.0.

One persistent criticism of Angular has been its relatively large bundle size once compiled, and the team decided to focus on improving that for this update, along with a number of other performance enhancements.

With that in mind, let’s take a look at some of the highlights of the new Angular major release.

Size & Speed

Incremental Compilation

For a quick refresher, there are two ways to compile your Angular apps:

  1. JIT (Just-in-time), which compiles in the browser at runtime
  2. AOT (Ahead-of-time), which compiles before it gets to the user

JIT compilation is still the default when running the compiler, but the next version of the Angular CLI (command line interface) will make the AOT the default option, even during development.

The reason, you ask? Incremental compilation with Typescript transforms, my friend.

Transforms were introduced in Typescript 2.3, and as of Angular 5, the compiler functions as a TS transform. This drives compile time way down, from 40 seconds to 2 seconds on Google’s development machines. That’s a 95 percent improvement!

Using the AOT for production was already a best practice, but making it fast enough for development will address the unpleasant experience some developers have had switching their apps from the JIT to the AOT the first time for production.

Eliminating Whitespace

Traditionally, whitespace has been preserved during compilation, but a new setting called preserveWhitespaces gives you the option to remove superfluous whitespace, either at the component level, or across the application in the tsconfig.json file.

Right now, preserveWhitespaces is set to true by default, but the team hopes to change that to false in a future release to save space automatically.

You can check out the docs for preserveWhitespaces here.

Build Optimizer

In 5.0, all production builds have the build optimizer turned on by default. The build optimizer reduces bundle size in two ways:

  1. It removes decorators from your code after compilation, since they are no longer needed.
  2. It identifies parts of your code as pure, making it easier to remove the unnecessary bits.

Just reducing those two by 50 percent or more, makes this a pretty big win for the Angular team in its quest to hone overall performance.

StaticInjector Replaces ReflectiveInjector

This is a relatively small change but will certainly decrease bundle sizes for many developers. ReflectiveInjector uses the Reflect polyfill to extract implicit dependencies, which can eat up memory on the frontend.StaticInjector, on the other hand, has no reflective polyfill, making it far less taxing on memory and much better for performance.

HttpClient Becomes Default

HttpClient made its first appearance in version 4.3, and it has been such a hit that it is now the recommended module for making web requests in Angular. Of course, this means the classic Http module is out and will be deprecated.

To update, you’ll need to:

  • Replace any HttpModule references with HttpClientModule
  • Remove any map(res => res.json()) calls

Angular Universal State Transfer

Angular Universal is a project that gives Angular apps server-side rendering capabilities. Server-side rendering allows your application to be rendered prior to delivery and has two key benefits, namely:

  1. Improvements to the perceived performance of your app
  2. Adds support for web crawlers and scrapers

Two new modules for AU, ServerTransferStateModule and BrowserTransferStateModule, make it much easier to share state between the server and client versions of your application. They eliminate the need for a second HTTP request after your application has been delivered to the browser.

Also new in Angular Universal is the Domino open-source project for server-side DOM manipulation. Domino expands AU’s DOM capabilities significantly, which should make it easier to build with 3rd-party libraries that are not server-side aware.

New Router Lifecycle Events

Some new lifecycle events have been added to the router:

  • GuardsCheckStart
  • ChildActivationStart
  • ActivationStart
  • GuardsCheckEnd
  • ResolveStart
  • ResolveEnd
  • ActivationEnd
  • ChildActivationEnd

These are all designed to track the router from the start of running guards to the completion of activation, triggering all manner of events along the way as needed.

Service Workers

@angular/service-worker is a very cool new core package in 5.0 that allows you to turn your Angular project into a progressive web app without having to roll your own service workers.

In case I lost you at progressive web app, PWAs are web applications that can be saved on a mobile device home screen and can mimic the look and feel of native apps, including offline interactivity and local storage.

AngularFirebase has a very nice introductory walkthrough if you would like to see it in action, but the key takeaway here is this new option makes it significantly easier to convert your existing mobile-optimized web apps to true PWAs.

Breaking Changes

Alright. We’ve talked about all the new awesome things in Angular 5, but somewhere deep down, you knew this was coming. The changelog has the full list, including deprecated code, so we’ll just touch on a few of the main breaks for 5.0.

Compiler Now Requires Typescript 2.4.x

In the grand scheme, this is relatively painless. The Angular compiler now requires Typescript 2.4.x, and upgrading TS with npm is pretty straightforward.

Compiler and Core Split

Now, neither the compiler nor the compiler CLI depend on @angular/core. This causes @angular/platform-server to now additionally require @angular/platform-browser-dynamic as a peer dependency.

So Long, i18n Polyfills

Angular 5 uses new number, date, and currency pipes that have eliminated the need for i18n polyfills and provide better standardization across browsers.

If you aren’t ready for the new pipes, you can import DeprecatedI18NPipesModule to get access to the old behavior, though it’s probably best to embrace this modification, seeing as it’s unlikely they will ever change it back.

Take a look at the changelog for the full list of changes on this one.

Updating to Angular 5

The team at Google has built a pretty sweet tool for updating your current Angular apps to newer versions. If you are updating anything from Angular 2 forward, this app has you covered.

You’ll be asked:

  • Your app’s current version
  • What version you are updating to
  • How complex is your app? (basic, medium, or advanced)
  • Do you use ngUpgrade?
  • Package manager (npm or yarn)

And, that’s it! Just click the submit button, and you’ll be given an interactive checklist of steps to update your app to your chosen version!

If you’re updating from Angular 1.x, I’m afraid the Angular Update Guide will not be much help, but there are a number of awesome guides that should get you there.

Minor Releases – The Highlights

5.1.0

Angular Material & CDK Stable Release
Service Worker support in the CLI
Improved Universal & AppShell Support in the CLI
Improved decorator error messages
TypeScript 2.5 support

5.2.0

Improved type checking for templates
Support for TypeScript 2.4, 2.5, and 2.6
Improved Router Parameters and Data Inheritance

Conclusion

Most of the changes in Angular 5 had a single focus, and that was to improve the performance of Angular apps. Based on all the new features and enhancements, it certainly seems like the Angular team has succeeded, and they don’t appear to be slowing down.

Angular 6 is right around the corner, and with many more changes to come, now’s as good a time as any to take a serious look at 5.0.x. The performance enhancements alone could very well be worth it.

Remember to stay active in the Angular community, keep learning, and as always, console.log('happy coding!');