Ionic 4 menu not working navigating to root.

I noticed that all events of root/home page isn't working after I have navigated back in my ionic 4 app.

So if you using a back button or a button to navigate to the root page use following code.

Click event of back/home menu item

  onHomeClick() {

    this.navController.navigateRoot('/menu');

    this.menuController.close();

  }

Windows SDK not found. Ensure that you have installed Windows 8.1 SDK along with Visual Studio or install Windows 8.1 - ionic 4, WIndows 10 UWP

Windows 8.1 is pretty much outdated. I think most of portable windows devices using windows 10. So add following lines to config.xml of your cordova or ionic app.

    <platform name="windows">

        <preference name="windows-target-version" value="10.0" />

    </platform>

Cordova InAppBrowser EventListeners not working on iOS

Hi All


I'm using cordova-inappbrowser plugin for several purposes inside a cordova app. This plugin worked without a problem for months.

Then  I noticed its not firing loadstop event when the navigation completed. After 3-4 hours of hit and misses found the perfect solution.


Problem was my iOS platform wasn't latest.

So when you developing apps using cordova make sure your platform versions and plugins are up-to date with OS upgraded.

So all I had to do is



Removing iOS platform.

cordova platform rm ios

Adding iOS platform - Latest Version 

cordova platform add ios

Removing the plugin cordova-plugin-inappbrowser 

cordova plugin remove cordova-plugin-inappbrowser

Adding the plugin cordova-plugin-inappbrowser - Latest Version 

cordova plugin add cordova-plugin-inappbrowser

Could not start Gradle Daemon android build error in Cordova

This was the most confusing error I got when I was building  and release the app for Android Store. 

My android build configurations are listed bellow.

1. Tool Set - Cordova 6.3.1 using visual studio 2017
2. Target API level - 28
3. cordova-android @7.0.0


So the error message clearly gives the idea that Gradle deamon  cannot start to complete the android build. 

** First make sure you have installed and updated all the components for android SDK.


1. Lets check if you have installed Gradle, and it up and running. Open command prompt and enter the command 'gradle'.  If you getting the un-recognised command error move to the step 2.


2. Delete all existing installations of gradle.

3. Download gradle latest version from  https://gradle.org/releases/  

4. Copy the content to a folder in your C:\ drive.

5. Add gradle location to system variable 'path'.

6. Restart the computer and enter the command 'gradle' in command prompt.

Cordova, PhoneGap, Ionic - UWP Windows 10 Release Build Failed ( SQLlite )

Recently I had some issues of building packages for Windows 10 app I have developed using cordova. App was working in debug mode without issues. But in release mode it was crashing when opening the app.

So first question is how to find the errors when they only appear in release mode.


1. Go to the platform folder and open the windows native project.

2. Run windows native project in release mode and it will fail with the error message that it cant debug.

3. Now switch to debug mode and run your project .

4. In output window you will see all the errors.

5. Fix all errors and try to publish to windows store again.

iTunes connect UI freezes.

When you publishing apps for apple store using itunes connect screens are freezing more often. Main reason behind for this is poor internet connection. Make sure you have a good internet connection when you publishing apps to apple store.

I'm always using my mobile's hotspot if the wi-fi or LAN is super slow.

Android app missing permissions after publishing - Cordova, Visual Studio 2017

Hi All

All you have to do is update your android manifest file with required permission before create the release APK.

** You have to do it before every release if you cleaned the project.

 android:name="android.permission.CAMERA" />
 android:name="android.permission.FLASHLIGHT" />
 android:name="android.permission.ACCESS_NETWORK_STATE" />
 android:name="android.permission.INTERNET" />
 android:name="android.permission.READ_PHONE_STATE" />

Cordova Gradle wrapper missing in android SDK

When you develop apps with Cordova and Microsoft Visual Studio there are some important facts you should know. I learned these things over 2.5 years of period.

1. Visual Studio tools for apache cordova is Microsoft product  and it's not updated alongside with other tools using by app developers.

