Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all 48977 articles
Browse latest View live

In ionic 4 how to set background image?

$
0
0

@demokumar wrote:

hello team ,
I create ionic 4 project first time and want to set a background image to ion-content then I set it in class as
background: url("…/assets/imgs/home-bg.png"); but It gives error not work

Posts: 1

Participants: 1

Read full topic


Ionic 4 native element size is null

$
0
0

@npro27 wrote:

Why native element have 0 size in ngAfterViewInit?
I have embedded component like this:

//my parent component
...
<ion-content>
    <inner-component></inner-component>
</ion-content>
...

in inner component:

//html
  <div id="map" style="width:500px; height: 500px;"  #map  ></div>
//ts
...
@ViewChild('map') mapElement: ElementRef;
ngAfterViewInit() {
   console.log('height: ' + this.mapElement.nativeElement.offsetHeight);
   console.log('width: ' + this.mapElement.nativeElement.offsetWidth);
  }
...

Output is always “height: 0 width: 0”
But sometimes: “height: 500 width: 500”
I think that is because the element that i created has not been rendered in the Dom yet?
How i can solve this? Ionic hooks not work with embedded components(

Posts: 1

Participants: 1

Read full topic

Ionic 3 geolocation not working

$
0
0

@chakradharsw wrote:

Hi,
i’m trying to find geolocation in ionic 3. when i use geolocaton.getcurrentlocation it is showing error and i don’t know how to solve this issue.Below is code.

03%20AM

Anyone got suggestions or solution.

Posts: 1

Participants: 1

Read full topic

Using Observables in Ionic 3 and Angular 5

$
0
0

@sambhupal wrote:

Hi, I’m new in ionic 3,

  1. I can save sqlite data save to server database by using API (http).
  2. I have 4 data in my sqlite local storage.
  3. Following function: for each data is saved to server database successfully…
    a) after success i got a response from server.
    b) And according success message i run another function for delete single data(delete each data)
    c) But what I am seeing only no. 4 data is delete other remain same.

Here is my code:

synch(){

this.sqlite.create ({ name: “m_ilsapps.db”, location: “default” })
.then((db: SQLiteObject) => {
db.executeSql(“SELECT * FROM m_offline_pod_data ORDER BY m_offline_id ASC”, ).then((data) => {
if(data.rows.length > 0) {
for(var i = 0; i < data.rows.length; i++) {

    this.productInfo.m_offline_id = data.rows.item(i).m_offline_id;
    this.productInfo.m_pod_no = data.rows.item(i).m_pod_no;

this.http.post(“http://example.in/clix_mobile_apps/add-product-offline.php”,this.productInfo).subscribe( data => {
console.log( "SUCCESS => " + data);

let offlineupdate = JSON.parse(data["_body"]);

  if(offlineupdate.status == "success"){

this.MYdeleteData(this.productInfo.m_offline_id);

  }  else if(offlineupdate.status == "podnotmatch"){

 this.toast.show("POD MISMATCH...try again...", '5000', 'center').subscribe(
      toast => {
      console.log(toast);
      }
    );

  }

}, err=>{
  console.log("Error => "+ err);

    this.toast.show("NO SERVER RESPONSE...try again...", '5000', 'center').subscribe(
      toast => {
      console.log(toast);
      }
    );

});
}  // for each end
                       }
    console.log(this.products);
}, (error) => {
    console.log("ERROR: " + JSON.stringify(error));
             });
})

}

// delete function

MYdeleteData(myID){
alert(‘DELETE’+myID);
this.sqlite.create ({ name: “m_ilsapps.db”, location: “default” })
.then((db: SQLiteObject) => {
db.executeSql(“DELETE FROM m_offline_pod_data WHERE m_offline_id = '”+myID+"’", ).then((data) => {

 console.log(this.products);

}, (error) => {
  //alert('delete error v3-10012')
    console.log("ERROR: " + JSON.stringify(error));
  });

})
}

