Ionic – Web page unreachable

When running app on Android with live-reload, it fails to load the page: ERR_ADDRESS_UNREACHABLE

Simply disconnect the wifi of the smartphone and reconnect.

Advertisements

Ionic – Manually build an App for Android, like AppFlow does on Ionic Package

When using Ionic Package to build app on the cloud, the executed command is not as trivial as

ionic cordova build android --prod --release

To mimic the behavior performed by Ionic Package, follow those steps:

    1. Add platform Android if needed
    2. ng build –configuration=production –prod –source-map
    3. Edit www/index.html and add this line in the HEAD section
      1. <script src="cordova.js"></script
    4. cordova build android
      1. Add those flags if building for production
        1. –release — –keystore=android.keystore –storePassword=***** –alias=key0_eventflow –password=*****

Why would you do that ? Well, we observed that the build is not exactly the same as on our local machines… so it might be useful.

With this kind of build, you can debug the app with Chrome adb inspect.

Ionic – No provider for t! …

$ ionic info

Ionic:

ionic (Ionic CLI) : 4.10.2 (/home/tanguy/.nvm/versions/node/v8.11.3/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/angular-toolkit : 1.3.0

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.4, browser 5.0.4, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 19 other plugins)

System:

Android SDK Tools : 26.1.1 (/home/tanguy/Softwares/android-sdk/Sdk)
NodeJS : v8.11.3 (/home/tanguy/.nvm/versions/node/v8.11.3/bin/node)
npm : 6.5.0
OS : Linux 4.15

 

I was building for production, on Android a project using Push native plugin.

I encountered an error “No provider for t! white screen”

The problem was caused because I forgot to add Push to the providers of my app.module.ts and the documentation say nothing about it on the plugin page.

However, it was stated here: https://ionicframework.com/docs/native/#angular

Import the plugin in a @NgModule and add it to the list of Providers. For Angular, the import path should end with /ngx. Angular’s change detection is automatically handled.

Ionic – PhoneGap – Cordova – Read and write a profile file locally on Android and iOS

Write and read a local file using Cordova on iOS and Android is pretty much easy but I lost a lot of time trying to find a good example of this.

So here is a little snippet to call wherever you want after the deviceready event has been triggered.

You need to install the File plugin

cordova plugin add org.apache.cordova.file

It uses the $rootScope

See the complete ionic project here

$rootScope.profileFileName = "profile.json";;
$rootScope.profile = { //default profile
            firstName: "Clark",
            lastName: "Kent",
            imageURL: "img/default.png";
        };
$rootScope.fileEntry = null;
$rootScope.fileSystem = null;

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, failToGetFileSystem);
//On iOS, LocalFileSystem.PERSISTENT is the Documents folder under the private app folder
//On Android, we are in the root folder of the sdcard...
 
function failToGetFileSystem() {
    alert("fail to get file system");
}
 
function gotFS(fs) {
    $rootScope.fileSystem = fs; //keep the file system accessible
     //Here we try to get the file. The exclusive attribute sets to true will cause the method to fail if the file already exists. So I now that I should try to read the profile instead of writting the default profile.
     fs.root.getFile($rootScope.profileFileName, { create: true, exclusive: true },
                            gotFileEntryForFirstTime, failToGetExclusiveFileEntry);
}
 
/**
  * File didn't exist and has just been created so we need to write the profile one time at least.
  */
function gotFileEntryForFirstTime(fileEntry) {
      alert("got file entry for first time");
      alert("url : " + fileEntry.toURL());
      $rootScope.fileEntry = fileEntry;
      $rootScope.saveProfile(function () { alert("profile file written"); }, function () { alert("profile file FAIL written"); });
}
 
$rootScope.saveProfile = function (successFunction, errorFunction) {
     if (!$rootScope.fileEntry) {
           alert("no file to write in");
           return;
      }
      var contentToWrite = angular.toJson($rootScope.profile); //convert profile to JSON
      $rootScope.fileEntry.createWriter(function (fileWriter) {
          fileWriter.onwriteend = successFunction;
          fileWriter.onerror = errorFunction;

          fileWriter.write(contentToWrite);
      },
       errorFunction);
}
 
function failToGetExclusiveFileEntry() {
   alert("file maybe exists ?");
   $rootScope.fileSystem.root.getFile($rootScope.profileFileName, { create: true, exclusive: false },
                   gotFileEntry, failToGetFileEntry);
}
 
function failToGetFileEntry(error) {
    alert("fail to get file entry");
}
 
/**
  * Got file entry but it already exists so we need to read it.
  */
function gotFileEntry(fileEntry) {
   alert("got file entry");
   alert(fileEntry.toURL());
   $rootScope.fileEntry = fileEntry;
   readProfile();
}
 
function readProfile() {
   if (!$rootScope.fileEntry) {
     alert("no file to read");
     return;
   }
$rootScope.fileEntry.file(function (profileFile) {
  var reader = new FileReader();
  reader.onloadend = function (evt) {
     alert("read!");
     alert(evt.target.result);
     if (typeof this.result == 'string') {
       $rootScope.profile = JSON.parse(evt.target.result);
     }
     else {
        $rootScope.profile = evt.target.result;
     }
  }
   reader.readAsText(profileFile);
  }, failToReadProfileFile);
}
 
function failToReadProfileFile(error) {
    alert("fail to readprofile file");
}