Upgrade an Angular 2 application to Angular 4

One years ago I wrote a series of posts about Angular 2 and how we can develop a base application with this new framework.

The time is gone and during this period many releases came; the last Angular 4 version is 4.4.6 and a new stable version of the framework has been released in version 5.

So I decided to upgrade this base application to the version 4 and check what are the main differences.

I choose to not use angular-cli but to upgrade the application manually, so I didn’t have to create a new project.

In the upgrade process I met some changes that I describe below.

Packages

The first thing that I have done was upgrade the package.json file of my old application.

{
"name": "angular4.web",
"version": "0.0.0",
"license": "MIT",
"private": true,
"dependencies": {
"@angular/animations": "^4.4.6",
"@angular/common": "^4.4.6",
"@angular/compiler": "^4.4.6",
"@angular/core": "^4.4.6",
"@angular/forms": "^4.4.6",
"@angular/http": "^4.4.6",
"@angular/platform-browser": "^4.4.6",
"@angular/platform-browser-dynamic": "^4.4.6",
"@angular/router": "^4.4.6",
.....
}
.....
}

With “npm install” command I have upgraded the angular packages without particular problems and the source code of the application was compliant to the new framework version.

The only problem that I have encountered was on the translate module, that is moved from ng2-translate to ngx-translate.

Translate factory

In the package.json I have replaced the new package like this:

{
"dependencies": {
.....
"@ngx-translate/core": "^8.0.0",
.....
}
}

Then I replaced all the modules that depended on it with the new reference:

import { TranslateModule } from '@ngx-translate/core';

.....

Fortunately, the service and methods of the new packages were the same of ng2-translate package, so I didn’t had to change the code.

ngIf directive refactoring

Once the application worked I tried to leverage some new features of Angular 4.

In detail, I used the ngIf directive in order to simplify the html code of a couple of page.

For example, the invoice.component.html file, that had this structure, now looks like this:

<div *ngIf="!edit; else editBlock">
<input type="button" class="btn btn-primary" value="New" (click)="New()" />
<table class="table table-striped">
<thead>
<tr>
<th>
{{ "NUMBER" | translate }}</th>
<th>
{{ "CUSTOMER" | translate }}</th>
<th>
{{ "EMISSIONDATE" | translate }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let invoice of (invoices | searchInvoices: searchService.searchText)" (click)="Edit(invoice)">
<td>
{{invoice.Number}}/{{invoice.Year}}</td>
<td>
{{invoice.Customer.Name}}</td>
<td>
{{invoice.EmissionDate | date: "dd/MM/yyyy"}}</td>
</tr>
</tbody>
</table>
</div>
<ng-template #editBlock>
<app-invoice-detail *ngIf="invoice" [invoice]="invoice" [isNew]="newInvoice" [validationEnabled]="invoiceValidationEnabled"
(onClosed)="onClosed($event)" (onDeleted)="onDeleted($event)"></app-invoice-detail>
</ng-template>

I removed the hidden attribute from the original page and I used the ngIf directive to manage the visibility of the detail block.

You can find the Angular 4 application here.