Common Ionic 3 Development Mistakes

WRITTEN BY GARETH DUNNE @JSDIARIES

As I have got to terms with many of Ionic’s development ways I have encountered a whole host of different errors that has slowed my development down.

In many ways, this is key to learning the framework, however I thought I’d share some of the more frustrating moments that I encountered so that a developer may be able to be more aware in his/her app building process.

I decided to create this post after seeing a simliar post from Toptals most common ionic development mistakes.

Again, if your looking to expand your Ionic knowledge I highly recommend this Ionic 2 cookbook.

These mistakes stem from an app that I made called CoffeeTrail.

It’ll be on the iOS store very soon but be sure to check it out on Android here.

The Ionic framework is built on top of Apache Cordova.
Cordova is responsible for packaging your HTML5 app as a native app that can run in Android, iOS, and other platforms. They have documentation that is both informative and verbose and should be read frequently when experiencing bugs and errors.

This seems to be relatively simple idea but one I was consistently ignoring at the start of my development. Whenever I would search for specific Ionic errors I would limit my search to all things Ionic, including the Ionic forums, stack overflow etc.

A lot of the time I would actually find a solution by looking at the Cordova documentation.

As Cordova is really the bread and butter of an Ionic application it can really help to examine information about specific plugins that power your application.

There is a significant amount of useful documentation here, especially for platform specific information for Android and iOS:

One of the handiest ways to produce an .ipa file without owning a Mac is to use Ionic Package. Ionic Package builds your application in its own cloud so that you can download it from their server.

However, you still have to run around many configuration steps to produce an .ipa file.

My advice here is to meticulously follow the Ionic Documentation to do this.

And any time you want to generate a Apple keychain file or p12 from a Windows machine have a look at this guide here.

Once finished you can view your application via the Ionic View app here.

This is very useful for testing your application across a wide range of device since you are testing it on a server just download the Ionic View app onto your desired device and test it out.

Just because we are developing hybrid applications does not mean we don’t have to still specifically cater to each platform in some shape or form. I quickly found this out when using the Google Maps SDK.

When building with Android I had no problems and the map, locations and assets would be retrieved from the Google servers without an issue.

However when building for iOS the map would never display like so.

And after checking the network requests in the Safari there seemed to be no problems. With no errors logged after debugging and confirming that the map element is actually loaded I initially I thought this must be a style issue with the div map element but after some deliberation I found out in the Cordova documentation some extra information was needed in my config.xml file. specifically for iOS.

According to the docs , applications without any tags only have file requests from urls that are allowed.

When you are ready to build your application to production you will need to generate your image resources for your project.

We can do this using the command :

ionic cordova resources []

A lot of the time my original splash image wasn’t at the correct resolution to be transformed into various other dimensions for mobile tablet etc. Ensure that you can correct this as the resources step is required for building to iOS or Android.

For more information check out the resources in the Ionic Docs.

Whenever you use the command:

ionic serve - labs

Your application is wrapped in a display for each platform. This is also the case if you use Google’s developer tools mobile responsive view, your application will render the components relevant to Android or iOS and even Windows.

While this is undoubtedly useful to preview platform specific components do not assume that the behavior here is representative of what will actually happen on an emulator or a real device.

This may seem obvious; however, I was initially confused by this as the -labs display resembles an authentic emulator. For actual emulators you can use Xcode for iOS or Android SDK Tools for Android applications.

So these are just a few of obstacles I encountered throughout my development time with Ionic. If you are looking for some valuable tutorials and resources, feel free to check out my previous post regarding excellent learning tutorials for Ionic.