I always get this error message when I run &quot;Ionic start project name&quot;:

### Error message


    Running command - failed![ERROR] An error occurred while running npm install (exit code 1):
        
        module.js:471
            throw err;
            ^
        
        Error: Cannot find module &#39;../lib/utils/unsupported.js&#39;
            at Function.Module._resolveFilename (module.js:469:15)
            at Function.Module._load (module.js:417:25)
            at Module.require (module.js:497:17)
            at require (internal/module.js:20:19)
            at /usr/local/lib/node_modules/npm/bin/npm-cli.js:19:21
            at Object.&lt;anonymous&gt; (/usr/local/lib/node_modules/npm/bin/npm-cli.js:79:3)
            at Module._compile (module.js:570:32)
            at Object.Module._extensions..js (module.js:579:10)
            at Module.load (module.js:487:32)
            at tryModuleLoad (module.js:446:12)

Error: Cannot find module &#39;../lib/utils/unsupported.js&#39; while using Ionic

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 with `ionic build android` console give me this error :

    Error: Could not find an installed version of Gradle either in Android Studio,
    or on your system to install the gradle wrapper. Please include gradle 
    in your path, or install Android Studio

and I try to download manualy gradle.3.3-all.zip and change this  distributionUrl var in platform/android/cordova/lib/builders/GradleBuilder.js

     var distributionUrl = process.env[&#39;CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL&#39;] || &#39;https\\://services.gradle.org/distributions/gradle-3.3-all.zip&#39;

to:

    var distributionUrl = process.env[&#39;CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL&#39;] || &#39;file:///E:/gradles/gradle-3.3-all.zip&#39;;

but not working and console give me last error.

I dont know how to add gradle for android@latest version

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

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 classes,

    import {Class1} from &#39;../location1/class1&#39;
    import {Class1} from &#39;../location2/class1&#39;

Import two exported classes with the same name

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: &quot;build&quot;
    Error Type AddEvent in &quot;PATH&quot;/add.event.ts is part of the declarations of 2 modules: AppModule in &quot;PATH&quot;/app.modules.ts and AddEvent in &quot;PATH&quot;/add-event.module.ts.
    Please consider moving AddEvent in &quot;PATH&quot;/add-event.ts to a higher module that imports AppModule in &quot;PATH&quot;/app.module.ts and AddEventModule.
    You can also create a new NgModule that exports and includes AddEvent then import that NgModule in AppModule and AddEventModule

my AppModule is 

&lt;!-- language: lang-ts --&gt;

    import { NgModule, ErrorHandler } from &#39;@angular/core&#39;;
    import { BrowserModule } from &#39;@angular/platform-browser&#39;;
    import { IonicApp, IonicModule, IonicErrorHandler } from &#39;ionic-angular&#39;;
    import { AngularFireModule } from &#39;angularfire2&#39;;
    import { MyApp } from &#39;./app.component&#39;;
    import { Eventdata } from &#39;../providers/eventdata&#39;;
    import { AuthProvider } from &#39;../providers/auth-provider&#39;;
    import { HttpModule } from &#39;@angular/http&#39;;
    
    import { HomePage } from &#39;../pages/home/home&#39;;
    import { Login } from &#39;../pages/login/login&#39;;
    import { Register } from &#39;../pages/register/register&#39;;
    import { AddEvent } from &#39;../pages/add-event/add-event&#39;;
    import { EventDetails } from &#39;../pages/event-details/event-details&#39;;
    
    import { StatusBar } from &#39;@ionic-native/status-bar&#39;;
    import { SplashScreen } from &#39;@ionic-native/splash-screen&#39;;
       
    
    @NgModule({
      declarations: [
        MyApp,
        HomePage,
        Login,
        Register,
        AddEvent,
        EventDetails
        
      ],
      imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp),
        HttpModule,
        AngularFireModule.initializeApp(config)
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        HomePage,
        Login,
        Register,
        AddEvent,
        EventDetails
      ],
      providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler}, Eventdata, AuthProvider
      ]
    })
    export class AppModule {}

and my add-event.module.ts is

