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
60
votes
3 answers

Cannot find namespace NodeJS when using NodeJS.Timer in Ionic 2

I am attempting to use some code I found on https://github.com/bevacqua/dragula/issues/289#issuecomment-277143172 to my Ionic project. When I run the code I get an error Cannot find namespace 'NodeJS' and the error refers to touchTimeout:…
Chris
  • 4,672
  • 13
  • 52
  • 93
57
votes
11 answers

Add Custom Icon in Ionic 2

I am using Ionic 2 for developing my App. I want to use my custom icons in my app like we use ionic 2 icons using tag. Eg: How can i achieve this? Is there any recommended way to doing this?
Prerak Tiwari
  • 3,436
  • 4
  • 34
  • 64
55
votes
6 answers

Ionic 2: Cordova is not available. Make sure to include cordova.js or run in a device/simulator (running in emulator)

I just set up my first ionic 2 app (I've used ionic 1 fairly extensively). I'm trying to use the ionic-native camera preview plugin. The setup was pretty straight forward: npm install -g ionic cordova ionic start timesnap --v2 ionic platform add…
Lenny
  • 5,663
  • 2
  • 19
  • 27
54
votes
2 answers

How to get device width and height in Ionic using TypeScript?

I am trying to get device width and height in ionic 2 using typescript. In previous version of ionic 2 I used, window.screen.width window.screen.height but in newer version this is not working. How it is work with Type Script + ionic 2?
Jignesh M. Mehta
  • 904
  • 2
  • 12
  • 27
48
votes
4 answers

Correct way to use image assets in Ionic 2

What’s the best practice for image assets in Ionic 2? I have a bunch of SVGs I want to use as non-system icons. I found some older tips on using Gulp but it seems Ionic team has decided on Rollup as the build tool of choice, no docs on this so…
Aen Tan
  • 3,305
  • 6
  • 32
  • 52
47
votes
8 answers

Uncaught (in promise): cordova_not_available in Ionic 2

When I'm running my Ionic app with ionic serve -l command, get following error message: Runtime Error Uncaught (in promise): cordova_not_available Stack Error: Uncaught (in promise): cordova_not_available at v…
Soheil Alizadeh
  • 2,936
  • 11
  • 29
  • 56
47
votes
10 answers

Set focus on an input with Ionic 2

SOLVED : import { Component, ViewChild} from '@angular/core'; import { Keyboard } from 'ionic-native'; @Component({ templateUrl: 'build/pages/home/home.html' }) export class HomePage { @ViewChild('input') myInput ; constructor() {} …
Thomas
  • 1,509
  • 4
  • 15
  • 25
44
votes
5 answers

Call a function every 10 seconds Angular2

I'm trying to create a Timer that calls an API call every 10 seconds, I'm using setTimeOut but the thing is that it becomes an infinite loop, and even if I push to another page it keeps joining the if condition. Example : I call this on a method to…
StuartDTO
  • 783
  • 7
  • 26
  • 72
44
votes
5 answers

Ionic 2 - Disabling back button for a specific view

So I'm messing around a bit with Ionic 2, and I want to know how to disable the back button for a specific view. What I'm doing is this.nav.push(SomePage); It works, but the NavController automatically puts a back button there for me. How do I…
naiveai
  • 590
  • 2
  • 14
  • 42
42
votes
8 answers

How to fix the connection to the server was unsuccessful. (file ///android_asset/www/index.html)

I've added material icons to ionic2 app , and since then I get error ""The connection to the server was unsuccessful. (file:///android_asset/www/index.html)"" although the css and fonts file of MaterialIcons are in the assets folder (I've install…
Haddar Macdasi
  • 3,477
  • 8
  • 37
  • 59
42
votes
2 answers

Swiper slides - showing end/start of previous/next slides like Airbnb Slider?

Above is the slider from Airbnb. Is there a way to get a similar effect with Swiper? For the first slide, there is a blank space on the left and start of the next slide. For the middle slide, there is the start and end of previous and next slides.…
Dee
  • 909
  • 3
  • 10
  • 18
42
votes
5 answers

Ionic 2 passing tabs NavParams to tab

I'm starting out on creating my first app using Ionic 2 and through a lot of trial and error have got to a point where no number of Google searching can find anything to help. I'm trying to pass some NavParams to a tab. The NavParams are available…
lawlesscreation
  • 649
  • 1
  • 6
  • 15
40
votes
15 answers

Ionic build android, Error: spawn EACCES

If I follow this steps to create a new app: Rubens-MacBook-Pro:~ rlopez$ npm install -g cordova ionic Rubens-MacBook-Pro:~ rlopez$ ionic start myApp tabs Rubens-MacBook-Pro:~ rlopez$ cd myApp Rubens-MacBook-Pro:myApp rlopez$ ionic platform add…
rubenlop88
  • 4,171
  • 2
  • 28
  • 32
39
votes
1 answer

Integrating JavaScript web plugin in Ionic 2

Im trying to integrate Applozic chat platform to my Ionic 2 project, which I wish to export to Web, Android and iOS. Using the sample as a base and created the applozic.d.ts & applozichv.js for the Javascript integration process.…
Kshitij Aggarwal
  • 5,287
  • 5
  • 34
  • 41
39
votes
8 answers

Cannot read property 'native-element' of undefined

I am using ionic 2. I need to get HTML element value. Actually, I used viewchild. Here is my html template code
{{last ? callFunction() : ''}} …
ANISUNDAR
  • 787
  • 5
  • 12
  • 28