Upgrade Angular and Apache Cordova.

by Javier Puerto
Tags: Apache , Cordova , Angular , Tutorial , Open Source , Material Design , TypeScript

When we created our Angular RSS application, we used the first version of Angular 2.0 and angular-cli was not stable yet. Today we are going to upgrade our code developed in our previous posts here and here.

Update key

What do we need to upgrade?

Our application is still very simple. We need to update the following dependencies:

  • angular-cli is our build tool.
  • angular is the framework that we use to create the application.
  • angular-material is our view.
  • cordova is the tool to build compatible mobile applications. We will need to update the plugins too.
  • NodeJS in our case was needed as my local version was too old. It must implement Javascript ES6.
  • Typescript compiler version 2.2 is needed for latest Angular Material.

Upgrading Angular

We will use the Angular CLI migration guide to upgrade Angular CLI from an old 1.0.0-beta.15 to version v1.0.4.

As summary, the most important changes are:

  • Node JS needs to be 6.9.0 minimum.
  • angular-cli.json is now .angular-cli.json.
  • New dedicated entry to polyfills.ts file.
  • One tsconfir file per application environment.

Now let's try run our tests:

ng test

And we found that the material package imports are failing because the package of the components has changed from @angular2-material to @angular/material.

ERROR in ./src/app/feed-card/feed-card.component.spec.ts
Module not found: Error: Can't resolve '@angular2-material/card' in '/media/cache/src/becompany-blog-src/becompany-rss-reader-webpack/src/app/feed-card'
 @ ./src/app/feed-card/feed-card.component.spec.ts 6:13-47
 @ ./src \.spec\.ts
 @ ./src/test.ts

Angular Material 2 has been improved a lot since we started using it. All components reside now within @angular/material (see breaking changes). Therefore we are going to fix the imports:

-import { MdCardModule } from '@angular2-material/card';
-import { MdToolbarModule } from '@angular2-material/toolbar';
-import { MdButtonModule } from '@angular2-material/button';
-import { MdIconModule, MdIconRegistry } from '@angular2-material/icon';
+import { MdCardModule, MdToolbarModule, MdButtonModule, MdIconModule, MdIconRegistry } from '@angular/material';

After performing the changes, we can finally run the application as always. But because of the angular material library upgrade we still need to fix our stylesheets: We simply include material's styles directly from the node_modules directory by using the character "~". Do not forget to remove old and now obsolete material styles from the index.html file.

/* You can add global styles to this file, and also import other style files */
@import 'assets/md-font/material-icons.css';

/* Select Angular Material theming. */
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

We are almost done. With the introduction of the latest Angular CLI we have also updated the code rules. If we try to generate a productive app we will find the follow errors:

ERROR in ng://src/app/app.component.html (4,41): Property 'refreshFeed' is private and only accessible within class 'AppComponent'.

ERROR in ng://src/app/app.component.html (4,32): Property 'feeds' is private and only accessible within class 'AppComponent'.

ERROR in ng://src/app/app.component.html (7,1): Property 'feeds' is private and only accessible within class 'AppComponent'.

ERROR in ng://src/app/feed-card/feed-card.component.html (2,34): Property 'openLinkInBrowser' is private and only accessible within class 'FeedCardComponent'.

Nice, we now got warnings about using private fields outside the scope of the object. The solution is to make these fields public.

You can find the upgraded code in the GitHub repository in the master branch.

Upgrading Apache Cordova

Be sure that you are using latest Apache Cordova CLI by running.

sudo npm install -g cordova

Then we can start with the migration guide. In our case we just have to run the update command.

cd cordova
cordova platform update android

Then we can just run the demo application in the Android emulator or a real device if it is connected and properly configured.

cordova run android

The latest cordova version requires an update of the Android SDK tools. In case that our SDK was updated already, the application should be shown in the emulator/device.

Conclusions

Create mobile applications with Angular and Apache Cordova is not so dificult to achieve. Both communities are doing a good job by keeping a robust and reliable base. Please check our GitHub repository to stay up to date. Do not forget to star the repository if you like it!