Questions tagged [ionic2]

Ionic 2 is the next generation of Ionic, the open source SDK that enables developers to build performant, high-quality mobile apps using familiar web technologies (HTML, CSS, and JavaScript). Ionic 2 is usually paired with Angular (2). Ionic 2 can also be used as a CSS framework but you'll miss out on the powerful gestures, UI animations and more useful things.

What is Ionic 2?

Ionic 3 was released on 7 April 2017 to overtake Ionic 2.

Ionic 2 was the next generation of Ionic's initial release, the open source SDK that enabled developers to build performant, high-quality mobile apps using familiar web technologies (HTML, CSS, and JavaScript).

Ionic 2 was usually paired with Angular (2). Ionic 2 could also be used as a CSS framework but that would void the powerful gestures and UI animations made to mimic native mobile interaction.


How to install and setup a project

Installing Ionic 2 can be done using npm and the ionic cli.

To install Ionic 2 run $ npm install -g ionic cordova. This will immediately install the ionic cli so all your ionic commands are ready to be used.

To setup a project with different :

  • tabs: $ ionic start myApp tabs
  • sidemenu: $ ionic start myApp sidemenu
  • blank: $ ionic start myApp blank

Where tabs will create an application where 4 tabs (positioned at the bottom of the screen are generated), sidemenu will generate a project with a sidemenu (also showing good use of NavController utilities) and blank will generate a project with just a single page.


Maturity/Version

Ionic 2's current version is 3.12.0. The first release of the final version. (as of 8 March, 2017).

how to install the latest version

If you want to create a new project with 3.12.0: $ npm install -g ionic

If you want to update an existing project to 3.12.0:

Update your package.json to match the following dependencies, remove the existing node_modules directory, and then run npm install:

  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic/storage": "2.0.0",
    "ionic-angular": "2.2.0",
    "ionic-native": "2.4.1",
    "ionicons": "3.0.0",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.1.4",
    "typescript": "2.0.9"
  }

Read more at 1


Useful Ionic 2 links

And of course the active community of Stack Overflow.

12143 questions
3
votes
2 answers

How to reduce app size in Ionic2?

I am new to Ionic, recently I developed One app.But my app size was 8mb. How should I reduce app size,and I am not using any Images and plugins also, but it took 8mb size. please help me.
Pavan Reddy
  • 173
  • 1
  • 3
  • 11
3
votes
1 answer

ionic app not allowed to access photo data

i am using this code to save image from dataUrl, it is giving error permission denied. How to save image with this dataUrl in app folder? this.PhotoLibrary.requestAuthorization().then(() => { …
Sahil
  • 553
  • 1
  • 5
  • 23
3
votes
4 answers

How to set default value ion-select item?

I need to set default value to ion-select item. The ion-select above contain list of places, After choosing a place I save it into a localStorage. What I need this localStorage be the default value of the ion-select,like this: When the page is…
Khaled Ramadan
  • 812
  • 1
  • 10
  • 26
3
votes
1 answer

Add .so files to Cordova Plugin

I have developed a Cordova Plugin for my Ionic app, which throws the following error when accessed: java.lang.UnstatisfiedLinkError: dalvik.system.PathClassLoader [DexPathList [[zip file "/data/app/io.ionic.starter-2/base.apk"], …
Alexandru Pufan
  • 1,842
  • 3
  • 26
  • 44
3
votes
3 answers

ToastController custom position in ionic

We are creating Ionic-Native mobile app.We are using ToastController (ToastController).We used position: 'top' .But it overlaps to status bar.So we want custom position .We tried like this let Errortoast = this.toastCtrl.create({ message:…
Pavan Alapati
  • 635
  • 2
  • 8
  • 21
3
votes
3 answers

Base64 plugin not working

The plugin was working fine until recently I started facing problems with it, the code does not execute neither does it throw an error. I want to capture images from camera and send the base64 string to the server, which was easy since I could…
Tejas K
  • 682
  • 11
  • 28
3
votes
0 answers

unable to drag drop with dragula on ios ionic2

I have implemented drag drop using dragula [ng2-dragula]. It works perfectly in browser, however when I run this app on iphone it doesn't work.
codeomnitrix
  • 4,179
  • 19
  • 66
  • 102
3
votes
2 answers

Ionic onfocusout event equivalent

In Ionic v3 there is an equivalent of onfocus called (ionFocus). For example to check on focus for an ion button it will be: I was wondering if there was an equivalent for…
Yusof Bandar
  • 169
  • 1
  • 4
  • 9
3
votes
1 answer

Socket.io : ERR_CONNECTION_REFUSED

I have been breaking my head on this for a while and not able to get a solution to this error ERR_CONNECTION_REFUSED. I am sure that I don't have any firewall blocking the port, If I use http://localhost:8080 I get a response. What baffles me is…
Arun-
  • 846
  • 3
  • 22
  • 41
3
votes
1 answer

How to sort Firebase observable list based on the duplicated value using RXJS operators

I'm using the rxjs operators to handle the firebase observable lists. I need to sort distinct list based on the duplicated value (certain id). this is my code: this.places$ .flatMap((x)=>{ console.log(x) return x; }) …
Khaled Ramadan
  • 812
  • 1
  • 10
  • 26
3
votes
1 answer

Wordpress API: Get posts from private wordpress.com site

I am building a mobile app, and I want to use the wordpress.com api to get posts from my wordpress.com site. Normally, you can follow the instructions here: https://developer.wordpress.com/docs/api/getting-started/. However, in this case, the…
3
votes
2 answers

Ionic globally call function after Modal present

I want to pop an alert box every-time after a modal is presented. I know that I can do something like this modal.present().then(()=>alert("Modal presented")) However, I have more than 30 pages, which have the modalController. It is inefficient to…
VICTOR
  • 1,894
  • 5
  • 25
  • 54
3
votes
0 answers

How to use Strophe.js in ionic 2 for chat with XMPP?

I want to create a chat module in ionic platform then i got example from here, but this solution looks older and its using ionic 1 , using $scope and and code is written in .js files which is including below mentioned files...
gaurang
  • 2,217
  • 2
  • 22
  • 44
3
votes
0 answers

Ionic 2 Print function to POS printer using USB

I need to develop the ionic android app which needs to be integrate with POS printer via USB. I was able to do the same with Bluetooth but when it come to USB connection i am totally zero on this. I hope some one can help me out. I tried with…
keerthi.rb
  • 91
  • 3
  • 9
3
votes
1 answer

Setting default requests header from ionic storage using http interceptor - Angular 5 - Ionic 3

I'm trying to set a token value in all request headers using angular 5 new HTTP client. Below is my code: import {Injectable} from '@angular/core'; import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http'; import…
nishil bhave
  • 582
  • 1
  • 5
  • 17