Angular 4

Overview

The good news is that Angular 4 is almost exactly the same as Angular 2, from a developer’s point of view. Most of the changes are “in” the framework. Upgrading is as simple as installing the new dependencies
Igor Minar (who works on Angular) requests developers to stop calling it AngularJS,
Angular2 and Angular4. Everything after Angular 1 (which will now be referred to as AngularJS) is simply “Angular“. The versions only denote Angular’s growth over time.

Angular 4 is going to be faster.The Angular team talks about an average 60% reduction in your application size.

Let’s talk about some of the major improvements in the newer version of Angular 4.0

*ngIf and else?

With the new syntax, you can provide an “else” clause. This is a more convenient way to express a conditional.
Here, we wrap our “else” clause in a “ng-template” component – a new component introduced in Angular 4.

using else:

<div *ngIf="isValid;else other_content"> content here ... </div> 
<ng-template #other_content>other content here...</ng-template>

you can also use then else:

<div *ngIf="isValid;then content else other_content">here is ignored</div> 
<ng-template #content>content here...</ng-template> 
<ng-template #other_content>other content here...</ng-template>

or then alone:

<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>

Renderer 2

One of the reasons we all love Angular so much is it’s DOM abstraction capabilities. We don’t need to document.querySelector(‘#id’) anymore. So why should we have to get access to the DOM element when we need to manipulate the UI.
That’s why we use the Renderer service. It’s an abstraction for UI rendering manipulations.

What is Render service: Separate Angular 2 runtime into two layers, application layer and render layer. The application layer only contains APIs and runtime that application code interacts with directly. The rendering layer provides common protocol for performing UI updates. This two layers allow Angular 2 applications to run in different platforms while providing the same set of abstractions to application.

Coming back to the deprecation…

The old Renderer will still work, but it will be removed at some point in the future. it’s recommended that you switch to the new Renderer 2.
Making the switch is as simple as updating the name of the injected component (from Renderer to Renderer2) and updating the names of methods (if the method names have changed).

Angular Universal

The Angular Universal project allows you to render your Angular app server side. If you aren’t familiar with this library you can check out the git repo or this really nice video by Nir Kaufman.

The originally community driven project was taken up by the Angular team and is now up to date with Angular v4.

TypeScript 2.1 and 2.2 compatibility

We’ve updated Angular to a more recent version of TypeScript. This will improve the speed of ngc and you will get better type checking throughout your application

Reduced Size and Improved Performance

The Angular team has made some serious changes to the AOT (Ahead Of Time compilation) engine.

If you don’t already know this, Angular can be rendered in 2 ways –

1. JIT (Just in time) – the application is compiled in the browser.
2. AOT (Ahead of time) – the application is compiled beforehand using ngc (angular compiler).

All the Angular documentation and most of the demo apps you’ll find online use JIT.

This means that the application is compiled in your user’s browsers.
What it really means is that your application isn’t as fast as it can be. The weight of the application is higher than it needs to be because –

1. The download includes the compilation library which accounts for about 50% of the weight of the framework.
2. The templates are not pre-compiled, which means the browser has to do a lot of work before it can show the user something.

AOT compilation, on the other hand compiles your code before the user gets it. That means that the code –

1. takes lesser time to download (because the compilation library is not included).
2. is executed faster (because the browser doesn’t need to spend time compiling the application).

If you want to learn more about how you can add AOT in your application, check out Angular’s docs on AOT.

Upgrading to Angular 4

Allright. So you have decided that you want the potential 60% size reduction in your application and you want to blow your users away with even better load times.

How do you make the move?

The Angular team says that it’s as simple as –
1. Upgrading the Angular dependencies to the latest version.

For Mac

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

For Window

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

Then run whatever ng serve or npm start command you normally use, and everything should work.

Conclusion

Even though version 4 doesn’t bring any breaking changes, future versions might. It’s best to keep making your app run as fast as possible.

As always console.log(‘happy coding!’);