&lt;!-- language: lang-ts --&gt;

    import { NgModule } from &#39;@angular/core&#39;;
    import { IonicPageModule } from &#39;ionic-angular&#39;;
    import { AddEvent } from &#39;./add-event&#39;;
    
    @NgModule({
      declarations: [
        AddEvent,
      ],
      imports: [
        IonicPageModule.forChild(AddEvent),
      ],
      exports: [
        AddEvent
      ]
    })
    export class AddEventModule {}

I understand that I have to remove one of the declarations, but I don&#39;t know how.

If I remove the declaration from AppModule I get an Error that the Login Page is not found, while running ionic serve

Component is part of the declaration of 2 modules

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: /data/local/tmp/android-debug.apk
    Failure [INSTALL_CANCELED_BY_USER]

In device I do nothing in this moment.
Device is Xiaomi MI5, MIUI 7.2.13, Android 6.0. Developer mode enabled.
How to fix this?

The same error I get when try to run &quot;ionic run android&quot; command.

**UPD**

Here is logs from &#39;adb logcat&#39; command getting in moment of installation program:
   

    06-06 10:04:20.051   788   903 I DisplayFeatureService: void android::update_watchlist(const prop_info*, void*): sys.boot_completed: 1
    06-06 10:04:20.063   788   903 I DisplayFeatureService: void android::update_watchlist(const prop_info*, void*): sys.boot_completed: 1
    06-06 10:04:20.078 13397 13397 E ANDR-PERF-MPCTL: Unable to create control service (stage=2, rc=-1)
    06-06 10:04:20.082   788   903 I DisplayFeatureService: void android::update_watchlist(const prop_info*, void*): sys.boot_completed: 1
    06-06 10:04:20.079 13396 13396 W iop     : type=1400 audit(0.0:527): avc: denied { write } for name=&quot;socket&quot; dev=&quot;tmpfs&quot; ino=14686 scontext=u:r:dumpstate:s0 tcontext=u:object_r:socket_device:s0 tclass=dir permissive=0
    06-06 10:04:20.088   788   903 I DisplayFeatureService: void android::update_watchlist(const prop_info*, void*): sys.boot_completed: 1
    06-06 10:04:20.926 13400 13400 D AndroidRuntime: &gt;&gt;&gt;&gt;&gt;&gt; START com.android.internal.os.RuntimeInit uid 2000 &lt;&lt;&lt;&lt;&lt;&lt;
    06-06 10:04:20.930 13400 13400 D AndroidRuntime: CheckJNI is OFF
    06-06 10:04:20.966 13400 13400 D ICU     : No timezone override file found: /data/misc/zoneinfo/current/icu/icu_tzdata.dat
    06-06 10:04:20.995 13400 13400 I Radio-JNI: register_android_hardware_Radio DONE
    06-06 10:04:21.004 13400 13400 E         : WFDWhiteListing : library initialized successfully
    06-06 10:04:21.020 13400 13400 D AndroidRuntime: Calling main entry com.android.commands.pm.Pm
    06-06 10:04:21.027 13400 13400 I Timeline: Timeline: Activity_launch_request time:973226
    06-06 10:04:21.028  1497  2996 I ActivityManager: START u0 {act=android.intent.action.VIEW dat=file:///data/local/tmp/android-debug.apk typ=application/vnd.android.package-archive flg=0x18000000 cmp=com.miui.securitycenter/com.miui.permcenter.install.AdbInstallActivity (has extras)} from uid 2000 on display 0
    06-06 10:04:21.033  1497  2996 E         : WFDMMServiceClient ctor Context = 0x0, Cb = 0x0
    06-06 10:04:21.033  1497  2996 E         : getWFDMMServiceInstance get new Instance
    06-06 10:04:21.033  1497  2996 E         : Service not available yet
    06-06 10:04:21.034  1497  2996 E         : WFDMMServiceClient::~WFDMMServiceClient
    06-06 10:04:21.037  1497  2996 E         : WFDMMServiceClient ctor Context = 0x0, Cb = 0x0
    06-06 10:04:21.037  1497  2996 E         : getWFDMMServiceInstance get new Instance
    06-06 10:04:21.037  1497  2996 E         : Service not available yet
    06-06 10:04:21.037  1497  2996 E         : WFDMMServiceClient::~WFDMMServiceClient
    06-06 10:04:21.050  2875  3077 D PowerKeeperEventLogManager: notifyForegroundCompomentChanged ComponentInfo{com.miui.securitycenter/com.miui.permcenter.install.AdbInstallActivity}
    06-06 10:04:21.051  2875  3036 D PowerKeeperExecutor: notify state normal_state enter...
    06-06 10:04:21.051  2875  3036 D PowerKeeperExecutor: foreground_change:
    06-06 10:04:21.051  2875  3036 D PowerKeeperExecutor: set_cpu_powermode(middle)
    06-06 10:04:21.051  2875  3036 I PowerKeeperExecutor: no local quick execution method for set_cpu_powermode
    06-06 10:04:21.051  2875  3036 D PowerKeeperExecutor: set_lcd_mode(ui)
    06-06 10:04:21.051  2875  3036 I PowerKeeperExecutor: no local quick execution method for set_lcd_mode
    06-06 10:04:21.049  2887  2887 W EventReader: type=1400 audit(0.0:528): avc: denied { search } for name=&quot;756&quot; dev=&quot;proc&quot; ino=16099 scontext=u:r:system_app:s0 tcontext=u:r:zygote:s0 tclass=dir permissive=0
    06-06 10:04:21.049  2887  2887 W EventReader: type=1400 audit(0.0:529): avc: denied { search } for name=&quot;756&quot; dev=&quot;proc&quot; ino=16099 scontext=u:r:system_app:s0 tcontext=u:r:zygote:s0 tclass=dir permissive=0
    06-06 10:04:21.051  3247  4440 I octvm_power: power mode [normal] start 1465200261
    06-06 10:04:21.051  3247  4440 I octvm_power: Action: set_cpu_powermode(middle) for [foreground_change]
    06-06 10:04:21.051  3247  4440 I octvm_drv: common drv: platform_set_power_profile -&gt; platform not support
    06-06 10:04:21.051  2533  2887 I octvm   : task pid 2113 have been add to group sys_standby.
    06-06 10:04:21.051  3247  4440 I octvm_power: Action: set_lcd_mode(ui) for [foreground_change]
    06-06 10:04:21.051  3247  4440 I octvm_drv: common drv: platform_set_lcd_mode -&gt; platform not support
    06-06 10:04:21.051  2533  2887 I octvm   : task pid 2900 have been add to group sys_standby.
    06-06 10:04:21.049  2887  2887 W EventReader: type=1400 audit(0.0:530): avc: denied { search } for name=&quot;756&quot; dev=&quot;proc&quot; ino=16099 scontext=u:r:system_app:s0 tcontext=u:r:zygote:s0 tclass=dir permissive=0
    06-06 10:04:21.051  2533  2887 I octvm   : task pid 4553 have been add to group sys_standby.
    06-06 10:04:21.051  2533  2887 I octvm   : [sys_standby]cgroup_add_tasks max single write time: 0ms
    06-06 10:04:21.051  2533  2887 I octvm   : [sys_standby]cgroup_add_tasks total time consume: 0ms
    06-06 10:04:21.051  3247  4440 I octvm_power: onPowerModeChanged[normal] called
    06-06 10:04:21.052  2875  3093 I FirstNotificationController: handleUnlockState: stoped
    06-06 10:04:21.055  1497  2996 I Timeline: Timeline: App_transition_ready time:973254
    06-06 10:04:21.055  1976  1976 V PhoneStatusBarPolicy: updateManagedProfile: mManagedProfileFocused: false mKeyguardVisible: true
    06-06 10:04:21.055  1497  2996 I Timeline: Timeline: App_transition_stopped time:973255
    06-06 10:04:21.059  1497  2996 E ActivityManager: Invalid thumbnail dimensions: 0x0
    06-06 10:04:21.059  4553  4553 W .securitycenter: type=1400 audit(0.0:531): avc: denied { search } for name=&quot;tmp&quot; dev=&quot;dm-0&quot; ino=28 scontext=u:r:system_app:s0 tcontext=u:object_r:shell_data_file:s0 tclass=dir permissive=0
    06-06 10:04:21.066  4553  4553 W asset   : Asset path /data/local/tmp/android-debug.apk is neither a directory nor file (type=0).
    06-06 10:04:21.066  4553  4553 D AdbInstallActivity:  parsePackage is null , path ：/data/local/tmp/android-debug.apk
    06-06 10:04:21.059  4553  4553 W .securitycenter: type=1400 audit(0.0:532): avc: denied { search } for name=&quot;tmp&quot; dev=&quot;dm-0&quot; ino=28 scontext=u:r:system_app:s0 tcontext=u:object_r:shell_data_file:s0 tclass=dir permissive=0
    06-06 10:04:21.072  1497  2230 E         : WFDMMServiceClient ctor Context = 0x0, Cb = 0x0
    06-06 10:04:21.072  1497  2230 E         : getWFDMMServiceInstance get new Instance
    06-06 10:04:21.072  1497  2230 E         : Service not available yet
    06-06 10:04:21.072  1497  2230 E         : WFDMMServiceClient::~WFDMMServiceClient
    06-06 10:04:21.073  1497  2230 E         : WFDMMServiceClient ctor Context = 0x0, Cb = 0x0
    06-06 10:04:21.073  1497  2230 E         : getWFDMMServiceInstance get new Instance
    06-06 10:04:21.073  1497  2230 E         : Service not available yet
    06-06 10:04:21.073  1497  2230 E         : WFDMMServiceClient::~WFDMMServiceClient
    06-06 10:04:21.075  1497  2230 E ActivityManager: Invalid thumbnail dimensions: 0x0
    06-06 10:04:21.076  2875  3077 D PowerKeeperEventLogManager: notifyForegroundCompomentChanged ComponentInfo{com.android.settings/com.android.settings.Settings$WifiSettingsActivity}
    06-06 10:04:21.069  2887  2887 W EventReader: type=1400 audit(0.0:533): avc: denied { search } for name=&quot;756&quot; dev=&quot;proc&quot; ino=16099 scontext=u:r:system_app:s0 tcontext=u:r:zygote:s0 tclass=dir permissive=0
    06-06 10:04:21.076  1497  2230 I Timeline: Timeline: App_transition_ready time:973275
    06-06 10:04:21.076  1497  2230 I Timeline: Timeline: App_transition_stopped time:973275
    06-06 10:04:21.076  2533  2887 I octvm   : task pid 2060 have been add to group sys_standby.
    06-06 10:04:21.076  2533  2887 I octvm   : [sys_standby]cgroup_add_tasks max single write time: 0ms
    06-06 10:04:21.076  2533  2887 I octvm   : [sys_standby]cgroup_add_tasks total time consume: 0ms
    06-06 10:04:21.077  1976  1976 V PhoneStatusBarPolicy: updateManagedProfile: mManagedProfileFocused: false mKeyguardVisible: true
    06-06 10:04:21.090 13400 13400 I art     : System.exit called, status: 1
    06-06 10:04:21.090 13400 13400 I AndroidRuntime: VM exiting with result code 1.
    06-06 10:04:21.100  2060  2130 V MI_STAT : disabled local event upload

I see when android-debug.apk creates, but I don&#39;t understand why it&#39;s not installs. Maybe the key strings is:

    06-06 10:04:21.066  4553  4553 W asset   : Asset path /data/local/tmp/android-debug.apk is neither a directory nor file (type=0).
    06-06 10:04:21.066  4553  4553 D AdbInstallActivity:  parsePackage is null , path ：/data/local/tmp/android-debug.apk

but this is not error strings, just warning and debug.
Also strange line:

    06-06 10:04:21.059  1497  2996 E ActivityManager: Invalid thumbnail dimensions: 0x0

but I don&#39;t know if it is a problem.

Also I tried to install via adb some other apps, not only self-written. But no results. 

Adb install failure: INSTALL_CANCELED_BY_USER

I want to use [ionic][1] with material design. I am stuck between using ionic directives with custom CSS and [angular-material][2] 

I have read that using ionic directives we get lot of efficient features like  

- App data is remembered with UI-router, even after navigating to other view and coming back to the page 

- Ionic list items are rendered only up to display height and reused when scrolling down or up

and a lot of performance improvements. 

But, if I use ionic directives they don&#39;t have the material design.

If I use angular-material I will not have these performance improvements, and extra features needed for a mobile application.

Angular-material directives are like

    &lt;md-list&gt;
      &lt;md-item ng-repeat=&quot;item in items&quot;&gt;
        Hello, {{item}}!
      &lt;/md-item&gt;
    &lt;/md-list&gt;

Ionic directives are like 

    &lt;ion-list&gt;
      &lt;ion-item ng-repeat=&quot;item in items&quot;&gt;
        Hello, {{item}}!
      &lt;/ion-item&gt;
    &lt;/ion-list&gt;

Looks like [Ionic is funding angular-material][3] project development, then why is angular-material not compatible to use with ionic?

How can I use [angular-material][4] components without losing the performance improvements and features of ionic?

OR

is there a better idea for using material design with ionic?


  [1]: http://ionicframework.com
  [2]: https://material.angularjs.org
  [3]: http://ionicframework.com/jobs/material-2014/
  [4]: https://material.angularjs.org/#/

Ionic directives VS Angular material directives with Ionic Framework

I want to iterate [object object] using *ngFor in Angular 2. &lt;br&gt;&lt;br&gt;The problem is the object is not array of object but object of object which contains further objects.

    {
    
      &quot;data&quot;: {
        &quot;id&quot;: 834,
        &quot;first_name&quot;: &quot;GS&quot;,
        &quot;last_name&quot;: &quot;Shahid&quot;,
        &quot;phone&quot;: &quot;03215110224&quot;,
        &quot;role&quot;: null,
        &quot;email&quot;: &quot;test@example.com&quot;,
        &quot;picture&quot;: **{ &lt;-- I want to get thumb: url but not able to fetch that**
          &quot;url&quot;: null,
          &quot;thumb&quot;: {
            &quot;url&quot;: null
          }
        },
        &quot;address&quot;: &quot;Nishtar Colony&quot;,
        &quot;city_id&quot;: 2,
        &quot;provider&quot;: &quot;email&quot;,
        &quot;uid&quot;: &quot;test@example.com&quot;
      }
    }

I know we can use pipe to iterate the object but how we can iterate further from object to object means **data-&gt;picture-&gt;thum:url**.


 

How to iterate object keys using *ngFor

How to set dynamic `id` in Angular 2?

I have tried:

    &lt;div class = &quot;CirclePoint&quot; *ngFor=&quot;#c of circles&quot; id = &quot;{{ &#39;Location&#39; + c.id }}&quot;&gt;&lt;/div&gt;
    
    this.circles = [
			{ x: 50 , y: 50 ,id : &quot;oyut1&quot; },
			{ x: 100 , y: 100 ,id : &quot;oyut3&quot;  },
			{ x: 150 , y: 150 ,id : &quot;oyut2&quot;  }
    ];

but it does not work.

How to set dynamic id in *ngFor?

I am trying to access the value of the input file from my ionic 2 application but still I&#39;m facing the issue of property files does not exist on type &#39;EventTarget&#39;.
As it is properly working in js but not in typescript.
The code is given below:

      document.getElementById(&quot;customimage&quot;).onchange= function(e?) {
                var files: any = e.target.files[0]; 
                  EXIF.getData(e.target.files[0], function() {
                      alert(EXIF.getTag(this,&quot;GPSLatitude&quot;));
                  });
              }

Please help me solve this issue as it is not building my ionic 2 application. 

Property &#39;files&#39; does not exist on type &#39;EventTarget&#39; error in typescript

I want to convert current data into `&#39;yyyy-MM-dd&#39;` format in .ts file. i template it can easily be done by using data pipe. how to do that in typescript.

**In template:**

    {{date  | date:&#39;yyyy-MM-dd&#39;}}

**How to convert in this format `&#39;yyyy-MM-dd&#39;` in typescript**.

now i am just getting current date by using this.

  

    this.date =  new Date();

but need to convert it into given format.
Please guide how to do that... Thanks!





How to convert date into this &#39;yyyy-MM-dd&#39; format in angular 2

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 then Why it has 2 generators? Hope you&#39;ll provide a feedback for this. 

*Component generator:*

     ionic generate component SubscribeTopicComponent

*Page generator:*

    ionic generate page LoginPage

Ionic 3 Component vs Page

I am trying to use ngModel to two way bind div&#39;s contenteditable input content as follows:


    &lt;div id=&quot;replyiput&quot; class=&quot;btn-input&quot;  [(ngModel)]=&quot;replyContent&quot;  contenteditable=&quot;true&quot; data-text=&quot;type...&quot; style=&quot;outline: none;&quot;    &gt;&lt;/div&gt; 

but it is not working and an error occurs:

    EXCEPTION: No value accessor for &#39;&#39; in [ddd in PostContent@64:141]
    app.bundle.js:33898 ORIGINAL EXCEPTION: No value accessor for &#39;&#39;

How to use [(ngModel)] on div&#39;s contenteditable in angular2?

&lt;!-- language-all: lang-ts --&gt;

    &lt;!--HTML CODE--&gt;
    &lt;p #mass_timings&gt;&lt;/p&gt;
 &lt;br

    //Controller code

    @ViewChild(&#39;mass_timings&#39;) mass_timings: ElementRef;
    constructor(private domSanitizer:DomSanitizer)
    getInnerHTMLValue(){
     this.mass_timings.nativeElement.innerHTML = 
       this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings);
        
    }

but the output which the mass_timings is displaying is including the text:-

&gt;Safe value must use [property]=binding

at the beginning

How to remove this string.


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

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 **&lt;ion-icon&gt;** tag. Eg:

    &lt;ion-icon name=&quot;my-custom-icon&quot;&gt;&lt;/ion-icon&gt;

How can i achieve this? Is there any recommended way to doing this?



Add Custom Icon in Ionic 2

In Ionic 2, I would like to access the `$colors` variables from the file &quot;[my project]\src\theme\variables.scss&quot;.

This file contains:

    $colors: (
      primary:    #387ef5,
      secondary:  #32db64,
      danger:     #f53d3d,
      light:      #f4f4f4,
      dark:       #222,
      favorite:   #69BB7B
    );

In a component, I draw a canvas. It looks like that:

    import {Component, Input, ViewChild, ElementRef} from &#39;@angular/core&#39;;
    
    @Component({
        selector: &#39;my-graph&#39;,
    })
    @View({
        template: `&lt;canvas #myGraph class=&#39;myGraph&#39;
         [attr.width]=&#39;_size&#39;
         [attr.height]=&#39;_size&#39;&gt;&lt;/canvas&gt;`,
    })
    
    export class MyGraphDiagram {
        private _size: number;
    
        // get the element with the #myGraph on it
        @ViewChild(&quot;myGraph&quot;) myGraph: ElementRef; 
    
        constructor(){
            this._size = 150;
        }
    
        ngAfterViewInit() { // wait for the view to init before using the element
    
          let context: CanvasRenderingContext2D = this.myGraph.nativeElement.getContext(&quot;2d&quot;);
          // HERE THE COLOR IS DEFINED AND I D LIKE TO ACCESS variable.scss TO DO THAT
          context.fillStyle = &#39;blue&#39;;
          context.fillRect(10, 10, 150, 150);
        }
    
    }

As one can see, at some point in this code the color of the shape is defined:          `context.fillStyle = &#39;blue&#39;` , I would like to use instead something like `context.fillStyle = &#39;[variables.scss OBJECT].$colors.primary &#39;`.

Has anyone an idea?
 

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

I just set up my first ionic 2 app (I&#39;ve used ionic 1 fairly extensively). I&#39;m trying to use the [ionic-native camera](http://ionicframework.com/docs/v2/native/camerapreview/) preview plugin.

**The setup was pretty straight forward:**

    npm install -g ionic cordova
    ionic start timesnap --v2
    ionic platform add android
    ionic platform add ios
    ionic plugin add cordova-plugin-camera-preview --save

**Then I copied and pasted the example code into the about page:**

    import { CameraPreview, CameraPreviewRect } from &#39;ionic-native&#39;;
    
    // camera options (Size and location)
    let cameraRect: CameraPreviewRect = {
      x: 100,
      y: 100,
      width: 200,
      height: 200
    };
    
    
    // start camera
    CameraPreview.startCamera(
      cameraRect, // position and size of preview
      &#39;front&#39;, // default camera
      true, // tap to take picture
      false, // disable drag
      true, // send the preview to the back of the screen so we can addoverlaying elements
      1 //alpha
    );

**I launched the app using the following commands:**

    ionic emulate android -lcs
    
    ionic emulate ios -lcs --target=&#39;iPhone-6&#39;

At first the camera just wasn&#39;t showing up then I ran `chrome://inspect` and saw warnings about Cordova missing &quot;try running in an emulator&quot;, but this was while running in an android emulator. I tried iOS too and saw the same results.

Any ideas why cordova isn&#39;t loading?

Here is the full error log from `chrome://inspect` while running in an android emulator:

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/p9FPq.png

**Update... index.html**

(it&#39;s just the standard one generated by ionic)


    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;Ionic App&lt;/title&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no&quot;&gt;
      &lt;meta name=&quot;format-detection&quot; content=&quot;telephone=no&quot;&gt;
      &lt;meta name=&quot;msapplication-tap-highlight&quot; content=&quot;no&quot;&gt;
    
      &lt;link rel=&quot;icon&quot; type=&quot;image/x-icon&quot; href=&quot;assets/icon/favicon.ico&quot;&gt;
      &lt;link rel=&quot;manifest&quot; href=&quot;manifest.json&quot;&gt;
      &lt;meta name=&quot;theme-color&quot; content=&quot;#4e8ef7&quot;&gt;
      
      &lt;!-- cordova.js required for cordova apps --&gt;
      &lt;script src=&quot;cordova.js&quot;&gt;&lt;/script&gt;
    
      &lt;!-- un-comment this code to enable service worker
      &lt;script&gt;
        if (&#39;serviceWorker&#39; in navigator) {
          navigator.serviceWorker.register(&#39;service-worker.js&#39;)
            .then(() =&gt; console.log(&#39;service worker installed&#39;))
            .catch(err =&gt; console.log(&#39;Error&#39;, err));
        }
      &lt;/script&gt;--&gt;
    
      &lt;link href=&quot;build/main.css&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;/head&gt;
    &lt;body&gt;
    
      &lt;!-- Ionic&#39;s root component and where the app will load --&gt;
      &lt;ion-app class=&quot;trans&quot;&gt;&lt;/ion-app&gt;
    
      &lt;!-- The polyfills js is generated during the build process --&gt;
      &lt;script src=&quot;build/polyfills.js&quot;&gt;&lt;/script&gt;
    
      &lt;!-- The bundle js is generated during the build process --&gt;
      &lt;script src=&quot;build/main.js&quot;&gt;&lt;/script&gt;
    
    &lt;/body&gt;
    &lt;/html&gt;



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

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 callback function?

**Code:**

    removeAll() {    
      this.storage.remove(key1);
      this.storage.remove(key2);
      this.storage.remove(key3);    
    }

Nesting all is a bad practise so I am looking for a decent solution :)

    removeAll() {
      return this.storage.remove(key1).then(() =&gt; {
        this.storage.remove(key2).then(() =&gt; {
          this.storage.remove(key3);        
        });
      });
    };

Wait for multiple promises to finish

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 &#39;NodeJS&#39;` and the error refers to `touchTimeout: NodeJS.Timer;`

How can I adapt the code below to make the `NodeJS.Timer` line work?


&lt;!-- language-all: lang-ts --&gt;

	import { Directive, ElementRef, HostListener } from &#39;@angular/core&#39;;
	
	@Directive({ selector: &#39;[delayDragLift]&#39; })
	export class DelayDragLiftDirective {
	
	    dragDelay: number = 200; // milliseconds
	    draggable: boolean = false;
	    touchTimeout: NodeJS.Timer;
	
	    @HostListener(&#39;touchmove&#39;, [&#39;$event&#39;])
	    // @HostListener(&#39;mousemove&#39;, [&#39;$event&#39;])
	    onMove(e: Event) {
	        if (!this.draggable) {
	            e.stopPropagation();
	            clearTimeout(this.touchTimeout);
	        }
	    }
	
	    @HostListener(&#39;touchstart&#39;, [&#39;$event&#39;])
	    // @HostListener(&#39;mousedown&#39;, [&#39;$event&#39;])
	    onDown(e: Event) {
	        this.touchTimeout = setTimeout(() =&gt; {
	            this.draggable = true;
	        }, this.dragDelay);
	    }
	
	    @HostListener(&#39;touchend&#39;, [&#39;$event&#39;])
	    // @HostListener(&#39;mouseup&#39;, [&#39;$event&#39;])
	    onUp(e: Event) {
	        clearTimeout(this.touchTimeout);
	        this.draggable = false;
	    }
	
	    constructor(private el: ElementRef) {
	    }
	}

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

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?

All Ionic2 Solutions on Gang of Coders

Total of 19 Ionic2 Solutions

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