Web Programming TutorialsLearn How to Upgrade Angular 2 Apps to Angular 4

Learn How to Upgrade Angular 2 Apps to Angular 4

Upgrade Angular

In this tutorial, we are going to discuss upgrading your web applications running on angular 2 to angular 4. It is very easy to upgrade web applications from angular 2 to angular 4, where you won’t find any complication but only performance edge and high operational speed over your existing angular 2 web applications. All you need is to to use NPM through command line for updating your projects composer.json file on the following operating systems which you may be using.

Angular 4 installation process on Windows
On Windows, open a command line and use NPM to execute the following command.

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

It will upgrade and install the following angular module to angular 4.0.0. Or latest version on windows system.
• @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

Angular 4 installation process on Linux/Mac
Use the command line on Linux or Mac terminal to execute the following NPM command to upgrade the angular modules to 4.0.0 or latest version. It will upgrade the following angular modules to latest.

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

It will upgrade and install the following angular module to angular 4.0.0. Or latest version on Linux or Mac operating system.
• @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

Note: – The Angular team is planning to release “interactive Angular Update Guide“, which will make the Angular 4 installation very easy.

Why to upgrade web applications from Angular 2 to Angular 4?
The following are the reasons to consider upgrading your web applications from Angular 2 to Angular 4.
• Ahead of Time compilation (AoT) mode: – The AoT feature has been included into Angular 4.0.0. In AoT mode, Angular is capable of compiling our templates during the build time in order to generate the JavaScript code. The AoT mode is different as compared to JIT (Just in Time) mode in the way that the former mode does the compilation during the build time, but the latter mode does the compilation at runtime when the application starts. The following are the advantages of AoT mode.
1. We can notice the template errors at the build time instead of the runtime which, makes the application start quicker.
2. No need to ship the Angular compiler to the users as a result the package size should be smaller.
This is the reason the Angular 4 is smaller than Angular 2.
• View Engine: – Angular v4 has a new View Engine, which is capable of producing less code when we use the AoT compilation mode. Therefore, with the help of view engine, we get the compressed code without any impact on the application performance. E.g. Code size with AoT has reduced from 449Kb to 165Kb, etc. This is the reason that Angular 4 is faster than Angular 2.
• Meaningful errors in Angular 4: – Meaningful errors provide tremendous help to the developer for developing any web application and Angular 4 has many in-built meaningful errors through generating source maps. When there is an error in any of your templates, the Angular 4 will generate source maps which provides a meaningful context in terms of the original template.
• Enhanced *ngFor and *ngIf in Angular 4: – Earlier there was no else part for ngIf tag. But in Angular v4, now it is possible to use an else syntax in our template, as shown below.

<ng-template>
<div *ngIf="heroes.length > 0; else empty">
<h2>Heroes</h2></div>
<ng-template #empty>
<h2>Hero not found!</h2>
</ng-template>

Deprecated and improved features in Angular 4
The term deprecated means that, we can still use it but it is not recommended anymore. The following features which were functional in Angular 2 are now deprecated but still functional in Angular 4.

1. Tag ng-template: – In Angular v4, the template is now known as ng-template. As a result, the template tag is deprecated and new tag ng-template should be used in its place in Angular v4. The template tag is an actual HTML tag whereas the ng-template tag is a new Angular tag as shown below.

<ng-template>
<div *ngIf="heroes.length > 0; else empty">
<h2>Heroes</h2></div>
<ng-template #empty>
<h2>Hero not found!</h2>
</ng-template>

2. The ‘ParamMap’ interface in Router Module: – In Angular v4, a new interface paramMap or queryParamMap has been introduced, which can be used to represent the parameters of a URL. In Angular v2, we were using params or queryParams to represent the parameters of an URL. In Angular v4, we will now use paramMap or queryParamMap in place of params or queryParams to represent the parameters of an URL. They offer the options between ‘get ()’ method to get a value, and ‘getAll ()’ method to get all values (multiple values) respectively. An example is shown below.

const id = this.route.snapshot.paramMap.get(‘HeroId’);
this.heroService.get(id).subscribe(hero => this.hero = hero);

3. Http Request in Angular v4: – We can now add the search parameters to an HTTP request in Angular v4 as shown below.

http.get(`${baseUrl}/api/heroes`, { params: { sort: 'descending' } });

Earlier in Angular v2, we were required to write many lines of code as shown below:

const params= new URLSearchParams();
params.append('sort', 'descending');
http.get(`${baseUrl}/api/heroes`, { search: params });

4. Overriding a template in Angular v4: – In Angular v4, an overriding of a template in a test has been shortened as shown below.

TestBed.overrideTemplate(HeroComponent, '<h2>{{hero.name}}</h2>');

Earlier in Angular v2, we were required to write many lines of code as shown below:

TestBed.overrideComponent(HeroComponent, {
  set: { template: '<h2>{{hero.name}}</h2>' }
});

5. Internationalization I18n: – The Angular v4 team has shown improvements in the field of internationalization to improve small things such as ngPlural (from ‘ngPluralCase=”=0″’ to ‘ngPluralCase=”0″’), etc. as shown below.

After:
<div [ngPlural]="value">
  <ng-template ngPluralCase="0">Case 0</ng-template>
  <ng-template ngPluralCase="1">Case 1</ng-template>
  <ng-template ngPluralCase="2">Case 2</ng-template>
</div>
Before:
<div [ngPlural]="value">
  <ng-template ngPluralCase="=0">Case 0</ng-template>
  <ng-template ngPluralCase="=1">Case 1</ng-template>
  <ng-template ngPluralCase="=2">Case 2</ng-template>
</div>

6. The ‘CanDeactivate’ interface in Router Module: – In Angular v4, the CanDeactivate interface has an extra (optional) parameter that contains the next state (i.e. navigate to). We can now implement customized logic, so that a user can navigate away from the current component as per application requirements.

7. Animations: – A new Animations package has been added to Angular v4 as @angular/platform-browser/animations Therefore, if your existing Angular2 app is using animation then this package needs to be included and referred in the application code.

Conclusion: –
In this article, we discussed about upgrading web applications from Angular 2 to Angular 4. Also, we discussed the benefits to upgrade such web applications along with deprecated and improved features in Angular 4.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -