node:events:491 capacitor throw er

The error message "node:events:491 capacitor throw er" is a generic error message that may occur in different contexts.

In my case, I resolved it by moving the Android Studio folder to /usr/local directory.  It is clearly mentioned in the docs that we should set CAPACITOR_ANDROID_STUDIO_PATH as a path variable for the Android studio location.

But even I was setting this path variable ionic cap build android command was not able to find the android studio location and was failing.

So only trick which worked for me is to completely move the Android studio folder in /usr/local directory. 

Ionic 4 show splash screen

Install the Cordova and Ionic Native plugins:

ionic cordova plugin add cordova-plugin-splashscreen

npm install --save @ionic-native/splash-screen@beta

Add this plugin to your app's module

import { SplashScreen } from '@ionic-native/splash-screen/ngx';

providers: [
     NativeStorage,
     StatusBar,
     SplashScreen,
     SplashScreen
]

Add below code in your component:

import { SplashScreen } from '@ionic-native/splash-screen/ngx';

constructor(constructor(private splashScreen: SplashScreen) {

             ... 

              this.splashScreen.show();

}

To hide this Splash screen you can use below code:

this.splashScreen.hide();

Ionic 4 Admob tutorial with screenshots

Install the Cordova and Ionic Native plugins:

ionic cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="ca-pub-4480115196234187"

npm install --save @ionic-native/admob-free@beta

Add this plugin to your app's module:

import { AdMobFree } from '@ionic-native/admob-free';

providers: [

    StatusBar,

    SplashScreen,

    AdMobFree,

    {provide: ErrorHandler, useClass: IonicErrorHandler}

]

Now write the code to show banner ad and Interstitial Ad in your component:

import { AdMobFree, AdMobFreeBannerConfig, AdMobFreeInterstitialConfig } from '@ionic-native/admob-free';

constructor(public navCtrl: NavController,

              private admobFree: AdMobFree) {

    

     this.showBannerAd();

     this.showinterstitialAd();

}

showBannerAd() {

    const bannerConfig: AdMobFreeBannerConfig = {

      // add your config here

      // for the sake of this example we will just use the test config

      isTesting: false,

      autoShow: true

    };

    this.admobFree.banner.config(bannerConfig);

    this.admobFree.banner.prepare().then(() => {

      // banner Ad is ready

      // if we set autoShow to false, then we will need to call the show method here

    }).catch(e => console.log(e));

  }

  showinterstitialAd() {

    const interstitialConfig: AdMobFreeInterstitialConfig = {

      // add your config here

      // for the sake of this example we will just use the test config

      isTesting: false,

      autoShow: true

    };

    this.admobFree.interstitial.config(interstitialConfig);

    this.admobFree.interstitial.prepare().then(() => {

      // banner Ad is ready

      // if we set autoShow to false, then we will need to call the show method here

    }).catch(e => console.log(e));

  }

After that once you build and install the app in real android devivce you will be able to see ad as below:

Banner Ad:

Interstitial Ad:

ionic side menu logo in header

Use below code in main template html file.

<ion-side-menus expose-aside-when="large" enable-menu-with-back-views="true">
        <ion-pane ion-side-menu-content>
        </ion-pane>
      <ion-side-menu side="left">
            <header class="bar bar-header bar-positive">
                <div>
                      <img class="margin-top:4px; float:left" src="images/logo.png"/>
                </div>
            </header>
            <ion-content class="has-header">
           </ion-content>
        </ion-side-menu>
</ion-side-menus>

and don't forget to write attribute "has-header" in your child templates files like:

<ion-view class="bubble-background" hide-back-button="true">
    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon " ></button>
      </ion-nav-buttons>
    <ion-content class="has-header has-footer">
     </ion-content>
</ion-view>

ionic footer bar

<ion-footer-bar class="bottom-banner bar-positive">
            <h1 class="title">
                   This is the footer of ionic app
            </h1>
</ion-footer-bar>


In the side menu template above code should be use like:

<ion-side-menus expose-aside-when="large" enable-menu-with-back-views="true">
        <ion-pane ion-side-menu-content>
            <ion-nav-bar class="bar-positive nav-title-slide-ios7">
                <ion-nav-buttons side="left">
                    <button class="button button-icon button-clear ion-navicon" toggle="left"></button>
                </ion-nav-buttons>
   
                <ion-nav-back-button class="button-clear">
                    <i class="icon ion-chevron-left"></i>
                </ion-nav-back-button>
   
            </ion-nav-bar>
            <ion-nav-view name="main" animation="slide-left-right">
           </ion-nav-view>
            <ion-footer-bar class="bottom-banner bar-positive">
                <h1 class="title">
                      This is the footer of ionic app
                </h1>
            </ion-footer-bar>
        </ion-pane>

       <ion-side-menu side="left">
            <header class="bar bar-header bar-positive">
             </header>
            <ion-content class="has-header">
       </ion-content>
        </ion-side-menu>
       
    </ion-side-menus>


And don't forget to user attribute "has-footer" in your child templates/views like:

<ion-content class="has-header has-footer">
</ion-content>

Restart Ionic application programmatically

Please try below code, Its working for me:

         $state.go("your_main_state_name_here");
          $ionicHistory.clearHistory();
          setTimeout(function (){
                 $window.location.reload(true);
          }, 100);

Cordova plugin commands

Add a plugin in app:

Cordova plugin add <plugin>

Search a plugin:

Cordova plugin search <splashscreen>

See the list of plugins added in your app:

Cordova plugin list

Run ionic

​​

​​

export ANDROID_HOME="$HOME/install/adt-bundle-linux-x86_64-20140702/sdk"
 

export PATH="$HOME/install/adt-bundle-linux-x86_64-20140702/sdk/tools:$ANDROID_HOME/platform_tools:$PATH"

Don't run below commands with sudo

ionic start myIonicApp tabs

​​
cd myIonicApp
ionic platform add android
ionic build android
ionic emulate android

Ionic examples:
http://codepen.io/ionic/public-list/

Run npm update -g ionic to update

Open ionic app in browser:

ionic serve

​​

Open ionic app in browser on specific port

​​

ionic serve 8080 8100

Enable cookies in your ionic app

Go to

/node-v0.10.29/ionicnew/platforms/android/src/com/ionicframework/< you package name>

then open CordovaApp.java

insert below line of code:
​
CookieManager.setAcceptFileSchemeCookies(true);      


in ​onCreate() method like:

​super.onCreate(

savedInstanceState);

super.init();

​​

CookieManager.setAcceptFileSchemeCookies(true);       

// Set by <content src="index.html" /> in config.xml

super.setIntegerProperty("splashscreen", R.drawable.screen);

super.loadUrl(Config.getStartUrl());

 

and import following package

 

​import android.webkit.CookieManager;

​ Open ionic app in browser on specific port

​ionic serve 8080 8100

Why Ionic is best for hybrid mobile apps development?

Ionic is an UI framework which is build to create hybrid mobile apps based on Html5.

Unlike a responsive framework, Ionic is packed with very native-styled mobile UI elements and layouts that you get with a native SDK on iOS or Android. Also, Ionic is built on the top of popular AngularJS framework from Google to utilize AngularJS power.

Why Ionic

Build apps with the web platform. Using HTML, CSS, and JavaScript, you can make
hybrid apps that behave like native like mobile apps.

Built with AngularJS. For people familiar with AngularJS (or even another JavaScript
framework like Ember), Ionic is a perfect choice. Ionic is built alongside Angular, which
allows you access to all of Angular’s features as well as any of the many thousands of
Angular modules for additional features. Ionic also uses the popular ui.router module
for navigation, because Angular’s default routing module lacks some features.

Uses modern techniques. Ionic was designed to work with modern CSS3 features, like
animations. Mobile browsers generally have better support for the latest web platform
specifications, which allows you to use those features as well.

Powerful CLI tools. With the Ionic command line tool, you can quickly manage
development tasks such as previewing the app in a browser, emulating the app, or deploying an app to a connected device. It helps with setting up and starting a project
as well.

Ionic ecosystem. Ionic also provides a rich ecosystem of features that make
development much easier. The Ionic Creator service allows you to use a drag and drop
interface to design and export an app. An upcoming service for remotely building and
deploying apps is also in development. In short, Ionic is all about creating not just the
basic tools for making hybrid apps but also the development tools that will help you
create them efficiently.

 

Must have plugins for hybrid app

org.apache.cordova.network-information

Using this you can identify the network/internet information of device. Very useful to identify online/offline mode.

​​

org.apache.cordova.inappbrowser

Using this plugin you can open external links in new browser window in your app. So that by pressing back button on your device, will show your app again.

​​

​​
org.apache.cordova.splashscreen

You can show splash screen to user at the time of app start.

com.phonegap.plugins.pushplugin

Your application can receive push notifications.

org.apache.cordova.dialogs


Show alert boxes like native apps.

https://github.com/brodysoft/Cordova-SQLitePlugin


This is sqlite plugin. Using this you can store offline data in your hybrid app.

nl.x-services.plugins.toast

This one used to show a toast message. Toast message hides after sometime automatically.

Top hybrid mobile framework

IONIC

The best framework to create hybrid apps in my opinion. I am using this to create hybrid apps.

Great examples are provide by IONIC community. There are separate examples available which you need to develop a app.

Good app structure. You can separate your html views, js controlles and js services.

Its worked on angularJS which is a plus point for every web developer. These days angularJS used in every SPA (Single page application).

No new technology required to work on ionic. Only we need knowledge of html5, css and javascript.

IONIC is one of the most promising HTML 5 mobile application frameworks. Built using SASS, it provides many UI components to help develop rich and interactive apps. It uses the JavaScript MVVM framework, AngularJS to power apps. Two-way data binding, interaction with backend services and APIs makes AngularJS a mobile developer’s common choice. With the coming release of AngularJS 2.0, focused on mobile, it’s sure to gain even more popularity.
The team at IONIC will soon be introducing an easier way to create IONIC apps with IONIC creator. This will be released soon and will have drag and drop functionality to get started with app development in minutes.


Mobile Angular UI

Mobile Angular UI is an HTML 5 framework which uses bootstrap 3 and AngularJS to create interactive mobile apps.
The main features of Mobile AngularUI include:

• Bootstrap 3
• AngularJS
• Bootstrap 3 mobile components such as switches, overlays and sidebars which are missing in normal bootstrap.
• AngularJS modules such as angular-route, angular-touch and angular-animate

Responsive media queries are stripped out of bootstrap as separate files, you only need to include what you need. Mobile Angular UI doesn’t have any jQuery dependencies, all you need are some AngularJS directives to create awesome mobile user experiences.
Take a look at the Mobile Angular UI demo page to see it in action. If you want to dig deeper, I would recommend reading our article on getting started with Mobile Angular UI.

Intel XDK

Intel XDK is a cross platform application tool developed by Intel. Getting started with Intel XDK is easy, all you need is to download their application which is free and available for Linux, Windows and Mac. It provides a number of templates to get started and supports a number of UI frameworks such as Twitter bootstrap, jQuery Mobile and Topcoat.
Intel XDK provides a live preview on the connected device whilst you are developing along side many other useful tools.
On a personal note, I think development using Intel XDK was the easiest. It uses a drag and drop approach, although it does create a lot of unnecessary code.

Appcelerator Titanium

Appcelerator’s Titanium is an open source mobile application framework that provides an environment to create native apps for several mobile platforms
Titanium is a complete solution for creating hybrid mobile apps with all you need in one place. To get started with Titanium download Titanium studio. The Titanium SDK is equipped with a number of mobile platform APIs and Cloud service to use as an app backend. It comes with platform independent APIs which makes it easier to access phone hardware.
Titanium uses Alloy, a MVC framework to enable rapid development of mobile apps. Modules created using Alloy are easy to reuse across different apps, hence significantly reducing the development time and the lines of code.

Sencha Touch

Sencha Touch is an HTML 5 mobile app framework for creating apps for several platforms including iOS, Android and Blackberry. It has been in existence for some years now and is popular among hybrid mobile application developers.
Sencha Touch scores highly against it’s competitors by providing a native look and feel across all of the platforms it supports.
Getting started with Sencha Touch isn’t that difficult but in order to get the best out of Sencha Touch, one needs to invest a considerable amount of time.

Kendo UI

Telerik’s Kendo UI is an HTML 5 framework for creating cross platform mobile applications. Kendo UI relies heavily on jQuery and has a number of jQuery based widgets.
Learning Kendo UI is not difficult, developers familiar with jQuery will find Kendo UI easy to learn. Kendo UI has open sourced most of Kendo UI’s toolset and JavaScript framework features. However most of the commonly used widgets are still under a commercial license.

PhoneGap

PhoneGap is the odd one out in this list as it’s not a framework for creating an app, but for packaging and releasing an app. PhoneGap is based on the open source Cordova and is the commercial version owned by Adobe. With a dedicated support team, PhoneGap is popular amongst many mobile developers.
You can use any choice of JavaScript or UI frameworks to get started with PhoneGap. jQuery Mobile alongside KnockOut.js or AngularJS is a nice combination. Once you are done with your code, PhoneGap takes it from there and wraps it based on the intended platform. Applications built using PhoneGap use a web view to render their content. PhoneGap has a minimal set of web APIs to access phone hardware features and it’s possible to write custom plugins to suit requirements.
 
 
 

Why hybrid apps?

1. You can develop hybrid apps using your simple web skills: Html5, css, Javascript.
2. No separate budget required for iOS and Android.
3. Development cost is reasonable compared to native apps.
4. Same code base can be used for web application.
5. You can test them in browser like google chrome/Safari.
6. Large community to support.

Ionic width classes

CSS Width Class      CSS Offset Class        Width
.col-10                             .col-offset-10                   10%
.col-20                             .col-offset-20                   20%
.col-25                             .col-offset-25                   25%
.col-33                             .col-offset-33                   33.3%
.col-50                             .col-offset-50                   50%
.col-67                             .col-offset-67                   66.6%
.col-75                             .col-offset-75                   75%
.col-80                             .col-offset-80                   80%
.col-90                             .col-offset-90                   90%

Ionic pass more than one argument in go()

$state.go("main.user", {id:10, type:'Manager'});

Ionic disable back on particular view

Ionic disable back on particular view:

$ionicHistory.nextViewOptions({
     disableAnimate: true,
     disableBack: true
});

Ionic modal set backdrop click false

Use below code:

$ionicModal.fromTemplateUrl('views/login-page.html', {
        scope: $scope,
        backdropClickToClose: false
    }).then(function(modal) {
        $rootScope.modal = modal;
 });

Ionic clear history

To clear history in ionic use

$ionicHistory.clearHistory();

Initialize ionic on device ready

1. Remove ng-app attribute from <HTML> tag.

2. Add below code in your index.html:

<script>
     // Wait for Cordova to load
     document.addEventListener("deviceready", onDeviceReady, false);

     // Cordova is ready
     function onDeviceReady() {
          app.services = angular.module('services', ['ngResource']);
          angular.bootstrap(document, ['ionicApp']);
     }
</script>