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
29
votes
1 answer

Merging http observables using forkjoin

I'm trying to avoid nested observables by using forkjoin. The current (nested) version looks like this: this.http.get('https://testdb1.firebaseio.com/.json').map(res => res.json()).subscribe(data_changes => { …
Martin
  • 1,060
  • 2
  • 16
  • 28
29
votes
5 answers

ionic 2: How to make text selectable?

I want users to be able to select text content (in ionic 2) so that they can copy it and paste it elsewhere, but it seems that text selection has been disabled. Users can select text that is in an input or a textarea, but I want them to be able to…
Manspof
  • 598
  • 26
  • 81
  • 173
28
votes
6 answers

What causes this Android APK Upload error: "Non-upgradable APK"

I have an Android APK in the Google Play store with an Target SDK of 23. I have released a new version (same target SDK) and Google shows me this error: If I proceed (I learnt the hard way) then none of the current users can upgrade to this version.…
Rodney
  • 5,417
  • 7
  • 54
  • 98
28
votes
2 answers

Enable pinch to zoom inside iframe - Ionic 2 AngularJS 2

I added zooming="true" inside the tag but when the page is loaded I cannot zoom to increase or decrease the view. I've also set webkitallowfullscreen mozallowfullscreen allowfullscreen to scale the page in order to fit the device screen but nothing…
Pier
  • 794
  • 1
  • 12
  • 27
28
votes
5 answers

How to extend default webpack config in Ionic v2

I'd like to extend the default webpack config of ionic. Specifically, I'd like to add an alias for resolving modules so that I can import modules by their absolute path, rather than a relative one: Instead of importing modules like this: import {…
qzr
  • 722
  • 1
  • 6
  • 13
27
votes
3 answers

How to not dismiss the alert box when clicking outside of it on Ionic

I am building a ionic 2 app and I am using the following component http://ionicframework.com/docs/components/#alert import { AlertController } from 'ionic-angular'; export class MyPage { constructor(public alertCtrl: AlertController) { } …
hopper
  • 4,230
  • 8
  • 36
  • 49
27
votes
3 answers

Ionic - Google places and Autocomplete location

I have work on the project on Ionic 2 and I have implemented the map so far, but I can not get out of that point. I needed to be shown the way I should go in order to add Google Place and Autocomplete to the project. What can I do? HTML:
Marcio
  • 1,685
  • 3
  • 24
  • 39
27
votes
4 answers

White screen after splashscreen, Ionic2, android device

I am currently developing Ionic2 app. I face a problem that after Splash screen, there is a white screen for 6-7 seconds, before app home screen. I tried some googling but nothing works. My last attempt to solve is hideSplashScreen() { …
raju
  • 6,448
  • 24
  • 80
  • 163
26
votes
2 answers

Using Slice Pipe with variable parameters in *ngFor

Using the Angular2 pipe slice I can do something like this to only show the first five elements of my items.
Jane Dawson
  • 693
  • 2
  • 7
  • 19
26
votes
7 answers

Ionic2 Error: "No provider for Storage"

After reading everything I could find, and failing, I must ask here: I am trying to use ionic2's Storage, just like the doc tells me to, doc: https://ionicframework.com/docs/storage/ here is my Code: app-module.ts import { BrowserModule } from…
Gulzar
  • 23,452
  • 27
  • 113
  • 201
26
votes
1 answer

Google OAuth Client with Angular/Ionic: How do I find the redirect_uri?

I have an Ionic2 app that I would like to add GooglePlus Authentication to. I get the following error: As far as I understand, it's because I have not set up a redirect_uri. Question What redirect_uri (Authorized redirect URIs) should I use for an…
Richard
  • 8,193
  • 28
  • 107
  • 228
26
votes
3 answers

build dev failed: Cannot set property 'fileSystem' of null

I am trying to run an Ionic 2 Application. I am getting following error on running ionic serve build dev failed: Cannot set property 'fileSystem' of null The complete log is as below: λ ionic serve …
Yuvraj Patil
  • 7,944
  • 5
  • 56
  • 56
26
votes
5 answers

How to pass async variable in template (action) function?

I need to pass async variable to the function. Something like this:
And of course I have an error. Parser Error: Cannot have a pipe in an action expression. Maybe there is a way to…
AlexZvl
  • 2,092
  • 4
  • 18
  • 32
26
votes
2 answers

Error TS4053: Return type of public method from exported class has or is using name ‘Observable’

i'm trying to build app with ionic 2 & angular 2, i get this error while i try to run my app. i build another project to check and the same problem, i really confused on this problem. this is my service code import { Injectable } from…
Manspof
  • 598
  • 26
  • 81
  • 173
26
votes
6 answers

Disable swipe to view sidemenu ionic 2

I'm using a sidemenu ionic 2. when I swipe this page from left to right the side menu slides out i need to disable sidemenu swipe in particular page. app.html
sridharan
  • 2,011
  • 10
  • 36
  • 61