Please help me

Posts: 1

Participants: 1

Read full topic

Error: The Angular AoT build failed

$
0
0

@rranjan306 wrote:

After running ionic cordova build android --prod --release, i am getting the below error

[15:58:48] typescript error
Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing
the function or lambda with a reference to an exported function (position 194:31 in the original .ts file),
resolving symbol NgModule in
/home/deepak/Sinilabs/lovelace-mobile-app-admin/node_modules/ngx-restangular/node_modules/@angular/core/core.d.ts,
resolving symbol RestangularModule in
/home/deepak/Sinilabs/lovelace-mobile-app-admin/node_modules/ngx-restangular/dist/esm/src/ngx-restangular.module.d.ts,
resolving symbol RestangularModule in
/home/deepak/Sinilabs/lovelace-mobile-app-admin/node_modules/ngx-restangular/dist/esm/src/ngx-restangular.module.d.ts

Posts: 1

Participants: 1

Read full topic

Rtl ionic 4 sidemenu

Error when trying to update Contact properties

$
0
0

@ewehrmann wrote:

I am trying to write a function that will save a Contact to the device using the Ionic Native Contacts API. First time working with the Contact api.

I am able to get an instantiation of ‘contact’ but when I test in the browser I get an error ‘Cannot set property ‘name’ of undefined’. I also tried to compile and install an IPA file on my iOS device. The code compiled without error but when I trigger the function it does not add the contact to the device.

Two questions:

  1. Should I be able to test this API from browser without an error??? e.g. when I invoke the Call or SMS functions from browser they do not cause the app to error and stop, I just get get a message saying “cordova_not_available”

  2. Is there a problem with the syntax or logic in my code?

From home.ts page

import { Contacts, Contact, ContactField, ContactName } from ‘@ionic-native/contacts’;

constructor(public navCtrl: NavController, public navParams: NavParams, public search: SearchProvider, private callNumber: CallNumber, private sms: SMS, private contacts: Contacts, public alertController: AlertController) {
this.employees$ = ;
this.letters$ = ;
}

