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.

Advertisements
Upgrade an Angular 2 application to Angular 4

Build and run an ASP.NET Core application with Docker

The topic of this post is a new technology that widespread in the world of the virtualization, that is Docker.

It is based on the concept of the containers, every application that runs on docker is a container, that is a lightweight executable package that contains all the dependencies that the application needed to run.

For instance, an ASP.NET Core application container will contains, among other things, the Core Framework.

This approach give us the advantage of deploy the application without take care about the configurations of the hosting environment; furthermore, the container is lighter and easier to manage than a traditional virtual machine and is preferred when we want to manage applications separately.

If we want to configure an ASP.NET Core application with Docker, we have some steps that we need to do.

Docker installation

The first thing is install the docker environment to run the containers.

We can refer to this page to choice the right installation; in my case I have a Windows Home desktop, so i need to install the Docker Toolbox instead of Docker for Windows.

The installation is very simple and, based on your windows version, if you don’t have Hiper-V installed (used from docker to create local machines), will be installed VirtualBox as well.

Once the installation is completed, we can run the docker environment,  the terminal will be showed:

docker1

Docker configuration file

Once the environment is ready we have to configure our application and we have to add the Dockerfile in the root of the application.

It’s like a configuration file where we says to Docker the instructions to build the container:

FROM microsoft/aspnetcore-build AS builder
WORKDIR /source

COPY *.csproj .
RUN dotnet restore

COPY . .
RUN dotnet publish --output /app/ --configuration Release

FROM microsoft/aspnetcore
WORKDIR /app
COPY --from=builder /app .
ENTRYPOINT ["dotnet", "WebApp.dll"]

The file is composed by two parts, the first one deal with the build of the project; with the instruction FROM I say what is the base image for my container, that is the Microsoft image with the ASP.NET Core build environment; this container has all the stuff that we needed to build a project, like the .NET Core Framework.

After we have defined the WORKDIR I copy the csproj in the root of the container path (the second parameter “.” means root path) and then I run the dotnet restore command.

Next I copy the rest of the project and then I run dotnet publish command with the app folder as a parameter.

Now it’s the time of the second part of the configuration file, that is the configuration of the startup of the application.

In this case, the startup image is aspnetcore, that has the ASP.NET Core runtime already installed; I define the app folder as workdir and I copy the built package to this folder.

The last row is the entry point of the container, that is the startup command to be executed; in my case I startup my web application.

Build and run

Now I’m ready to prepare and run my app in a Docker container.

The first thing that I need to do is build the application with a docker command.

So I go to the root on the web application and I run this command:

docker build -t webapp .

This command build the docker image from which the containers will be generated.

The start point for every container is an image that the docker daemon will use to build a container when requested.

If the command end successfully we are ready to run a new container from that image:

docker run --detach -p 5000:80 --name webapp_container webapp

The command is quite simple, with the option detach we says to docker that we don’t need an interactive console of the container, so we haven’t to manage it; with the p parameter we define the port exposed to the outside and the port which the other containers can use to comunicate; the name parameter is the name associated to the container.

After we have executed the command, we can check the running containers with this command:

docker ps -a

The result of this command should looks like this.

docker2

In the first row I have the container up and run, but before to access the application from a web browser, we need to retrieve the ip of the docker virtual machine.

We can do this with the command:

docker-machine ip

Now I can type in my browser:

http://ipaddress:5000

And the web application responds!

That’s all, we I have installed docker on my machine, configured the dockerfile for my application, built the image and run the docker container.

 

Build and run an ASP.NET Core application with Docker