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

HttpClient doesn't work on a Huawei device. Compatibility problem?

$
0
0

@ioclaudio wrote:

Hi,
I have an Ionic4 app that calls some web services using HttpClient;


import { HttpClient } from '@angular/common/http';
...
constructor(private plt: Platform, private  httpClient:  HttpClient,...) {...}
...
  login(username, password) {
    const loginUrl = this.settingsManager.getBaseWsUrl() + '/auth/login';
    return  this.httpClient.post(loginUrl, {
      email: username,
      password: password
    });
  }

I’ve tried this app, with this code on some Android devices and it works well.
It works well in debug mode with Chrome.
Now I’ve installed this app on a Huawei device (Honor Play COR-L29 with Android 9) and on this device the httpClient call fails.
I can’t see the error, so I can’t understand what is the problem.
The device is online.

I’ve installed the Ionic Dev app on this device to try the app, but I can’t login because it seems that Ionic Dev too doesn’t reach the Network.
So, is it a problem between the network plugin of Ionic and Huawei?
Do you ever had this problem?
Are there any other tests I can do to debug the problem?
I have no idea.

Thank you very much

Claudio

Posts: 2

Participants: 2

Read full topic


How to change alternative active button color

$
0
0

@flycoders_sourav wrote:

I have a 4 buttons i want to do while any user clicked on any button of theme that clicked button should be active . how can i do that please can your tell me anyone because am suck over 7 days on this . Any help or suggestion will be highly appreciated
Thanks in advance

Posts: 1

Participants: 1

Read full topic

Ionic 4: Execution failed for task ':app:processDebugResources'

$
0
0

@B3nvo wrote:

Hi,

I recently came across an error message saying

C:\Users\user\Documents\Development\ionic\TriStar\platforms\android\app\build\intermediates\incremental\mergeDebugResources\merged.dir\values-v28\values-v28.xml:7: error: resource android:attr/dialogCornerRadius not found.
C:\Users\user\Documents\Development\ionic\TriStar\platforms\android\app\build\intermediates\incremental\mergeDebugResources\merged.dir\values-v28\values-v28.xml:11: error: resource android:attr/dialogCornerRadius not found.
C:\Users\user\Documents\Development\ionic\TriStar\platforms\android\app\build\intermediates\incremental\mergeDebugResources\merged.dir\values\values.xml:229: error: resource android:attr/fontVariationSettings not found.
C:\Users\user\Documents\Development\ionic\TriStar\platforms\android\app\build\intermediates\incremental\mergeDebugResources\merged.dir\values\values.xml:229: error: resource android:attr/ttcIndex not found.
error: failed linking references.
FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:processDebugResources'.
> Failed to execute aapt

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

* Get more help at https://help.gradle.org

BUILD FAILED in 59ss'**

i was able to build fine in the morning, but when i came back from lunch, i instantly got this error.

i have tried to remove and add android back, but that was no luck.
after that i tried to add the following in my platform/android/project.properties

from

cordova.system.library.2=com.android.support:support-v4:27+

to

cordova.system.library.2=com.android.support:support-v4:27.1.0

in between building i had added file opener plugin and androidpermissions plugin, but im unsure if this would cause the problem. i have uninstalled androidpermissions and that didn’t work. i have also uninstalled the file opener but this didn’t work either.

ionic info

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (C:\Users\user\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : not installed
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 11 other plugins)

System:

   NodeJS : v10.15.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

thanks
~benvo

Posts: 1

Participants: 1

Read full topic

[IONIC 4] Progress bar not progressing while uploading file

$
0
0

@AdamGelineau wrote:

Hi guys !

I’m implementing a simple progress bar in my Ionic 4 project, but it doesn’t progress at all while I’m uploading a file unless I click anywhere on my app.
If I don’t click, it juste stays at 0, but when I click somewhere, the progress bar gets updated so it progresses.

How to do to make it progress without clicking anywhere ?

Here’s my ts file:

export class MyUploadPage implements OnInit {

    uploadPercent: any = 0;
    videoFileUpload: FileTransferObject;

    constructor(...) {}

    this.videoFileUpload.onProgress((data) => {
          this.uploadPercent = Math.round(data.loaded / data.total);
    });
}

Here’s my progress bar:

<ion-row class="uploading">
  <ion-col text-center>
    <ion-progress-bar [value]="uploadPercent"></ion-progress-bar>
  </ion-col>
</ion-row>

Any ideas ? Thanks !

Posts: 1

Participants: 1

Read full topic

Update / install ionic not globaly for testing (on MAC)

$
0
0

@b5518388 wrote:

hi folks,

