Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Profile photo of Wanda Muriy
Nataliya Muriy
Marketing Content Creator - you name it, she'll write it!

Metamorphosis doesn’t have to be ugly: forget about Kafka or what a butterfly has to go through before it shows its amazing apparel. Angular 4 has evolved for you and is showing its best colors. “Just how different is it from Angular 2?”, you might wonder. There are some overall and package-specific changes, as well as new features.angular-4-ss-for-blog

First of all, it is smaller and faster (source) — the butterfly has abandoned its cocoon stage and has a lot more to offer. Besides, AOT generated code is looking more attractive: it’s much slimmer (about 60% less than before). What does this mean for you, the developer? The more complex your template work is, the more you save in terms of time and effort, as well as production bundle size — we’re talking hundreds of kilobytes (source).

Animation package has received its makeover as well: it now has its own space in the forest of development, instead of being part of the @angular/core package.  An implication of this?  If animations are of no use to you, the extra code generated by them will not be meddling with your production bundles.  Besides, you’ll be able to find documentation more easily and really squeeze the juice out of autocompletion.  You can now even play a role in the evolution of your animations by adding them to your main NgModule through the import of BrowserAnimationsModule from @angular/platform-browser/animations  (source).

Another step of this amazing metamorphosis — going from Angular 2 to Angular 4 — is what has been done with packaging.  In reality, there are three major changes: flat ES modules, experimental ES2015 Builds, and experimental closure compatibility. 

The first one allows for an array of new possibilities.  Now you can enjoy improved tree-shaking, faster build, transpilation and loading in browsers (well, under certain circumstances), as well as a smaller size of generated bundles — thanks to flattened module versions in the EcmaScript Module format (source).

Experimental ES2015 Builds represents an optional step in the evolution.  Yet, those seeking a leaner package might want to explore this possibility — if combined with Rollup, there is a 7% savings in terms of bundle size (source)  If you are ready to try these new packages, you will need to configure your build toolchain to resolve “es2015” property in package.json over the regular “module” property (source).

Yet another option for an optimized bundle size and tree shaking is represented by the experimental closure compatibility, made possible thanks to closure annotations available in all of the code (source).

Angular 4 represents an even greater transformation in comparison with Angular 2 thanks to its four new features.  One of them is the improved *ngIf and *ngFor which now allow for the use of an if/else style syntax, and assignation of local variables — when unrolling an observable, for instance (source).  Another one, Universal (a project that makes it possible for developers to run Angular on a server), has now been updated to make the perfect match with Angular thanks to this first release.  You can find most of its code in  @angular/platform-server (source).

ng-if

Ngc now got a chance to become faster thanks to yet another new feature, TypeScript 2.1 and 2.2 compatibility.  Besides, there is no longer the danger of being lost in the template jungle because source maps are provided any time an error in a template occurs.  Now when there is an error caused by something in one of your templates, source maps — which give a meaningful context in terms of the original template — are generated (source).

But this is not all: Angular 4 is no little moth!  It now boasts more beautiful traits, including a new title case pipe, which capitalizes the first letter of each word.  The HTTP one makes it much easier to add search parameters to an HTTP request, while the test one lets you override a template in a test in a much more user-friendly fashion (source).  

titlecase

In addition, obtaining or updating meta tags is now a fresh morning breeze thanks to a new service.  Meanwhile, forms have more than survived the natural selection process: its validators and compare select options are the creatures of the new millennium.  One such validator helps doublecheck an input e-mail, while a select comparewidth boasts a new directive which allows the developer to compare options.  The router has not been left out by the evolution either — it now includes the ParamMap, CanDeactivate, and 118n.  These, respectively, help you represent URL parameters, implement clever logic (when the user drifts away from the component they were working on), and internationalize more simply (source).

As you can see, Angular 4 is a major step in the Angular metamorphosis and yet, it’s not the end of the chain.  A more sophisticated Angular creature will be born later on this year — version 5, in either September or October, followed by newer versions approximately every six months.  That’s not the only good piece of news, though. For awesome Angular 4 support including easy upgrading of Angular 2 projects, try our Angular IDE, available as an Eclipse plugin or standalone IDE.

Watch this video to see just how easy it is to update an Angular 2 project to Angular 4 with Angular IDE:

Related Posts

Darkest Dark Theme, Angular 4.0 Support, MyEclipse... We are excited! We have so much going on, and we wanted you to be the first to know all about our recent updates and new products. Introducing Darkest DarkLike many of you, we wanted Eclipse looking vibrant. We wanted our IDE to make us excited, and not feel like we are still coding in the early 2000s. That’s how it all started, and the “Darkest Da...
Angular 4, TypeScript 2.2 & More, now in Webcl... The day is finally here, and we are not just talking about our release -- Angular 4 is out! Earlier this year we were discussing some of the advantages of Angular 4 like the fact that it comes with better tools, requires 25% less code due to a better compilation, will get updates every 6 months and many others benefits.  The long wait is over -- it...
Upgrade to Angular 4 – Lost in Angular Migra... Upgrade to Angular 4 - Lost in Angular Migration?You are probably familiar with how difficult it is to get a visa to certain countries -- it represents a long, tiring journey of document gathering and application process.  Upgrading Angular might actually feel like trying to move to another country!  Don’t you wish there were an all-inclusive visa,...
Rock Your Front-End Development With Angular IDE b... Early this year we announced our mission to help developers go from Java developers to awesome full stack developers. We started with many tools that were crucial for that goal (e.g,. JSjet, TypeScript, DevSearch, and others) and now we are incredibly pleased to announce Angular IDE by Webclipse will be part of Webclipse as well. Angular IDE by Web...

Posted on Apr 24th 2017