New and Improved Angular is Finally Here: Angular 4

As per the announcement by Google, Angular team finally released Angular 4 with an “invisible makeover”. This is Angular team’s first major release since they switched to Semantic Versioning and the good news is that it is backwards compatible with Angular 2. This means the new version has a very gentle learning curve. Our team of Angular specialists is very excited as they can get started with it straightaway! Back in September when the much awaited Angular 2 had arrived, it was a total breaking change with new patterns and new APIs as the framework was a complete rewrite.

Related: Angular 2.0 is Finally Ready to be Tamed!

What’s Different in Angular 4?

After working hard for past 3 months, the Angular team has included some major improvements and functionalities. At the same time they have tried their best to make it easier for developers to update to this release.

Enables you to cut down on fat

The new release would allow significant reduction in your production bundles by allowing you to generate less code. The team is still working on it to reflect further improvements in the months to come. Now on you can keep your apps smaller and faster! Here are some changes to facilitate this:

New View Engine

Changes have been introduced under the hood to reduce the code generated by AOT compiler. As a result almost there is almost 60 percent reduction in the size of generated code. If your templates are more complex then the savings would be more. To learn more about View Engine, read the Design Doc.

Animation Package

As animations have their own package @angular/platform-browser/animations now, there won’t be any extra code in your production bundles if you are not using animations in your app. Consequently, you can easily find document and also leverage autocompletion. You can also import BrowserAnimationsModule and add animations to your main NgModule.

Let’s explore the new features!

Improved *ngIf and *ngFor

The new template binding syntax now allows you to use an if/else style syntax, and assign local variables such as when unrolling an observable.

<div *ngIf="userList | async as users; else loading">

<user-profile *ngFor="let user of users; count as count" [user]="user">

</user-profile>

<div>{{count}} total users</div>

</div>

<ng-template #loading>Loading...</ng-template>

Angular Universal

Universal, is now an official Angular project! Originally it was a community-driven project that allows you to do server-side rendering. The internal and external work from Universal team over the last few months is now reflected in the new Angular. Most of the Universal code can be now found in @angular/platform-server. You can learn more about it at the new renderModuleFactory method.

TypeScript 2.1 and 2.2 compatibility

Now you can get better type checking all through your application as the new release has been updated to a more recent version of TypeScript. This will also improve the speed of ngc.

Source Maps will be generated

In case of errors in any of your template, source maps will be generated. This will help you to provide a meaningful context with regards to the original template. Hence, you can easily rectify your errors.

Conclusion

As per the Angular team, you won’t find it hard to adapt to this new version but we believe you all would have unique experiences playing with this framework. We would love to know how you felt while you explored the new features in this fresh new Angular. Let’s start a conversation!