i have the following problem. i have multiple apps build in ionic 3 and it works fine but now i have build a new app in ionic 4 for testing it. i developed the app on another windows computer so i still can maintenance my older apps for ionic 3.
now i only have one mac and want to try ionic 4 also on ios with xcode. here is where i need a localy ionic 4 installation and no globally - so i am still able to maintenance and build the ionic 3 apps like before.

i found this thread here but i dont really get it…
can someone make a clear instruction how to? would be very nice and i think it will also be very usefull for other ppl who just want to make test build before globally update the framework.

Posts: 1

Participants: 1

Read full topic

Reload / reset recaptcha (grecaptcha)

$
0
0

@mrg250 wrote:

Hello,
I’m using Firebase for authentication (specifically the phone auth method),
and it’s working fine (validation etc.), except for one thing;
If the user enters the wrong code, or dismisses the validating prompt, he can’t re-enter the cycle again (prompt -> receiving message -> validate) because I can’t reset the recaptcha, and because of that he needs to reenter the app in order to reset everything.

How do I fix this ?

CODE:

html:

<ion-content padding class="popup-bg">
  
  <form [formGroup]="profile" (ngSubmit)="submitProfile()">
     ...
    <button  id="submitButton" ion-button full [disabled]="!profile.valid" (click)="submit()">submit</button>
  </form>
  <div id="recaptcha"></div>
</ion-content>

.ts:

        declare var grecaptcha: any;
...
	private _recaptchaVerifier: auth.RecaptchaVerifier;

...
	ionViewDidLoad() {
			
			this._recaptchaVerifier = new auth.RecaptchaVerifier('submitButton', {
				'size': 'invisible',
				'callback': function(response) {
					this.submitProfile()
				},
				'expired-callback': ()=>{
					this.resetReCaptcha()
				}
				
			});
		}
		
...
private submitProfile() : void{
			
			if(!this.checkPhone()){
				return;
			}
			let profile: object = {
				name: this.profile.get('name').value,
				phone: this.profile.get('phone').value
				
			};
			
			let validPhoneNumber: string =String(profile['phone'])
			//auth().settings.appVerificationDisabledForTesting = true;
			this._authAf.auth.signInWithPhoneNumber(validPhoneNumber, this._recaptchaVerifier).then(result=>{
				const alertSignIn = this._alertCtrl.create({
					title: 'enter code',
					inputs: [{type: 'number', name: 'vCode'}],
					buttons: [{text: 'validate', handler: data => {
						
						const loadSignIn = this._loadingCtrl.create({})
						loadSignIn.present().then(()=>{
							
							result.confirm(data['vCode']).then(() =>{
								this._userHandler.init();
								this._userHandler.addUser(profile);
								// this._messagingHandler.getToken();
								loadSignIn.dismiss()
							}, e=>{
								loadSignIn.dismiss()
								this.resetReCaptcha();
								return
							})	
						});
					}}
				]
			});
			alertSignIn.present();
		}).catch((e)=>{
			
			this.resetReCaptcha();
		})
	}
...

// I've tried this. not working

private resetReCaptcha(){
		this._recaptchaVerifier.render().then(function(widgetId) {
			grecaptcha.reset(widgetId);
		})
	}
	

Posts: 1

Participants: 1

Read full topic

Ionic 3- sqlite crashes app when no.of rows > 180000

$
0
0

@fiyiem wrote:

hello, My app crashes when reading data from local sqlite storage. I have determined that the Select statement crashes the app when the no.of rows in the table exceeds 180,000. At this time app uses Storage of about 43Mb and memory usage is about 120MB (from app info) Select query format is 'Select col1,col4,col5 from table1 where date = date(‘2019-04-29’); In my test scenario the select query should return all the data of 180,000 rows. How do I make this perform better? I am testing the app on a Samsung Galaxy S7 with Android version 8.
Thank you!

Posts: 1

Participants: 1

Read full topic

Page show error after the second attemp when i click onsubmit

$
0
0

@Fares95 wrote:

Hello , i am unable to solve that problem :
my app show the following error after i clicked for the second attem the submit button
error :


my ts file :

import { Component } from '@angular/core';
import { NavController, NavParams, ToastController, LoadingController} from 'ionic-angular';
import { Http, Headers, RequestOptions }  from '@angular/http';
import { InscriptionPage } from '../inscription/inscription';
import { EspaceCitoyenPage } from '../espace-citoyen/espace-citoyen';
import { EspaceAgentPage } from '../espace-agent/espace-agent';
import { FormBuilder, FormGroup, Validators, NgForm, FormControl,ValidatorFn,AbstractControl } from '@angular/forms';
import { PostProvider } from '../../providers/post-provider';
import { AuthService } from '../services/auth.service';

