Migration from Angular2 to Angular4

This quick tutorial is going to show how to migrate from Angular2 to Angular 4 .  Don't worry guys it not difficult as moving from Angular 2 RC1 version to stable version.

We will show step by step procedure to update your Application and I promise you would love it .

What's new ??

• Smaller & Faster

In this release , Angular delivered their promise to make Angular applications smaller and faster. Angular V4.0.0 has reduced the packages weight and they have increased the performance.

• View Engine

There are changes  to what AOT generated code looks like. 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.During the release candidate period,  many developers claimed that migrating to 4 reduced their production bundles by hundreds of kilobytes.Read the Design Doc to learn more on  View Engine.

• Animation Package

The animation module has been pulled out of @angular/core and into their own package. This means that if you don’t use animations, this extra code will not end up in your production bundles.

This change also allows you to more easily find documentation and to take better advantage of autocompletion. You can add animations yourself to your main NgModule by importing BrowserAnimationsModule from @angular/platform-browser/animations.

New Features

* Improved *ngIf and *ngFor

The template binding syntax now supports a couple helpful changes. You can now use an if/else style syntax, and assign local variables such as when unrolling an observable.

<div *ngIf="userList | async as users; else loading">

<user-profile *ngFor="let user of users; count as count" [user]="user">

</user-profile>

<div>{{count}} total users</div>

</div>

<ng-template #loading>Loading...</ng-template>

* TypeScript 2.1 and 2.2 compatibility

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

Updating to 4.0.0

Updating to 4 is very as easy as updating your Angular dependencies to the latest version .

1.  Before updating make sure you don't use extends OnInit, or use extends with any lifecycle event. Instead use implements <lifecycle event> .

2. For updating , use the below commands :-

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

On Windows: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

3. If you are using Animation module , then in your app.module(main module of the application)

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; and add it into imports of @NgModule

Since , imports from @angular/core has been deprecated for animations , so if you are using transition, animate etc, then change the imports to import { trigger, state, style, transition, animate } from '@angular/animations' .

4. If animations have been used , then they need to be added in System JS . Add below lines in SystemJS in map        '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',        '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',        '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js'.

Note: Don't forget to add this line , otherwise it give you headache as it gives some router outlet error and you may spend a lot of time searching the issue and the answer would lie somewhere else i.e. these two libraries .

5. After the update ,If you are using <template> tag, then it has to be changed to ng-template as it has been deprecated. Replace ngOutletContext with ngTemplateOutletContext.

And  now , your application will be successfully upgraded to Angular4 .