Google surprised the community with the plans to skip the 3rd version of the world’s most popular JS framework and is instead developing the release of Angular 4 for 2017. The Angular Team Lead at Google, Igor Minar, presented the release schedule adopted for the upcoming versions of Angular at the recent NG-BE 2016 Angular conference in Belgium.

Technically, the changes are breaking, explaining why the major version number has changed. And, if you missed it, there is no Angular 3—the router package was in version 3.x, so instead of bumping everything to 3.0 and the router to 4.0, the team chose to bump everything to 4.0.

Although, the breaking changes are quite limited, you can update almost all of the apps in a few minutes, nothing too major. Like in Typescript:

• TypeScript 2.1+ is now required (it was 1.8+ before), and some interfaces have changed or are deprecated (rarely used in most apps, like OpaqueToken or SimpleChange).
• TypeScript 2.1 and 2.2 have brought really nice features you should check out. Angular 4 now supports them (and you will soon be able to activate the new strictNullChecks TypeScript option for example).

So what does this new Angular version bring? Let’s dive in!

The version 4 of Angular is a change of core libraries that demands a change of SEMVER (Semantic Versioning) change. It is about adding a meaning to the version numbers. There are deprecation phrases in Angular 4 that allow developers to adjust their code.

The Core Angular libraries in Github are versioned in a similar way but they are distributed as different NPM packages. And because of this reason, the team decided to carry on with Angular 4, skipping Angular 3.

Why Angular 4 is going to be big?

The main agenda of Google is to be certain about the compatibility of Angular 4 with Angular 2 and to improve the compiler error messages. It has been previously mentioned about reducing the code generation.

The team of Angular committed for some timely based releases occurring in three different phases:

• Angular patches will be released every week
• There will be minor release of Angular after each major release
• Also, there will be a major release that will be easy to integrate the breaking changes each 6 months.

Angular 4 provides us with the following new features to use:

• Component – The main and the most important one. Angular 4 is about components and modularization. These are the main blocks to create apps with. It contains logic and the view.
• CanDeactivate – The CanDeactivate interface now has an extra (optional) parameter, containing the next state (where you are going to navigate). You can now implement clever logic when your user navigates away from the current component, depending on where they are going.
• DatePipe – DatePipe shouldn’t throw for NaN, and it parses an input string even if it’s not a valid date in the browser
• Service – Injectable class used to share logic between components. Usually (and preferably) it is a layer between the component and the API.
• Forms – A complex solution for handling forms in the app. This time you can choose between two styles: template driven and model driven.
• HTTP – Now platform-server supports @angular/HTTP from @angular/platform-server
• Router – More router security is there especially for lazy loaded module.
• Testing – A whole bunch of tools for both unit and end-to-end testing, ready to handle scenarios with all of the blocks above.

Ahead of Time compilation - View Engine

This is probably the biggest change, even if as a developer you will not see the difference.

As you may know, in AoT mode Angular compiles the templates during the build and produces JS code (by opposition to the Just in Time mode, where this compilation is done at runtime when the app starts).

AoT has several benefits: it errors if one of your templates is incorrect at build time instead of having to wait at runtime, and the app starts faster (as the code generation is already done). You also don’t have to ship the Angular compiler to your users so, in theory, the package size should be smaller. In theory, because the downside is that the generated JS is generally bigger than the uncompiled HTML templates. So, in the vast majority of apps, the package is in fact bigger with AoT.

The team worked quite hard to implement a new View Engine, that produces less code when you use the Ahead of Time compilation. The results are quite impressive on large apps, while still conserving the same performances.

To give you a few numbers, on two medium apps we have, the bundle sizes went:

• from 499Kb to 187Kb (68Kb to 34Kb after gzip)
• from 192Kb to 82Kb (27Kb to 16Kb after gzip)

That’s quite a big difference!

Interesting to note that in the design doc, the Angular team compares the performance (the execution time of course but also the pressure on the memory) with the baseline implementation (best vanilla JS they could write) Angular 2.x and InfernoJS (a really fast React-like implementation).

Smaller & Faster

In this release, Google delivers on their promise to make Angular apps smaller and faster. By no means are they done yet, and you'll see them being focused on making further improvements in the coming months.

View Engine

Google has made changes under the hood to what AOT generated code looks like. These changes reduce the size of the generated code for your components by around 60%  in most cases. The more complex the templates are, the higher the savings.

During the release candidate period, Google noted from many developers that migrating to 4 reduced their production bundles by hundreds of kilobytes.

Read the Design Doc to learn more about what Google did with the View Engine.

Animation Package

Google has pulled animations out of @angular/core and into their own package. This means that if you don’t use animations, this extra code will not end up in your production bundles.

This change also allows you to more easily find documentation and to take better benefit of autocompletion. You can add animations yourself to your main NgModule by importing BrowserAnimationsModule from @angular/platform-browser/animations.