Angular 4 Released – Why a 4th version?

Another version of Angular?

Angular 4 was fully released on 17th March. In this post, I hope to address any confusion or niggling worries regarding how this affects current Angular projects and how exactly these changes could benefit your next project.

Here are the official changes.

If you are baffled as why there is already a 4th version of Angular I covered semantic versioning in a previous post here.

Most of the changes in Angular 4 comprise of performance improvements for the framework. Perhaps the most significant one is the introduction of Flat ES Modules that treeshake your application for you.

During the ng-build process, the compiler deems certain code unnecessary  because it has no usages. The compiler then removes this code in order to reduce file size and to make the application more lightweight.

Since the scheduled announcement of Angular 4, the Angular team have been reassuring everyone that this change will not affect the way your current applications run. When upgrading your application to Angular 4, there will be a seamless transition for the most part.

This seems to be the case as I have only experienced one issue and this is with the AngularFireBase package which the developers for it has stated that they haven’t made it fully compatible with it yet .

If you have experienced this issue you can also follow this excellent tutorial by Coursetro to get Firebase working with Angular 4.

This tutorial is very insightful and solved my Firebase issue.

You may also experience a similar situation with some of your libraries and packages but the core features from Angular 2 seem to function just fine.

The way animations are imported has been cleaned up for Angular 4. Instead of importing the various types of animations such as state, keyframes, trigger etc,

 import { trigger, style, transition, animate, group }
    from '@angular/core';
 

 You now specify an import that contains tools and assets for animations in one package. This isn’t much but it does feel less cumbersome to set up an animation for a component.

The browser animations modules should also be added to your app.module.ts file for this to function properly.

Check how to do that here

 When using the ngIf directive we never had the ability to add an else clause to the statement. This has been addressed in Angular 4, we can use the element <ng-template> to specify the name of our else condition by specifying it after the # symbol.

 This is the best


 This is the second best 
   

Please note that <template> is now deprecated and is replaced by <ng-template> 

Perhaps one of the handiest changes, an email validation directive was added to input elements. This saves us from having to manually create regular expressions to validate a users email address.

Simply add this to an input field element just like you would for the required directive and our email input field will automatically have validation.

This is actually quite a useful feature as it applies an email validating regular expression pattern to our element using just one keyword.

You can, of course still create your own custom expressions for validating emails and other input fields.

I hope this post has reassured you that this new version of Angular isn’t as significant as the version increment might make it sound. Some nice changes here lets us utilise some conditions and statements a bit more as well as cleaning up some of the imports.

Be sure to check our resources page for more Angular, TypeScript and JavaScript reading material.