saveContact(fullName, phoneNumber) {
var first = fullName[0].split(" “)[0];
var last = fullName[0].split(” ")[1];
let contact: Contact = this.contacts.create();
console.log(contact[0])
contact.name = new ContactName(null, first, last);
contact.save().then(
() => this.presentAlert(),
(error: any) => console.error(‘Error saving contact.’, error)
);
}

From app.module.ts

import { Contacts} from ‘@ionic-native/contacts’;

providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
SearchProvider,
CallNumber,
Contacts,
HTTP,
SMS,
{provide: HttpBackend, useClass: NativeHttpFallback, deps: [Platform, NativeHttpBackend, HttpXhrBackend]}
]

Posts: 1

Participants: 1

Read full topic

Ion-item-sliding no working in v4 after reload items

$
0
0

@Villaescusa wrote:

Hello,

I have an ion-list that shows a list of ion-item-sliding with the option of “delete” in each one. When I delete one, I reset the array of elements and ask to the server to get me all of them again. After reload all items, the sliding is not working, it is showing the items but I can not slide any of them.

Could you help me?

HTML

<ion-content>
    
  <div >      
      <ion-segment [(ngModel)]="typeConf" >
        <ion-segment-button value="Users">
          <div > <ion-icon slot="start" name="person"></ion-icon > Usuarios </div>
        </ion-segment-button>
        <ion-segment-button value="Profiles">
          <div > <ion-icon slot="start" name="people"></ion-icon > Perfiles </div>
        </ion-segment-button>
        <ion-segment-button value="NewUsers">
          <div > <ion-icon slot="start" name="person-add"></ion-icon > Esperando <ion-badge color="danger" *ngIf="getNumUser()">{{getNumUser()}}</ion-badge> </div>
        </ion-segment-button>
      </ion-segment>
    </div>  
    ....
      <ion-list *ngSwitchCase="'Profiles'">
        <ion-item-sliding *ngFor="let p of sqlProfiles">
          <ion-item >
            {{p.name}}
            <ion-icon name="arrow-dropleft" color="primary" slot="end"></ion-icon>
          </ion-item>
          <ion-item-options>
            <ion-item-option color="danger" (click)="presentPromptDelProfile(p)">
              <ion-icon name="trash"></ion-icon>
              Del.
            </ion-item-option>
          </ion-item-options>
        </ion-item-sliding>     
      </ion-list>
  
  ....
        
    </div>
  </ion-content>

.TS

async presentPromptDelProfile(profile){
 
   const alert = await this.alertCtrl.create({
     header: 'Borrar perfil: '+ profile.name,
     message: '¿Desea borrar el perfil?',
     buttons: [
       {
         text: 'Cancelar',
         role: 'cancel',
         handler: data => {
           console.log('Cancel clicked');
         }
       },
       {
         text: 'Borrar',
         handler: data => {
           
             this.delProfile( profile);
           
         }
       }
     ]
   });
   await alert.present();
 }

 delProfile(profile) {
   this.provMess.modifyObj('delProfile',{idProf:profile.id, siteID:this.global.user.siteID}).then(elements => {
             this.sqlProfiles = elements;
         }).catch(err=>{
             console.log("ERROR DELETING PROFILES");
         });
 }

Ionic:

ionic (Ionic CLI) : 4.8.0 (C:\Users\villa\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-rc.1
@angular-devkit/build-angular : 0.11.4
@angular-devkit/schematics : 7.1.4
@angular/cli : 7.1.4
@ionic/angular-toolkit : 1.2.2

Cordova:

cordova (Cordova CLI) : not installed
Cordova Platforms : android 7.1.4
Cordova Plugins : not available

System:

NodeJS : v8.9.1 (C:\Program Files\nodejs\node.exe)
npm : 5.6.0
OS : Windows 10

Posts: 1

Participants: 1

Read full topic


PouchDB Database(.db) file not created in iOS & Android, while use ionic 4.x

$
0
0

@sudalaiyandi wrote:

Issue

I have created ionic app with latest version(4.x).For these, I have created pouchdb for access application.I used “cordova-sqlite” as adapter for pouchdb access in iOS/Android.

new PouchDB(‘employees.db’, { adapter: ‘cordova-sqlite’, location: ‘default’ } ) While i used this line database file not created in specific path. For support of pouchdb, i’ve added these plugin’s cordova-plugin-file and cordova-plugin-sqlite-2

Also get this error
ERROR Error: Uncaught (in promise): TypeError: process.nextTick is not a function TypeError: process.nextTick is not a function at home-home-module.js:26515 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.js:2736) at Object.onInvoke (vendor.js:51104) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.js:2735) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (polyfills.js:2495) at polyfills.js:3234 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2768) at Object.onInvokeTask (vendor.js:51095) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2767) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:2540) at resolvePromise (polyfills.js:3176) at polyfills.js:3241 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2768) at Object.onInvokeTask (vendor.js:51095) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2767) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:2540) at drainMicroTaskQueue (polyfills.js:2946)

If i used previous version of ionic database file is created.

Info

  • Environment: hybrid app

  • Platform: iOS/Android

  • Adapter: cordova-sqlite

  • Server: CouchDB

  • PouchDB Version : 6.3.4

  • cordova-plugin-sqlite-2 : 1.0.4

  • cordova-plugin-file : 6.0.1

  • pouchdb-adapter-cordova-sqlite : 2.0.3

  • pouchdb-find: 6.3.4

  • Ionic:

    ionic (Ionic CLI) : 4.10.1 (/usr/local/lib/node_modules/ionic)
    Ionic Framework : @ionic/angular 4.0.0
    @angular-devkit/build-angular : 0.12.4
    @angular-devkit/schematics : 7.2.4
    @angular/cli : 7.2.4
    @ionic/angular-toolkit : 1.3.0

  • Cordova:

    cordova (Cordova CLI) : 8.0.0
    Cordova Platforms : android 7.0.0, ios 4.5.5
    Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.1, (and 5 other plugins)

  • System:

    ios-deploy : 1.9.2
    NodeJS : v8.11.3 (/usr/local/bin/node)
    npm : 6.1.0
    OS : macOS High Sierra
    Xcode : Xcode 9.4.1 Build version 9F2000