@Component({
  selector: 'page-connecter',
  templateUrl: 'connecter.html',
})
export class ConnecterPage {

  loading: any;
  private Form : FormGroup;
  cin: string = "";
  password: string= "";

  constructor(public navCtrl: NavController, private formBuilder: FormBuilder,
    public loadingCtrl: LoadingController, private postPvdr: PostProvider,
    public authService: AuthService, public http: Http, public toastCtrl: ToastController) {

      this.Form = formBuilder.group({
        cin: ['', Validators.compose([Validators.required, Validators.pattern('[0-9]*'), Validators.minLength(8), Validators.maxLength(8)])] ,
        password: ['', Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(15) ])],
      });
      this.loading = this.loadingCtrl.create({
        cssClass: 'my-loading-class',
        spinner: 'bubbles',
        duration: 2000
      });
    }

    ionViewDidLoad()
    {
      console.log('ionViewDidLoad ConnecterPage');
    }

    addLogin()
    {
      let body =
      {
        cin: this.cin ,
        password: this.password ,
        aksi: 'add_Login'
      }

      let type = "application/json; charset= UTF-8";
      let headers = new Headers ({ 'Content-Type': type });
      let options = new RequestOptions ({ headers : headers });

      this.postPvdr.postData(body) .subscribe( (data) => {
      var alerts= data.msg;
        if(data.success){
          console.log('connexion réussie');
          this.navCtrl.push(EspaceCitoyenPage);
        }else if( data.success== false) {
          console.log('connexion échouée');
          const toast = this.toastCtrl.create({
     message: alerts ,
     duration: 2000
   });

   toast.present();
 }
  });
    }

    onSubmit(form: NgForm)
    {
      console.log (this.authService.isAuth);
      this.cin=this.Form.controls.cin.value;
      console.log (this.cin);
      this.password=this.Form.controls.password.value;
      console.log (this.password);
      this.loading.present();
      setTimeout(
        () => {
          this.addLogin();
          this.authService.signIn();
          console.log(this.authService.isAuth);
          console.log(form.value);
          this.loading.dismiss();
        }, 2000
      );
    }

  }

Posts: 1

Participants: 1

Read full topic


Ionic 3, Ionic serve F12 styles shows nothing, no reload after project update

$
0
0

@rnmr wrote:

Hi, I’m using Ionic 3 and for some reason when testing my app with ionic serve and using F12 to adjust the screen, I sometimes want to check the styles but the styling list shows nothing, when I add a class to something it does show and chenges it in the display but does’t display the styles in there. It only does it after I’ve cancelled the compilation with Ctrl + C and even then I’m unable to properly alter them.

Also, another problem that perhaps goes along with this one is that whenever I update my project after changing a few things it doesn’t refresh, pressing F5 doesn’t update it either, it just stays with the project it got when I compiled with ionic serve, I have to cancel it and recompile it to see the changes, it’s tiresome working like this, perhaps these 2 issues are related?, yeah they do happen in the same project:

"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@ionic-native/core": "^4.20.0",
"@ionic-native/keyboard": "^5.5.1",
"@ionic-native/splash-screen": "~4.20.0",
"@ionic-native/status-bar": "~4.20.0",
"@ionic/pro": "2.0.4",
"@ionic/storage": "2.2.0",
"cordova-android": "8.0.0",
"cordova-plugin-android-permissions": "1.0.0",
"ionic-angular": "3.9.5",

“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-android-permissions”: {}
},
“platforms”: [
“android”
]
}

Posts: 1

Participants: 1

Read full topic

How to get the last shown page?

$
0
0

@donotsue wrote:

Hi there,

somehow I need to get the name of the last shown page.

There are three pages: Page one, two and three.

Starting at the first page, I click around over the second straight ahead to the third page. When I go back from the third page to the second page, either by clicking on back in html, calling navCtrl.back() or pushing the smartphones back button, I need to know at the showing state of the second page, if the last page was the first or third page. It’s that simple.

I cannot use the way over GET-parameters in the calling route path for the second page, when pushing any back buttons. A way over a singleton/service is imaginable, but isn’t there an eleganter way?

Best regards
Sue

Posts: 2

Participants: 1

Read full topic

Can't change focus/highlight color on div+item+input

$
0
0

@SanduCuragau wrote:

