What’s up with Angular 4 ?
While the buzz around Angular 2 is still hot in frontend community, Google has already released Angular 4 earlier this week. Google received negative backslash from AngularJS developers when it moved to Angular 2 with completely different architecture without backward compatibility with the existing framework. Angular 4, on the other hand, is an improvement over angular 2 with little to no breaking changes, providing better code optimization and some exciting new features. Well, that is relief for angular community which is still recovering from Google’s radical shift from Angular 1 to Angular 2.
With this new release, angular team is introducing semantic versioning with minor version released every month with new features and major version released every six month with minimal breaking changes. So, we can expect the next major upgrade to Angular 5 later this year.
Why not Angular 3 ?
The technical reason given by Google is that the latest version of angular router is at 3.3.0 which is not in sync with other modules which are at 2.3.0 And team plans to align the versioning names among modules with Angular 4.
What’s new in Angular 4 ?
Smaller and faster
- View engine
Angular 4 features new and optimized view engine. Angular takes user written declarative templates and compiles into JavaScript. In previous version, the generated code was much larger. The new view engine significantly improves this compilation step which results in smaller application size compared to earlier iterations.
- Separate animation module
Previously animation was part of core angular module. The new release separates animation in its own module from core. This makes applications not requiring animations slightly smaller, which is again win for developers.
Enhanced *ngIf
The *ngIf directive is used to conditionally show the template which is part of earlier releases. Now angular 4 supports showing alternative template using else.
<div *ngIf="show; else elseBlock">Text to show</div>
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
Improved CLI
The best thing I like about angular is its excellent CLI tool. The angulat cli is based on webpack module bundler which is hot in frontend community today. It handles all the installation and configuration steps allowing developer to quickly get started with their existing new project, rather than spending hours on configuration and putting pieces together to run the project. The angular cli features best practices, typescript setting, testing configuration and environment settings easing developer pain. The new CLI also supports installing packages via yarn package manager. All you have to do it open your terminal and enter the command:
set --global packageManager=yarn
Webpack configuration
Well, this feature has been available for a while, and not particular to angular 4 release. Angular cli, built on webpack, provides black box experience by not exposing webpack configuration file. Inability to configure webpack file and add own modules and libraries was a deal breaker. I believe early angular adopters feel my pain. However, in later angular cli releases, you can use simply run ng eject in your project directory to enable webpack configuration file in your angular project.
Upgrading to Angular 4
You can run following commands to upgrade your existing angular 2 project to angular 4.
iOS/Linux:
npm i @angular/{common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@next typescript@latest –S –Enpm i @angular/compiler-cli@next — D -E
Windows:
npm i @angular/common@next @angular/compiler@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next @angular/platform-server@next @angular/router@next typescript@latest — S -Enpm i @angular/compiler-cli@next — D -E
Angular team has promised smooth and painless upgrade to new angular release with very little to no developer effort.
It is an exciting time to be an frontend developer. I can’t wait to try the new features. So did you get to try Angular 4? What are your favorite new features? Let me know in comments.
