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
34
votes
9 answers

How to set default selected value of ion-option?

I'm using Ionic v2 and I can not set the selected value when showing the page. {{form.name}} I've tried…
Perrier
  • 2,753
  • 5
  • 33
  • 53
34
votes
9 answers

whats the correct way of inserting label in an Ionic FAB list

i want to insert a label so that matches every FAB icon on the Fab list whats the correct way of doing it. the way i did it it doesn't work
Muzi Jack
  • 788
  • 1
  • 7
  • 20
34
votes
5 answers

ionic 2 error cordova not available

I am trying to use the cordova GooglePlus plugin in a new ionic 2 project (latest ionic2 version) but I always run into errors regarding cordova. The plugin is properly installed and shows up in the plugin folder. One approach I tried is…
hholtij
  • 2,906
  • 6
  • 27
  • 42
33
votes
5 answers

background geolocation ionic 3 not updating

Background geolocation plugin for ionic isn't updating. The functionality I want is every 30 seconds ask the plugin for a lat lng value if available. The issue is, it's only giving me the values initially and then the background stops. The…
userlkjsflkdsvm
  • 961
  • 1
  • 21
  • 53
33
votes
2 answers

Ionic 3 can't use ion-* components inside my custom components

I have recently upgraded to Ionic 3 from Ionic 2, and I created components.module.ts file and declared and exported each custom component I have, and then imported this single file in every page module I have. So now the problem is that I can't use…
Eliran Pe'er
  • 2,569
  • 3
  • 22
  • 33
32
votes
3 answers

Ionic - Error: Cannot find module 'android-versions'

When a try to run ionic run android --device I'm getting an error of module: Error: Cannot find module 'android-versions' Versions: java -version java version "1.8.0_144" Android studio Version 2.3.3 ionic -v 2.2.1 cordova -v 6.5.0
ehh
  • 1,659
  • 2
  • 13
  • 11
32
votes
10 answers

Ionic 2 disable scroll

I've tried several methods to disable scroll, including using CSS position: fixed, attribute overflow-scroll="false" and etc, but all methods failed. When I swipe down, the buttons will go up and while I swipe up the buttons will go down, like…
Reo Lim
  • 429
  • 1
  • 4
  • 8
32
votes
3 answers

How to use angular 2 service with Ionic 2?

I am new to Ionic 2. I read in angular 2 docs, that service needs to be injected while bootstrap application. But could not see any bootstrap thing while going through Ionic 2 tutorial. Any help is highly appreciated.
VISHAL DAGA
  • 4,132
  • 10
  • 47
  • 53
31
votes
3 answers

ionViewWillEnter vs ionViewDidEnter

When we would not want to reinitiate a task that is already cache, there is no doubt that we will be using ionDidLoad. Now, let's make assumption that we need to do a task each and every time when we are entering a view, how do we choose between…
stackdisplay
  • 1,949
  • 6
  • 29
  • 46
30
votes
3 answers

ngOnInit vs ionViewDidLoad in ionic 2 or ionic 2+

Which one will I use for initializing data and why? ngOnInit() { this.type = 'category'; this.getData(); this.setData(); } ionViewDidLoad() { this.type = 'category'; this.getData(); this.setData(); }
saif
  • 487
  • 1
  • 7
  • 19
30
votes
3 answers

using external JS libraries in my angular 2 project

I need to use this JS library in my angular 2 project this question may be duplicate with me , but no answer worked for me I tried to include the library as script tag in my index.html page It always does not see it…
Ahmed Mohsen
  • 433
  • 1
  • 6
  • 19
30
votes
9 answers

IONIC 2 templates

Does anyone know where I can find all the available Ionic 2 startup templates? Currently I know ionic provides tutorial (seems a replacement to sidemenu in v1), tabs, blank as the default. Is there any custom templates I can use with ionic start…
George Huang
  • 2,504
  • 5
  • 25
  • 47
30
votes
10 answers

How can I disable or hide the scrollbar within an Ionic 2

I have an Angular 2 app wrapped in Ionic 2. I'm using , and within each tab is an . The content in this area needs to be scrollable, but Ionic 2 adds a scrollbar that I don't want displayed. It appears that, when compiled, an…
vaer-k
  • 10,923
  • 11
  • 42
  • 59
30
votes
4 answers

Ionic 2 - global NavBar for the app

In Ionic 1, we have the ability to define an above an , which serves as a generic nav bar for the entire app and we could turn it off on a per-view basis (using ionNavView's hideNavBar=true|false. It appears in Ionic 2 we…
keldar
  • 6,152
  • 10
  • 52
  • 82
29
votes
11 answers

Ionic - Error: Uncaught (in promise): removeView was not found

My Ionic app was working fine and I haven't done anything to it but suddenly I am getting this error and I don't know why. "Error: Uncaught (in promise): removeView was not found
Samir Boulos
  • 443
  • 1
  • 7
  • 14