I have a div, inside it an item and inside it an input, its a login so I have username and password, I’m doing a thing where when he clicks the enter button while on the username input he then focuses the password camp, he knows where to focus cuz I put #b tag on password and in code I tell him to focus that element, it works but it gets this horrible ugly white background, I’ve inspected it on chrome and tried changing literally all the variables anywhere close that div/item/input that had anything to do with focus and highlight to transparent, but nothing did the job, how can I prevent this from happening?

image

image

Posts: 1

Participants: 1

Read full topic

Android fullscreen not working with ionic 4 (Notch + toolbar)

$
0
0

@eyeswideopen wrote:

Hey,
we are in the middle of developing and testing our app on various devices and encounter an issue with android:

The ionic app doesnt expand to the areas next to a “notch” or a non present toolbar at the bottom.

ios handles it quite well:


The upper area besides the notch stays black (iOS iphone x handles it quite well and styles the area)
The lower black bar is where the deactivated toolbar would be i guess.

How can i make my android app behave like on the iPhone X where all these areas are covered properly?

Thanks for any hints/advice!

Posts: 1

Participants: 1

Read full topic

Npm packages question :(

$
0
0

@VoltAmper wrote:

The packages installed with npm, when the app is built are auntomatically loaded in the app?

How can I import those packages to ionic?

Sorry for the questions, I’m noob yet

Posts: 1

Participants: 1

Read full topic

How to avoid cache in pages in ionic,Please tell me some solution,i tried all solution from web but not worked

$
0
0

@manumohanabc wrote:

When i tried to show a page twice the cache of the previous one is loaded.The ionViewWillEnter() function is not working on second time

Posts: 1

Participants: 1

Read full topic

Can anyone help in ionic3


Open ionic project using only src folder - New to ionic

$
0
0

@dbg wrote:

Hi,

I am new to ionic and I got a project source code from a friend. He sent only the src folder of the ionic project. I want to use this source code and run using ionic serve
How can I open the project and run it ? what commands should I use?

Please help me.

Posts: 1

Participants: 1

Read full topic

Headers are not accepting

$
0
0

@mutheashok wrote:

Hi,
I am trying to download certificate from ionic from my wordpress Leardash plugin.
In chrom’s post man using url https://key2know-learning.dk/certificates/certificate/?course_id=324&cert-nonce=fcb9753683
and adding headers Authorization. And I am able to get certificate.

But when I try to access same from Ionic app I am getting error Access to XMLHttpRequest at ‘https://key2know-learning.dk/certificates/certificate/?course_id=324&cert-nonce=542e9d5993’ from origin ‘http://localhost:8100’ has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

This is not CORS Access-Control-Allow-Origin error. Because I am able to get my posts and courses and all. But here in error clearsly says it is “Access-Control-Allow-Headers” error.

Please help.

Posts: 1

Participants: 1

Read full topic

Separating desktop and mobile, or Ionic for both?

$
0
0

@viktorgullmark wrote:

Hi all!

I’ve used Ionic in the past, but only for mobile alone. I’m about to start a new project and am still in the decision-making process of choosing frameworks and Ionic is the plan as of now.

My problem is that I don’t know if it’s suitable to use Ionic alone for this project, or if it complicates things for the desktop-development. I know Ionic supports desktop, but I don’t want it to be a struggle compared to building pure desktop outside of Ionic.

The app I’m building will be targeting desktop in the first hand, but we think a great portion of our users will use it directly in their mobile browser, which is why we’re considering Ionic. We do not have any plans on releasing it as an app in the stores, since we don’t require any native functionality at all.

So, I’m leaning towards these two options, and would love your guidance on this:

1.) Build everything in Ionic, even if the main-target is desktop-browsers
2.) Build the desktop-browser part outside of Ionic (in pure Angular), but with a shared code-base that extends to our Ionic app which will be used for mobile. So in reality two apps but with shared code in-between.

My main concern is that option 1 will complicate things, compared to running Angular alone, since Ionic is built for mobile in the first place.

Thanks for your input!

Posts: 1

Participants: 1

Read full topic

Which is the right version of Ionic Native to use?

$
0
0

@ioclaudio wrote:

Hi,
I’m developing an Ionic4 app.
I can see that if you create a new brand app the components the @ionic-native components are at the version 5.0.0.
For example:
"@ionic-native/core": "^5.0.0",

I can see that all these components are upgradable to the version:
"@ionic-native/core": "^5.5.1",

Since I have some problem with the @ionic-native/barcode-scanner I don’t know if I should upgrade all the @ionic-native components to the last version.

So the question is when we should upgrade our @ionic-native components?
And should they be all to the same version?

Thank you very much

Claudio

Posts: 1

Participants: 1

Read full topic

Can't use android studio after update

Viewing all 49308 articles
Browse latest View live


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