Over a million developers have joined DZone.

Angular 4 Is Out Now! Should You Switch From Angular 2?

DZone's Guide to

Angular 4 Is Out Now! Should You Switch From Angular 2?

Angular 4 is here! Read on for the newest features of Angular, and how it differs from the last iteration to decide if switching to Angular 4 is right for you.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

From our last blog, you already know that Angular 4 was going to release in March 2017. On the 23rd, Google's Angular team finally announced the release of version 4 skipping the 3rd one. As the long awaited release of Angular 2  was a complete makeover of the previous version, this time they have kept it less surprising and similar to version 2.

This means Angular 4 has a gentle learning curve. However, for those developers who are still in the learning phase of Angular 2, it can be a little difficult to switch to the newer one. So, let's first see what this new version has to offer and then talk about switching.

How Angular 4 Builds on Angular 2

As compared to Angular 2, there are many new things added to the list. Not only new features but also some tweaks are there that enhance old features. After some research we found these points at ValueCoders

Faster and Smaller

With Angular 4, applications are going to be less space consuming and faster than before. However, by no means, are they done yet, and the team is focused on making further improvements in the upcoming months.

View Engine

They’ve made changes under to hood to what AOT generated code looks like. These changes reduce the size of the generated code for the components by around 60% in most cases. The more complex the templates are, the higher the savings.
During the release candidate period, many developers who migrated to Angular 4 reduced their production bundles by hundreds of kilobytes.

Here is the design doc for better understanding.

Animation Package

They have pulled animations out of @angular/core and put it 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 find documentation more easily and to take better advantage of auto-completion. You can add animations yourself to your main NgModule by importing BrowserAnimationsModule from  @angular/platform-browser/animations.

New Features of Angular 2

Improved *ngIf and *ngFor

The template binding syntax now supports a couple helpful changes. You can now 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">
<div>{{count}} total users</div>
<ng-template #loading>Loading...</ng-template>

Angular Universal

Universal, the project that allows developers to run Angular on a server, is now up to date with Angular again, and this is the first release since Universal, originally a community-driven project, was adopted by the Angular team. This release now includes the results of the internal and external work from the Universal team over the last few months. The majority of the Universal code is now located in @angular/platform-server.

To learn more about taking advantage of Angular Universal, take a look at the new renderModuleFactory method in @angular/platform-server, or Rob Wormald’s Demo Repository. More documentation and code samples are going to come.

TypeScript 2.1 and 2.2 Compatibility

The team has updated Angular to a more recent version of TypeScript. This will improve the speed of ngc and you will get better type checking throughout your application.

Source Maps for Templates

Now when there is an error caused by something in one of your templates, they generate source maps that give a meaningful context in terms of the original template.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

angular 4 ,angular 2 ,angular js ,typescript ,web dev

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}