Reproduce

Create ionic app, with latest version(4.10.1), then access pouchdb in iOS/Android.

Posts: 1

Participants: 1

Read full topic

Address Bar - auto hide or force

$
0
0

@shepard wrote:

With Ionic 4, is there now a way to hide the address bar?
Either automatically when scrolling or forced?
I am referring to in a browser.

Posts: 1

Participants: 1

Read full topic

[Ionic 4] Best way to implement push notifications?

$
0
0

@charlescc wrote:

Hey,

I was wondering what is the best way to implement push notifications on iOS with Ionic.

I’m struggling with this since a long time and never succeed. It looks like both FCM and FirebaseMessaging plugins are conflicting in ios and I couldn’t directly use firebase library.

I’m handling user authentification with cordova-plugin-firebase, so I need it to be compatible.

When building with cordova-plugin-firebase-messaging, I get this error :

ld: warning: directory not found for option '-L/Users/me/Library/Developer/Xcode/DerivedData/My-Project-fkvzdvzecsfhqzhpfyinlvud/Build/Products/Debug-iphoneos/FirebaseCore'
ld: warning: directory not found for option '-L/Users/me/Library/Developer/Xcode/DerivedData/My-Project-fkvzdvzecsfhqzhpfyinlvud/Build/Products/Debug-iphoneos/FirebaseMessaging'
ld: warning: directory not found for option '-L/Users/me/Library/Developer/Xcode/DerivedData/My-Project-fkvzdvzecsfhqzhpfyinlvud/Build/Products/Debug-iphoneos/GoogleUtilities'
ld: warning: directory not found for option '-L/Users/me/Library/Developer/Xcode/DerivedData/My-Project-fkvzdvzecsfhqzhpfyinlvud/Build/Products/Debug-iphoneos/Protobuf'
ld: warning: directory not found for option '-L/Users/me/Library/Developer/Xcode/DerivedData/My-Project-fkvzdvzecsfhqzhpfyinlvud/Build/Products/Debug-iphoneos/nanopb'
ld: library not found for -lFirebaseCore
clang: error: linker command failed with exit code 1 (use -v to see invocation)

After “pod install”, though I get this error :
ld: 1093 duplicate symbols for architecture arm64

With cordova-plugin-fcm, I get :
Property 'delegate' not found on object of type 'FIRMessaging

For both plugins, I have no problem in Android. I have no idea what to do.

How do you manage that in your apps ?

Posts: 1

Participants: 1

Read full topic

Ion-nav push method not working in Ionic 4

$
0
0

@riteshrajoria wrote:

I am using Ionic v4 and using router navigation for all page navigation/routing.

However, I have a peculiar case requirement where I wish to push new components on to the stack without affecting the app overall router (Ionic 4 document - ionicframework.com/docs/api/nav). I am using a slide-in menu (split-pane) that needs to have its own page stack.

My currentPage html (current-page.page.html) has a button component -

<ion-button (click)="goToNextPage()">Next Page</ion-button>

My currentPage script file (current-page.page.ts) has the following code -

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams } from '@ionic/angular';
import { NextPage } from '../next-page/next-page.page';

@Component({
  selector: 'current-page',
  templateUrl: './current-page.page.html',
  styleUrls: ['./current-page.page.scss'],
})
export class CurrentPage implements OnInit {

