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
308
votes
22 answers

Error: Cannot find module '../lib/utils/unsupported.js' while using Ionic

I always get this error message when I run "Ionic start project name": Error message Running command - failed![ERROR] An error occurred while running npm install (exit code 1): module.js:471 throw err; ^ Error: Cannot find…
inxoy
  • 3,484
  • 2
  • 13
  • 21
209
votes
22 answers

ionic 2 - Error Could not find an installed version of Gradle either in Android Studio

I create ionic 2 project and add diagnostic cordova plugin like this : ionic plugin add cordova.plugins.diagnostic npm install --save @ionic-native/diagnostic and add android platform like this : ionic platform add android@latest but when build…
Reza Mazarlou
  • 2,986
  • 4
  • 22
  • 31
206
votes
1 answer

Import two exported classes with the same name

In typescript, using Angular 2, I need to import two classes with the same name, but lying in different paths. The project is quite too big that I find it hard to change the exported class names. Is there any way to alias the imported…
Rizan Zaky
  • 4,230
  • 3
  • 25
  • 39
141
votes
16 answers

Component is part of the declaration of 2 modules

I try to build an ionic 2 app. When I try the app in the browser with ionic serve or launch it on an emulator everything works fine. But when I try to build it every time the error ionic-app-script tast: "build" Error Type AddEvent in…
Stevetro
  • 1,933
  • 3
  • 16
  • 29
115
votes
23 answers

Adb install failure: INSTALL_CANCELED_BY_USER

I try to install app via adb and get a error: $ ./adb -d install /Users/dimon/Projects/one-place/myprogram/platforms/android/build/outputs/apk/android-debug.apk -r -g 3704 KB/s (4595985 bytes in 1.211s) pkg:…
Dmitry Skryabin
  • 1,584
  • 2
  • 10
  • 15
107
votes
13 answers

Property 'files' does not exist on type 'EventTarget' error in typescript

I am trying to access the value of the input file from my ionic 2 application but still I'm facing the issue of property files does not exist on type 'EventTarget'. As it is properly working in js but not in typescript. The code is given below: …
Chirag Chaudhari
  • 1,617
  • 3
  • 14
  • 20
106
votes
10 answers

How to iterate object keys using *ngFor

I want to iterate [object object] using *ngFor in Angular 2. The problem is the object is not array of object but object of object which contains further objects. { "data": { "id": 834, "first_name": "GS", "last_name": "Shahid", …
Umar Rasheed
  • 4,323
  • 4
  • 16
  • 26
101
votes
3 answers

Ionic directives VS Angular material directives with Ionic Framework

I want to use ionic with material design. I am stuck between using ionic directives with custom CSS and angular-material I have read that using ionic directives we get lot of efficient features like App data is remembered with UI-router, even…
Vamsi
  • 9,510
  • 6
  • 38
  • 46
93
votes
8 answers

How to convert date into this 'yyyy-MM-dd' format in angular 2

I want to convert current date into 'yyyy-MM-dd' format in .ts file. In template it can easily be done by using date pipe. How to do that in typescript? In template: {{date | date:'yyyy-MM-dd'}} How to convert in this format 'yyyy-MM-dd' in…
Umar Rasheed
  • 4,323
  • 4
  • 16
  • 26
92
votes
5 answers

How to set dynamic id in *ngFor?

How to set dynamic id in Angular 2? I have tried:
this.circles = [ { x: 50 , y: 50 ,id : "oyut1" }, { x: 100 , y: 100 ,id : "oyut3" }, …
Kim Wong
  • 2,027
  • 4
  • 17
  • 22
73
votes
6 answers

Safe value must use [property]=binding after bypass security with DomSanitizer

//Controller code @ViewChild('mass_timings') mass_timings: ElementRef; constructor(private domSanitizer:DomSanitizer) getInnerHTMLValue(){ this.mass_timings.nativeElement.innerHTML = …
manish kumar
  • 4,412
  • 4
  • 34
  • 51
70
votes
8 answers

How to use [(ngModel)] on div's contenteditable in angular2?

I am trying to use ngModel to two way bind div's contenteditable input content as follows:
but it is…
Kim Wong
  • 2,027
  • 4
  • 17
  • 22
66
votes
2 answers

Ionic 3 Component vs Page

Can you tell me what is the difference between Component and Page generator in the Ionic 3 app? It seems I can use page life cycle hooks like ionViewWillLeave inside the component too.So when should I use angular life cycle hooks then? If it is same…
Sampath
  • 63,341
  • 64
  • 307
  • 441
65
votes
7 answers

access SASS values ($colors from variables.scss) in Typescript (Angular2 ionic2)

In Ionic 2, I would like to access the $colors variables from the file "[my project]\src\theme\variables.scss". This file contains: $colors: ( primary: #387ef5, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: …
nyluje
  • 3,573
  • 7
  • 37
  • 67
61
votes
6 answers

Wait for multiple promises to finish

I am using the SQLStorage from the Ionic platform. The remove function returns a promise. In my code I need to remove multiple values. When these are all finished I need to execute some code. How can I wait for all of these and then execute a…
Bas van Dijk
  • 9,933
  • 10
  • 55
  • 91
1
2 3
99 100