angularWhy it is called Angular 4?

As Igor Minar(Lead of Angular Team) says we need to start calling it as just “Angular” not as Angular 2 4 5 etc because now on wards there will be no change like Angular 1 to 2, Only the core library changes and Deprecation phases will be there. You can go through this link for details (http://angularjs.blogspot.in/2016/12/ok-let-me-explain-its-going-to-be.html)

Yes, Now you can easily migrate your existing Angular 2 App to Angular 4. As Angular 4 has backward compatibility there will be no issue in doing so, As Igor Minar explains in NG-BE 2016(https://www.youtube.com/watch?v=aJIMoLgqU_o) .

 

Simple steps for migrating your existing Angular 2 App to Angular 4.

Step 1: Remove the node modules folder which is referenced by your App.

Step 2: Convert all the angular module versions to 4.x.x in package.json ie., all the angular modules which start with @.

Eg:-

“@angular/common”: “2.0.0”,
“@angular/compiler”: “2.0.0”,
“@angular/core”: “2.0.0”,
“@angular/forms”: “2.0.0”,
“@angular/http”: “2.0.0”,
“@angular/platform-browser”: “2.0.0”,
“@angular/platform-browser-dynamic”: “2.0.0”,
“@angular/router”: “2.0.0”,
“@angular/upgrade”: “2.0.0”

Change to:

“@angular/common”: “4.0.0”,
“@angular/compiler”: “4.0.0”,
“@angular/core”: “4.0.0”,
“@angular/forms”: “4.0.0”,
“@angular/http”: “4.0.0”,
“@angular/platform-browser”: “4.0.0”,
“@angular/platform-browser-dynamic”: “4.0.0”,
“@angular/router”:”4.0.0″,
“@angular/upgrade”: “4.0.0”

Step 3: Do npm install then all these above modules will be installed, but you will get the warnings like @angular/core4.0.0 requires a peer of zonejs^0.0.4. You need to install zonejs version 0.0.4. Then resolve all the warnings by just installing the specified version in the warnings.

Your App is migrated and should work fine.

Now lets see what’s new in Angular 4 for developers

1) Else can be used with *ngIf:

Suppose if you want to show different content based on the condition then you can just use *ngIf with else and <ng-template>.

Eg:

 <p *ngIf=”show;else elsePart”>
If part………………………….
 </p>
 
<ng-template #elsePart><p> Else Part… </p></ng-template>
2) Angular animations is pulled out of “@angular/core”:

Yes now you have to import BrowserAnimationsModule  from “@angular/platform-browser/animations”.
The advantage is that if your app does not uses Angular animations then in production bundles you do not get extra code.

3) TypeScript 2.x is supported by Angular 4 versions:

This will improve the performance of ngc and better type checking.

Some useful links where you can find the latest updates regarding Angular:
Looking for AngularJS Development Company, Hire our dedicated developers.!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.