• Android SDK - Updating Regularly
• X-Code -  Updating Regularly ( I would recommend not to use windows based tools to publish your app to apple store. please follow this to learn how to publish your app to apple store without using remote debugging tools. https://guntucomputerhacks.blogspot.com/2016/11/visual-studio-2015-cordova-remotebuild.html  )
• Cordova and Plugins - There is a big version gap between microsoft tools for Cordova.

So lets focus on this graddle issue. The latest android version released in 2018 is android 8.0 and 8.1 Oreo . But unfortunately microsoft tools for apache cordova is still supporting Android 7.1 - Nougat.

So in case you have updated your android  SDK and tools you might need to rollback that update to use Microsoft tools to build and release your app to Google Play. 

But again try to  keep Visual Studio for development tasks and always try to native tool set for release purposes. 

    

How to load image on webview from ms-appdata:///local

I recently updated my  Visual Studio 2015  apache cordova project to visual studio 2017. I had few problems with working with angular js otherwise everything worked in windows 10 environment.

But what I noticed was images from ms-appdata:///local folder couldn't load  to img tags. I tried many ways like row html, dynamic tag creation and add url as a base64 data url.

In base64 solution it worked. But I want to get the file itself  as my app was supporting iOS and Android as well.

So after trying hundred things solutions was simple.  You have to set img-src  option to All ( *  ) Content-Security-Policy meta tag of the html file.

Please check following screen shot. You need to add the part with the read border to load image resources from any location.

Reference URL  if you need to see more options.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/default-src

Invalid command line switch for tsc.exe. Visual Studio 2015 - 2017

After I installed visual studio 2017 while I had visual studio 2015 in good working condition my visual studio 2015 cordova Javascript project gave me this error.


Invalid command line switch for tsc.exe


Possible cause for this one is with visual studio 2017, you'll be getting new typescript libraries. So visual studio 2015 is confusing when selecting the highest typescript version automatically.

If your project is javascript based cordova project fix is easy.

1. Open project file in notepad or any editor you using.
2. Edit following section.

* You cant use this fix for typescript based cordova projects.
* If you still see some errors your visual studio 2015 may needs a repair.  Please follow the link bellow regarding repairing vs 2015.

https://guntucomputerhacks.blogspot.com.au/2018/04/current-package-installation-is.html

Package downloading problems - Apache Cordova Tools Visual Studio 2015 - "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\ApacheCordovaTools\packages\vs-tac"

Previous blog post.

https://guntucomputerhacks.blogspot.com.au/2018/04/current-package-installation-is.html



Hi According to bellow post I had to repair vs-tac package in my Cordova Tools for Visual Studio 2015.

But when visual studio was trying to download the package by itself it's giving connection error when connecting npm severs.

You'll see something like this.

request to http://registry.npmjs.org/optimist failed, reason: connect ECONNREFUSED 127.0.0.1:8888


So now lets see the solution.

Solution 1

1. Add C:\Windows\System32 to user's environment variable under "path"  collection.
2. Restart your computer.
3. Uninstall Node JS and install the latest stable version of Node JS.'
4. Go to Tools --> Options --> Tools for Apache Cordova --> Cordova Tools --> Clear Cordova Cache and try to build your project.


If you are able to build your project and deploy the you'll be ok. But if you still getting  following errors then proceed to solution 2.

Error 1 - Current package installation is corrupted. Will cleanup and do a fresh installation. 
Error 2 -  Request to http://registry.npmjs.org/optimist failed, reason: connect ECONNREFUSED 127.0.0.1:8888

Solution 2

1. Open command prompt as administrator.
2. Enter following command. This is to install package manually.

C:\WINDOWS\system32>npm install -g "C:\PROGRAM FILES (X86)\MICROSOFT VISUAL STUDIO 14.0\COMMON7\IDE\EXTENSIONS\APACHECORDOVATOOLS\packages\vs-tac"


If you are successful that means your visual studio 2015 has some problems. You may try run visual studio as Administrator or Repair your visual studio. If you see following error that means you have some problems with NPM network configuration settings or you are not connected to internet.

* Please check your firewall settings before proceed.

Lets follow bellow steps to fix any configuration issues in NPM.

1.  Open C:\Users\\.npmrc file and remove highlighted line if you have proxy.

2. Check the registry URL as well.  Also you can use command line to reset these URLs 

3.  Try running command in step 2. 

Hope this helps.

Current package installation is corrupted. Will cleanup and do a fresh installation. ( Apache Cordova Tools for Visual Studio 2015 )

Cause - According to my research of the issue. Please correct me if I'm wrong.

I had well working apache cordova project with Visual Studio 2015 and it worked without any issue for years. Recently I installed Visual Studio 2017 and did some research of creating a cordova project in higher version. I did not have any issue until I installed Visual Studio 2017 Update pack released on 4th of April 2018. After installing the update pack I had following error message whenever I'm trying to build the project. Even if I create a brand new project I had the same issue.

Current package installation is corrupted. Will cleanup and do a fresh installation. 

So the visual studio tried to repair the tools for cordova. If its successfully did that you will not have any issue. But in my case I had so many updated tools  and Visual Studio 2015 kept giving errors while downloading new npm packages. Specially following package.

C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\ApacheCordovaTools\packages\vs-tac  

I have put the solution in different blog post as these are two separate problems.

Click on following link.

https://guntucomputerhacks.blogspot.com.au/2018/04/package-downloading-problems-apache.html

Cordova platform add android gives the error: “Error: The provided path is not an Android project.”

This is happening when you missing some files in your android platform folder in your cordova project. 

Same thing can happen with the windows projects as well.

Visual Studio or Cordova engine has the capability  of  creating platform directories even if you delete them. But in this case the folder was there and it had some files in it. So the best solutions for this issue is trying one of these steps.

• Clean your project. ( Visual Studio )
• Rebuild your project ( Visual Studio )
• Delete platform directory that you have the issue and build the project.  

Error MSB3073 The command "node "prebuild-81.js"" exited with code 1

This happens when you trying to build your cordova project without all required files. In my project I had delete the index.html file accidentally. So I have two tips to fix this problem.

1. Check for all required files of your cordova project.
2. Remove read-only attribute from your project folder.




 

Cordova file transfer plugin not working windows 10 - Update

Found a new reason for this problem. Every time I had this issue I had open season in fiddler software. Once I closed fiddler the issue was gone.

Apache cordova scroll bar lagging on Android and iOS devices

When its come to developing hybrid mobile applications, Apache Cordova is amazing free  development tool which is supported by most popular IDE's like Microsoft Visual Studio. For more details about the Microsoft Visual Studio tools for apache cordova  please follow the link bellow.

https://www.visualstudio.com/vs/cordova/


In this article I assume that the reader is a cordova developer, and I'm not going to teach you  the basics for that there are millions of articles  you can find in web.

So if you are using jQuery, jQuery UI and row java scripts with apache cordova it's still ok if you developing some demo project or a pretty simple app.

But for  a commercial level project you must use Angular JS or higher angular version ( IONIC Framework - Extended version of cordova ) to get better user experience.

I have no offence towards to jQuery and jQuery UI as they are still great tools. But when it's come to hybrid application development Angular perform lot better than jQuery or jQuery UI.

Angular JS drop-down first options vs jQuery UI.

Hi All

Recently I had an issue with angular-js dropdown  which had ng-repeat to load it's options from a web service. Problem was I always could see an empty option even if I dont need that empty option. I needed to show the first real option to my users.

So I googled and see lot of answers but non of them did not work for me. My case was really rare.
My app was kind of converted app from jquery mobile to angular. So I had some jQuery mobile reference as well. Also I realised that my drop down had jquery mobile styles as well.

So all I did was removing all references to jQuery mobile js and jQuery mobile css. So everything works now.


So the conclusion is 

1. If you have any problems with angular data-bindings please remove jquery mobile references.

Removing click delays in iOS - apache cordova apps

 I started to use Angular JS in cordova for iOS. Every thing was perfect except I experienced a delay in response to ng-click function. In windows and android I did not see that delay.

Finally after we searches I found the solutions  You just need to include the fast click library from bellow url.


 https://github.com/ftlabs/fastclick 

Now if you using winstore-js-compact.js to fixed problems with angular in windows environment you cant refer fast-click library as a direct javascript reference. Instead of that add your script as follows.

       if (cordova.platformId == "ios") {
            /*  Add fast-click.j's content  to here */
       }

The imported project "C:\Program Files (x86)\Microsoft SDKs\TypeScript\build\Microsoft.TypeScript.targets" was not found

All I did  to create above mess is...

1. Installing visual studio 2017 while working on visual studio 2015.
2. And I stopped the visual studio 2017 installation as I thought I would  do it in another day.


So the setup application has removed my installed typescript  plugin.  All you have to do is
install type script for Visual Studio 2015. You can download the setup from bellow link.


https://www.microsoft.com/en-us/download/details.aspx?id=48593

Cordova Camera Plugin Version 2.4.0 throwing error when building for android. - ( Guid to remove and add plugins, Maintaining your cordova project )

Even if I put specifically android in this post title may be other platforms may have this issue. The solution was simple one but I learnt many good practises and tips when I was searching for the solution.

Good practises you should follow when you working on a Cordova project

1. Update java SDK when you have a major update in java.
2. Update android SDK after every month.
3. Use updated version of Node JS.
4. Check and update your cordova version and plugin versions. ( If you using .NET and cant remove excising plugins  please follow safe plugin removal steps in this guide )


Remove plugins safely in .NET cordova project 

Sometimes dot net does not allow you to remove some of cordova plugins. In this case try to remove plugin from config.xml using xml text editor. Make sure once you remove the plugin line you also need to remove the plugin folders . Please refer following screen shots.

Problem with new camera plugin version 2.4.0

To fix this simply you will need to update you cordova-plugin-compat to version 1.1.0 which has the old version number of 1.0.0 . 

cordova-plugin-camera and cordova-plugin-geolocation are depend on compat plugin. So you may need to remvoe those two plugins before you upgrade compat plugin.