Angular 4 vs Angular 2
The recent release of Angular 4 has developers both excited and confused. If you're just getting familiar with Angular 2 then you will be relieved to know that Angular 4 is not another complete rewrite of the framework. In this article, we discuss what's new in Angular 4 including new features and key differences between the latest release and its predecessor.
What is Angular 4?
Angular 4 is the latest stable release of the Angular framework. Released in late March, the newest version comes only six months after it's predecessor Angular 2.
Unlike Angular 2, Angular 4 is not a complete rewrite of the framework. While a few new features have been introduced, Angular 4 is largely the same in terms of syntax and elements (components, services, etc) first introduced with 2. Upgrading to 4 will cause some breaking changes however required code changes are minor with existing Angular 2 apps.
Why not Angular 3?
The Angular framework now uses semantic versioning. The Angular team wanted the latest release of Angular to unify all semantic versions of the framework's dependencies. In order to achieve consistency, all dependencies had to be upgraded to 4 since @angular/router was previously at v3.3.0. For these reasons, the latest major release is 4 and not 3.
It should be noted that the Angular team is pushing for a "versionless" identity. Also known as "the death of version numbers", the creators are encouraging Angular to be recognized as a unified framework rather than specific versions. This is largely because of the confusion that stemmed from the complete rewrite from Angular 1 which made 2 fundamentally different.
Angular 4 new features
Below are some of the major features introduced in Angular 4:
Router ParamMap
Angular has introduced a new way to map route params in URLs. By using paramMap, you can access route parameters with get() and getAll() methods.
Animations
Angular has moved animations into their own module @angular/animations. While animations were previously included with the @angular/core, they've been extracted to cut down on unnecessary code being imported with modules. By abstracting animations away from the core module, you can significantly cut down on file size and import only the animations needed for your app.
ngIf / ngFor improvements
Angular 4 introduces improvements to built-in directives like ngFor and ngIf. For example, an else clause is included with the the ngIf directive. By referencing separate template fragments you can cut down on duplicate divs for if..else rendering cases and improve readability.
source maps for templates
Angular now generates source maps for templates, making them easier to debug
TypeScript upgrade
Angular has upgraded the TypeScript dependency from 1.8 to support both 2.1 and 2.2
Angular 4 vs Angular 2
Angular 4 results in both faster and smaller apps than Angular 2. Largely thanks to the TypeScript upgrade, Angular 4's ngc-compiler is much faster. Additionally, AOT-compiled templates in Angular 4 are smaller which reduces load times and increases page speed. It was estimated that the size of generated code for Angular components is around 60% less with Angular 4. Other developers claim to cut down production bundles by hundreds of kilobytes after switching to 4.
In conjunction with the release of 4, the Angular CLI (1.0.0) now supports yarn and other package managers besides just npm. Angular Universal also sees improvements as Angular 4 marks the first release since the Angular team took over the once community-based Angular Universal project.
Conclusion
While Angular 4 will cause breaking changes for Angular 2 apps, it's not all that much different. Apart from the major features previously discussed, your code will largely stay the same between the two versions. Upgrading an existing Angular 2 app to 4 requires minimal (if any) code changes and can significantly cut down on the size of your app. This will increase performance and keep your apps aligned with the Angular team's latest and greatest. For these reasons, upgrading to Angular 4 is highly recommended.
