Here are the super easy instructions for how to upgrade to Angular 4.
Things are constantly changing with programming. Sometimes it can seem daunting to try ot keep up with it all. The Angular dev team has done us a favor with what they are calling an “invisible-makeover”.
It was actually such an easy upgrade that I was inspired to write this blog post about it! I am currently working on three projects that are using Angular 2 and all three upgraded to Angular 4 without any complications. So lets get to it.
The Angular dev team has done a great job minimizing the AOT (ahead-of-time) generated good. This is how they describe it:
These changes reduce the size of the generated code for your components by around 60% in most cases. The more complex your templates are, the higher the savings.
The Angular dev team did a great job enhancing the speed. It has been noticeable when doing development, but I have not been able to test the difference on a live server.
They add an if/else style sytax to *ngIf. When you are making asynchronous calls to say, a Firebase database, you can add a loading screen within the page while that data loads. The example that the Angular Dev team gives is:
<div *ngIf="userList | async as users; else loading">
There is a lot of potential with the ability of an if/else.
Many times in programming there are not many helpful error messages, your app just won’t work. Angular 4 continues to try to change this by generating source maps.
When an error is caused in one of your templates, Angular 4 “generate source maps that give a meaningful context in terms of the original template.”
Most Angular 2 apps will work using Angular 4 without changing anything. It might not be a monumental upgrade, in terms of visible changes, but it offers huge enhancements to Angular 2. It really shows the Angular Teams’ commitment to making Angular applications smaller and faster, which makes me super happy!
Here is the official Angular 4 announcement.