  constructor(public navCtrl: NavController, public navParams: NavParams) { }

  goToNextPage () {
    this.navCtrl.push('NextPage');
  }

  ngOnInit() {
  }

}

However, I get the format error as Property 'push' does not exist on type 'NavController'

Not sure how to use the push method properly. Any help will be appreciated.

Posts: 1

Participants: 1

Read full topic

Pages take a long time to load with href attribute

$
0
0

@josiasbueno wrote:

Hello everyone.
I’m having trouble with the links inside my Ionic 4 applications, more specifically with page load time.
I created some test apps with blank templates, sidemenu and tabs and they all have the same problem: when I click on an item with the href attribute, it takes a long time to load the requested page, even if it has only the title in the header, with no more content.
By clicking the tab icons at the bottom, the pages (screens) load quickly, even if they were created manually. The problem is only in pages loaded via href.
I do not know what to do to solve this.

Posts: 1

Participants: 1

Read full topic

How to test Android apps in Emulator/Device via WSL (Windows Subsystem Linux)

$
0
0

@jasoncartermartin wrote:

Hello, I have been trying for over a week now to figure out how to test Ionic Android apps through WSL (Windows Subsystem Linux). I use WSL for my development environment (Ubuntu version 16.04) with Windows 10, and it has worked great for everything so far except for trying to develop Native Ionic apps and test in Android.

I have installed Android Studio/SDK, Java, and Gradle on both Windows and the Linux Subsystem (as well as installed & configured proper Android environments using sdkmanager), and have tried a combination of using both environments to build and emulate Android apps. Since WSL can launch native Windows executables such as.exe files, in theory I believe this should be possible to do completely via WSL.

However, the only successful method I have found so far is to install the android-sdk in Linux, build the .apk file via ionic cordova build android, and then manually open the emulator on Windows and drag and drop the created .apk file to the emulator to install and run the build. This is quite cumbersome, but so far has been the only method I have found that works.

If I set up my environment to be completely based on the Linux environment, running ionic cordova requirements works successfully and returns the following:

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: installed android-28,android-27
Gradle: installed /opt/gradle/gradle-5.1.1/bin/gradle

I am also successfully able to build a .apk file. The problem is that I cannot seem to use the emulator, because WSL has no GUI, and I need to be able to use the emulator based in Windows.

If I set up my environment based on Windows (noting that I still need the Java run time environment based in Linux), everything else appears to work but I receive the following error when running ionic cordova build android or ionic emulate android:

Execution failed for task ':CordovaLib:compileDebugAidl'. 
> java.lang.IllegalStateException: aidl is missing

Running ionic cordova requirements with that configuration gives me the following output:

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: not installed
android: Command failed with exit code ENOENT
Gradle: installed /mnt/c/Program Files/Android/Android Studio/gradle/gradle-4.10.1/bin/gradle

For some reason, with my Windows configuration it does not recognize the Android target (even though it is properly installed), which leads to the ':CordovaLib:compileDebugAidl' error.

Does anybody have any advice on how to test Ionic Android apps with the emulator while using WSL? Thank you!!

Posts: 1

Participants: 1

Read full topic

Ionic 4 : Cannot Set Background Image

$
0
0

@junjunhernandez wrote:

Hello there,

I am trying to change the background image of ion-content but cannot make it work.
I did:

ion-content {
	background-image: url('/assets/app_images/image.png') !important;
}

The above somehow works ONLY IF I UNCHECK the styling of :host using Google Chrome’s console.
There is always a layer that has a white background in front of the ion-content, that is why the background image does not show and the only thing I can see is the white background of :host.

So I tried:

.inner-scroll {
	background-image: url('/assets/app_images/school.png') !important;
}

and

.scroll-y {
	background-image: url('/assets/app_images/school.png') !important;
}

but the result is still the same…

Before unchecking the background of :host

I found out that its there after unchecking the background of :host

