Angular 4 new features and improvements

The Angular team has just released Angular 4. This is a major release which has some breaking changes!

Angular 4 is backward compatible with Angular 2!

Here are some great features and improvements:

Faster and smaller

Angular 4 is now faster and smaller!

View engine now has less code

Angular team introduces a new view engine system, which can reduce the size of generated code for our components by around 60%!

Animation has been moved out to a separated package

Angular animation package will not be in your production code anymore. You can still import and use it whenever you want.

ngIf now has a new else statement

Now you can use else statement with ngIf.

<div *ngIf="activated; else hidden">

</div>
<ng-template #hidden>Your hidden code</ng-template>

Angular Universal

You can now render an Angular app on the server using Angular Universal.

Upgrading to Angular 4

If you're using Angular 2, upgrading to Angular 4 is very easy. You just need to run these commands:

For Mac users:

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save 

For Windows users:

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

You can view more features and the release note at:

https://angularjs.blogspot.com/2017/03/angular-400-now-available.html

Get the Angular 4 book for free!

Because Angular is using semantic versioning for Angular releases, Angular 4 is actually an improved version of Angular 2!

If you know Angular 2, you'll know how to use Angular 4!