background1

background3

I also added encapsulation:

ViewEncapsulation.None

on my component but it doesn’t seem to help. No effect at all.

How can I make the background show?

I have developed mobile apps using Ionic 3 with so much ease but its pain using Ionic 4.
I actually wasted 7 hours of searching on forums as well as trial and error with no success for just a simple background image. :tired_face: TIA. :slight_smile:

Posts: 3

Participants: 2

Read full topic


Cannot get rid from this crash Ionic 4 + Firebase

$
0
0

@Manel00 wrote:

Im starting on a Ionic 4 tutorial and I’m getting this big crash dont know why, i’m cleaning cache, removing /node_modules, installing npm --unsafe-perm… but cannot get rid from this error, thank you so much anyway

manel@XXX:~/Ionic4Tutorial/app$ sudo npm i

> grpc@1.18.0 install /home/manel/Ionic4Tutorial/app/node_modules/grpc
> node-pre-gyp install --fallback-to-build --library=static_library

node-pre-gyp WARN Using request for node-pre-gyp https download
[grpc] Success: "/home/manel/Ionic4Tutorial/app/node_modules/grpc/src/node/extension_binary/node-v67-linux-x64-glibc/grpc_node.node" is installed via remote

> node-sass@4.10.0 install /home/manel/Ionic4Tutorial/app/node_modules/node-sass
> node scripts/install.js

Unable to save binary /home/manel/Ionic4Tutorial/app/node_modules/node-sass/vendor/linux-x64-67 : { Error: EACCES: permission denied, mkdir '/home/manel/Ionic4Tutorial/app/node_modules/node-sass/vendor'
    at Object.mkdirSync (fs.js:774:3)
    at sync (/home/manel/Ionic4Tutorial/app/node_modules/mkdirp/index.js:71:13)
    at Function.sync (/home/manel/Ionic4Tutorial/app/node_modules/mkdirp/index.js:77:24)
    at checkAndDownloadBinary (/home/manel/Ionic4Tutorial/app/node_modules/node-sass/scripts/install.js:114:11)
    at Object.<anonymous> (/home/manel/Ionic4Tutorial/app/node_modules/node-sass/scripts/install.js:157:1)
    at Module._compile (internal/modules/cjs/loader.js:736:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:747:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:568:12)
    at Function.Module._load (internal/modules/cjs/loader.js:560:3)
  errno: -13,
  syscall: 'mkdir',
  code: 'EACCES',
  path:
   '/home/manel/Ionic4Tutorial/app/node_modules/node-sass/vendor' }

> node-sass@4.10.0 postinstall /home/manel/Ionic4Tutorial/app/node_modules/node-sass
> node scripts/build.js

Building: /usr/local/bin/node /home/manel/Ionic4Tutorial/app/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [ '/usr/local/bin/node',
gyp verb cli   '/home/manel/Ionic4Tutorial/app/node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library=' ]
gyp info using node-gyp@3.8.0
gyp info using node@11.8.0 | linux | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` succeeded python2 /usr/bin/python2
gyp verb check python version `/usr/bin/python2 -c "import sys; print "2.7.14
gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j
gyp verb get node dir no --target version specified, falling back to host node version: 11.8.0
gyp verb command install [ '11.8.0' ]
gyp verb install input version string "11.8.0"
gyp verb install installing version: 11.8.0
gyp verb install --ensure was passed, so won't reinstall if already installed
gyp verb install version is already installed, need to check "installVersion"
gyp verb got "installVersion" 9
gyp verb needs "installVersion" 9
gyp verb install version is good
gyp verb get node dir target node version installed: 11.8.0
gyp verb build dir attempting to create "build" dir: /home/manel/Ionic4Tutorial/app/node_modules/node-sass/build
gyp ERR! configure error
gyp ERR! stack Error: EACCES: permission denied, mkdir '/home/manel/Ionic4Tutorial/app/node_modules/node-sass/build'
gyp ERR! System Linux 4.13.0-46-generic
gyp ERR! command "/usr/local/bin/node" "/home/manel/Ionic4Tutorial/app/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /home/manel/Ionic4Tutorial/app/node_modules/node-sass
gyp ERR! node -v v11.8.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: node-sass@4.10.0 (node_modules/node-sass):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: node-sass@4.10.0 postinstall: `node scripts/build.js`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

added 1246 packages from 1226 contributors and audited 51336 packages in 20.228s
found 0 vulnerabilities

Posts: 1

Participants: 1

Read full topic

Como solucionar problemas de carga ionic

$
0
0

@josele2015 wrote:

Estaba intentando generar nuevo splash pero no carga las imagenes de la carpeta resources. Ya he elimado multiples vece la carpeta de android desde linea de comando pero solo se queda cargando los recursos para android, lo probe en otra maquina y si funciona el splash

Posts: 1

Participants: 1

Read full topic

Ionic4 Cordova Web Api Calling Angular HttpClient With Production Problem

$
0
0

@mesutcakir wrote:

Hi Everone,

My project is correctly run on “Ionic serve -l” command. (Proxy on active)

but “ionic cordova run browser --prod or ionic cordova run android --prod” command not working. Because proxy mode not working production mode. (I’ve tried Apk Generated and device mode)

I am send Post Method, but angular send Options method.

This scope only my send header when

 return this.http.post(this.api.base + this.api._getToken, "grant_type=password&username=" + username + "&password=" + password, {
            headers: new HttpHeaders({
                'Content-Type': 'application/json'
            })
        });

if I not append headers then success work on post. But My needed Custom Headers.

OPTIONS https://localhost:44373/getToken  
Access to XMLHttpRequest at 'https://localhost:44373/getToken' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

image

Ionic:

   ionic (Ionic CLI)             : 4.10.2 (C:\Users\*\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.3
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : 1.2.3

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, browser 5.0.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.3, (and 9 other plugins)

System:

   Android SDK Tools : 25.2.3 (c:\Users\*\AppData\Local\Android\Sdk)
   NodeJS            : v10.14.2 (C:\Program Files\nodejs\node.exe)
   npm               : 4.6.1
   OS                : Windows 10

package.json

  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.3.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.29",
    "cordova-android": "~7.1.4"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.12.3",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "~7.2.3",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.2.0",
    "@ionic/lab": "1.0.19",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.12.0",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslint": "~5.12.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-x-toast": {},
      "cordova-plugin-native-spinner": {}
    },
    "platforms": [
      "android"
    ]
  }

index.html

 <meta http-equiv="Content-Security-Policy" content="default-src *; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

config.xml


 <content src="index.html" />
    <access origin="*" />
    <allow-intent href="*" />
    <allow-navigation href="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />

Posts: 3

Participants: 2

Read full topic

Android tablet as an HMI?

$
0
0

@gusgonnet wrote:

Hi guys,

I wanted to know if anyone had experimented with an Android tablet like this one.
image

Since I’m developing an Android app with Ionic, I thought I could run my app in this type of HMI tablet.

No, a regular tablet will not do it, mind you, but tablets geared to kiosk uses will do, like this:

Ideally, the price would be around $100 USD.

Anybody around this community would have any thoughts, links or experiences from the past?
Thanks!
Gustavo.

Posts: 1

Participants: 1

Read full topic

Ion-item-divider href

$
0
0

@reedrichards wrote:

Anyone knows how to add a router href on ion-item-divider?

I use ion-item-divider in my ion-menu to group my ion-item, which have href, and I would like to add an action/navigation to these dividers too, but don’t know how as there isn’t such an attribute according the doc https://ionicframework.com/docs/api/item-divider

P.S.: I’m using Ionic core not angular

Posts: 1

Participants: 1

Read full topic

Viewing all 48977 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>