Quantcast
Channel: Ionic Forum - Latest topics
Viewing all 71235 articles
Browse latest View live
↧

Hide and show it

October 10, 2020, 6:19 pm
$
0
0

Hello All.

I implemented and ionic menu following the ionic menu example and the only way to show it is:

without IonSplitPane it does not show but with IonSplitPane the menu is fix in the left and I want to show it and hide with a menu button.

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
    <IonSplitPane contentId="main">
          <Menu />
      <IonRouterOutlet>
        <Route path="/home" component={Home} exact={true} />
        <Route exact path="/" render={() => <Redirect to="/home" />} />
        <Route path="/registro" component={Registro} exact={true}></Route>
      </IonRouterOutlet>
      </IonSplitPane>

    </IonReactRouter>
  </IonApp>
);

1 post - 1 participant

Read full topic

↧
Search

415 (Unsupported Media Type)

October 10, 2020, 7:07 pm
$
0
0

hi I try postdata have been error 415 Unsupported Media Type :slight_smile:

error
error938×115 8.01 KB
  1. how to solve this case.
  2. how to add application/json on my typescript as below
    import { HttpClient, HttpHeaders } from ‘@angular/common/http’;

import { Injectable } from ‘@angular/core’;

import { environment } from ‘…/…/environments/environment’;

@Injectable({

providedIn: ‘root’

})

export class HttpService {

headers = new HttpHeaders();

// options = { headers: this.headers, withCredintials: false };

options = { headers: this.headers };

constructor(private http: HttpClient) {}

post(serviceName: string, data: any) {

console.log("data asli:", JSON.stringify(data));

const url = environment.apiUrl + serviceName;

return this.http.post(url, JSON.stringify(data), this.options);

}

}

thank you

3 posts - 2 participants

Read full topic

↧
↧

Am I using the latest version of Ionic 5?

October 10, 2020, 8:21 pm
$
0
0

I installed the latest version of the Ionic CLI using “npm install -g ionic@latest” (6.11.11) and created a new project.
I noticed in the package.json the @Ionic/Angular and core version was only 5.0.0.
“@ionic-native/core”: “^5.0.0”,
“@ionic-native/splash-screen”: “^5.0.0”,
“@ionic-native/status-bar”: “^5.0.0”,
“@ionic/angular”: “^5.0.0”,

Is this correct?
It appears there are later versions out (5.3.5).
Should I upgrade all the Ionic packages manually or should I be using 5.0.0?

$ ionic info

Ionic:

Ionic CLI : 6.11.11 (C:\Users\fullo\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.3.5
@angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics : 10.0.8
@angular/cli : 10.0.8
@ionic/angular-toolkit : 2.3.3

Capacitor:

Capacitor CLI : 2.4.2
@capacitor/core : 2.4.2

1 post - 1 participant

Read full topic

↧

HTTP service and httpmodule error

October 10, 2020, 10:09 pm
$
0
0

Hey, I was generally using the observable and httpClient but then I found out that my server doesn’t support cross-origin resource sharing, So I used HTTP as mentioned in Ionic4. But when I used it, it shows me the error message that:

image
image932×734 283 KB

When I google the resaon why: NullInjectorError: No provider for HTTP! They reply that we need to add HttpClientModule. But after I added in my app.module.ts and also my home.module.ts. I still run-in with this error. Here is how my provider service looks like and where it locates:
image
image1680×1156 233 KB
and this is how my folder looks like:
image
image468×1494 155 KB

Am I putting HTTP MODULE in the wrong place or was there something wrong with my structure? can someone help me with this! thank u!

2 posts - 1 participant

Read full topic

↧

How to add keyboard toolbar?

October 11, 2020, 12:28 am
$
0
0

Hi everyone, an ionic newbie here so pls dont attack me.
Im doing on my first ionic project and I saw online the idea of an html iframe That fits the screen. After hours of troubleshooting I got it to work. Not I want to add a keyboard toolbar (the one with Done) on iOS since it didn’t come by default. I tried looking online but without much help. Also do I need to rebuild and recompile after applying the change ? I can’t really test that feature in my browser.
Thanks in advance, again Im new to this :slight_smile:

image
image1125×2254 365 KB
image
image1125×529 135 KB

1 post - 1 participant

Read full topic

↧
↧

How to transfer [oject object] to array now

October 11, 2020, 1:28 am
$
0
0

It is such a simple HTTP request file and I had my statement page like this:

image
image1468×1332 301 KB

and my website: JSON file is this:https://reqres.in/api/products/3.
And I got an error message: core.js:4197 ERROR Error: Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays.
I searched through the google doc and realize that we cannot use response.json() since the response now already is a JSON file.
When I tried other suggestion and it doesn’t work in my file because I then got an error message: Property ‘data’ does not exist on type ‘Object’ when I tried: 
    this.server.get('https://reqres.in/api/products/3').subscribe(
      response => this.result = response.data);
      console.log(this.result);
  }

can someone give me a way transfer this object type to an array that can easily display in my html when using *ngFor in:

                <ion-title *ngFor = "let data of result">
                  {{data.text}}
                </ion-title>

1 post - 1 participant

Read full topic

↧

Ionic Vue3 CRUD Tutorial w/Composition API

October 11, 2020, 9:57 am
$
0
0

Weekend Update from my Vue3 CRUD Tutorial

Part 3 - In this video we handle the CRUD actions ( Create, Delete ) for the data, create a list to view the content and update the event emitted from my modal component.

Part 4 - In this video we handle the CRUD action ( Update ) for the data, work with props in vue3 and learn about watch on composition api

Vue 3 Ionic Firebase CRUD App - YouTube https://buff.ly/30UYWE0

1 post - 1 participant

Read full topic

↧

Csv files in ionic 3

October 11, 2020, 1:16 pm
↧
Search

Function calls are not supported in decorators but '' was called

October 11, 2020, 3:14 pm
$
0
0

I have created an Ionic 5 Angular 10 project and I am importing some animations as I have done for previous projects.

However I am getting the error below. Any ideas what is causing this?
Similar code works fire with another Ionic 5 Angular 9 project I created.

Is this an Angular 10 issue or a typescript issue?

> Error during template compile of ‘AppComponent’ Function calls are
> not supported in decorators but ‘slideInLeftOnEnterAnimation’ was
> called

    import { slideInLeftOnEnterAnimation } from 'angular-animations';

    @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.scss'],
      animations: [
        slideInLeftOnEnterAnimation()
      ]
    })

   Ionic CLI                     : 6.11.11
   Ionic Framework               : @ionic/angular 5.3.5
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

1 post - 1 participant

Read full topic

↧
↧

Set state and change return view

October 11, 2020, 5:00 pm
$
0
0

Hello.

With setState I can change the views but I also need to change based on 3 states. How can I do?

if state is false what will be display is:

      <div className="contenedor_central">
      <strong>Completá tus datos</strong>
      <Boton name="Continuar" onClick={this.enviarRegistro}></Boton>
      </div>

if state is active it will be display:

    <div className="contenedor_central">
        <Boton name="Nueva cuenta de usuario" onClick={this.handleHide}></Boton>
        <Boton name="Nueva cuenta de servicio" onClick={this.handleShow}></Boton>
      </div>

But if nuevoRegistro is true, it must be return: 3

 <div className="contenedor_central">
      <strong>Se ha enviado al correo informacion para continuar con el registro</strong>
    </div>

How can this 3 state be implemented?

class RegistroNuevaCuenta extends Component{
  state = {
    isActive:false
  }

  nuevoRegistro =false
  
  handleShow = ()=>{
    this.setState({
        isActive: true
    })
  }

  handleHide = () =>{
    this.setState({
        isActive: false
    })
  }

  enviarRegistro = () =>{
    this.nuevoRegistro=true
  }

  render(){
    if(!this.nuevoRegistro){
      if (this.state.isActive ) {
        return (
          <div className="contenedor_central">
          <strong>Completá tus datos</strong>
          <Boton name="Continuar" onClick={this.enviarRegistro}></Boton>
          </div>
            
          );
      } else {
        return (
          <div className="contenedor_central">
            <Boton name="Nueva cuenta de usuario" onClick={this.handleHide}></Boton>
            <Boton name="Nueva cuenta de servicio" onClick={this.handleShow}></Boton>
          </div>
        );
        } 
    }else{
      return(
        <div className="contenedor_central">
          <strong>Se ha enviado al correo informacion para continuar con el registro</strong>
        </div>
      );
    }
      }
};

1 post - 1 participant

Read full topic

↧

Ionic react file transfer download not working

October 11, 2020, 9:42 pm
$
0
0

Hi there,
I am trying to do a download using FileTransfer, but it gives me an error.

body: null
code: 3
exception: null
http_status: 401
source: "https://media3.giphy.com/media/LR0CgYz1CSmJ6PKiWW/giphy.gif"
target: "file:///storage/emulated/0/Download/test.gif"

I have read on the repo that code 3 means: FileTransferError.CONNECTION_ERR
But I am pretty sure the endpoint does not receive any request (I can notice this using another url pointing a local server).

This is my code (inside the main component of react).

const downloadFile = async () => {
    const fileTransfer = FileTransfer.create();
    let link = encodeURI("https://giphy.com/stickers/astrology-zodiac-horoscope-LR0CgYz1CSmJ6PKiWW");
    let path = File.externalRootDirectory + "Download/";
    let file_name = 'test.gif';
    let completePath = path + file_name;
    fileTransfer.download(link, completePath, true).then((entry) => {
      console.log(' download complete: ' + entry.toURL());
    }, (error) => {
      console.log("error ", error)
    });
  };

This is my setup:

React app + Ionic + Capacitor

This is the main part of my package.json:

"@capacitor/android": "^2.4.2",
"@capacitor/core": "2.4.2",
"@ionic-native/android-permissions": "^5.28.0",
"@ionic-native/core": "^5.28.0",
"@ionic-native/document-viewer": "^5.28.0",
"@ionic-native/file": "^5.28.0",
"@ionic-native/file-opener": "^5.28.0",
"@ionic-native/file-transfer": "^5.28.0",
"cordova-plugin-android-permissions": "^1.1.0",
"cordova-plugin-document-viewer": "^1.0.0",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-file-opener": "^1.0.0",
"cordova-plugin-file-transfer": "^1.7.1",
"react": "^16.13.0",

I suppose I am using Ionic 5 from the list on the package.json.

Any help?

1 post - 1 participant

Read full topic

↧

Google play console

October 11, 2020, 11:48 pm
$
0
0

You must have account hold and restore implemented in your app by 1 November 2020. Subscription pause and resubscribe will also be enabled by default, unless you explicitly opt out.

This error is showing in google play store.
what to do for ionic apps?

1 post - 1 participant

Read full topic

↧

I am looking for some advice regarding SEO for my website

October 11, 2020, 11:50 pm
↧
↧

Getting { errorCode: -2, message: "Billing is not initialized"}

October 12, 2020, 1:37 am
$
0
0

I am using Ionic+Capacitor and React to implement the “cordova-plugin-inapppurchase”: “^1.2.0”. The same thing is working perfectly in the iOS but in Android I am continuously getting “Billing is not initialized” error. I have added the Manifest.json file with Base 64 code but still it’s not resolve. Please help me out.

Thanks.

1 post - 1 participant

Read full topic

↧

Getting build errors in android studio when building my ionic app

October 12, 2020, 2:27 am
$
0
0

i’m trying to use smsRetriver native plugin.

when i trying to build my android app i’m getting error " import android.support.annotation.NonNull; ;

please find the image below.

ionic : 6.11.8
angular: 9.1.6
node :12
android studio: 4.0.1
“@capacitor/android”: “^2.3.0”,
“@capacitor/core”: “2.3.0”,

auth.component.ts:

import { SmsRetriever } from '@ionic-native/sms-retriever/ngx';

  constructor( private smsRetriever: SmsRetriever ) { }

verify() {
           this.smsRetriever.startWatching().then(res => {
          alert('sms is => ' + res);
        });
}

auth.module.ts:

import { SmsRetriever } from '@ionic-native/sms-retriever/ngx';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    AuthPageRoutingModule
  ],
  declarations: [AuthPage],
  providers: [
    FirebaseAuthentication,
    SmsRetriever

]
})

image
image1366×768 107 KB

if i uninstall smsRetriver then the error gone.

please help me on this.

Thanks in advance.

1 post - 1 participant

Read full topic

↧
Search

Navigator MediaDevices getUserMedia Permission denied

October 12, 2020, 4:48 am
$
0
0

ionic 3 inappbrowser camera and audio not working when target _blank or _self .
Getting error when app run in android device- navigator.mediadevices.getusermedia failed --permission denied

this.iab.create(webinarUrl, “_blank”, this.options).

working fine when target _system .

1 post - 1 participant

Read full topic

↧

React lifecycle hook

October 12, 2020, 7:31 am
$
0
0

hi,
I am trying react lifecycle hooks, and useIonViewDidEnter and useIonViewWillEnter are triggering even I route to different page. but I dont want to them to fiire other pages, is there a different lifecycle hook for for page level ?

 useIonViewDidEnter,
  useIonViewDidLeave,
  useIonViewWillEnter,
  useIonViewWillLeave

1 post - 1 participant

Read full topic

↧
↧

Sorting Stuff with one Click

October 12, 2020, 7:53 am
$
0
0

Hello everyone,

is in ionic a way to sort items by certain attributes (e.g. alphabet, date, number) with one click (see picture 1). I searched for a long time but only found things like “ionic-search-filter”, "Order and Grouping " etc.

It should be like in picture 1, the user clicks on “Filter” and the items contained there are sorted alphabetically. First comes “Alphabet” then “Apple” then “Beta” and then “Microsoft”.

Example

1 post - 1 participant

Read full topic

↧

A problem occurred evaluating project ':app'. > Unable to determine Android SDK directory

October 12, 2020, 8:49 am
$
0
0

l have android project using ionic and cordova . When I run ionic cordova build android --release command in root of ionic project, I am getting “BUILD SUCCESSFUL”

app-release-unsigned.apk

But when i want to release bundle app from platforms/android root .i will have following error :

> Configure project :app
WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.
It will be removed in version 5.0 of the Android Gradle plugin.
For more information, see http://d.android.com/r/tools/update-dependency-configurations.html.
config.xml
../config.xml
../../config.xml
../../../config.xml
preference = 10
name = ScrollEnabled
name = android-minSdkVersion
name = BackupWebStorage
name = SplashMaintainAspectRatio
name = AutoHideSplashScreen
name = SplashScreenDelay
name = SplashShowOnlyFirstTime
name = SplashScreen
name = GOOGLE_MAPS_ANDROID_API_KEY
name = GOOGLE_MAPS_IOS_API_KEY
---->PLAY_SERVICES_VERSION = 16.0.0
---->ANDROID_SUPPORT_V4_VERSION = 27.1.1
An exception occurred while trying to find the Android build tools.

FAILURE: Build failed with an exception.

* Where:
Script '/Users/user name /bgw/platforms/android/CordovaLib/cordova.gradle' line: 112

* What went wrong:
A problem occurred evaluating project ':app'.
> Unable to determine Android SDK directory.

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

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

BUILD FAILED in 1s

ionic info :

Ionic:

   Ionic CLI                     : 6.11.11 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 4.11.13
   @angular-devkit/build-angular : 0.13.10
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.10
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : 5.0.4, android 9.0.0, browser
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 11 other plugins)

Utility:

   cordova-res                          : 0.15.1
   native-run (update available: 1.2.1) : 1.0.0

System:

   Android SDK Tools : 26.1.1 (/Users/user name/Library/Android/sdk)
   NodeJS            : v12.18.3 (/usr/local/bin/node)
   npm               : 6.14.8
   OS                : macOS Catalina
   Xcode             : Xcode 11.6 Build version 11E708

cordova requirements android :

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: installed android-30,android-29,android-28,android-27,android-26
Gradle: installed /Volumes/secdisk/gradle-6.5.1/bin/gradle

.bash_profile:

export JAVA_HOME=`/usr/libexec/java_home -v 1.8.0_251`
export PATH=$JAVA_HOME/bin:$PATH
export GRADLE_HOME=/Volumes/secdisk/gradle-6.5.1/bin

export ANDROID_HOME=/Users/user name /Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/platforms
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/./gradlew
export PATH=$PATH:$ANDROID_HOME/build-tools

export PATH=$PATH:$GRADLE_HOME

Any idea please ?

1 post - 1 participant

Read full topic

↧

How to implement lazy loading content into ion-slide?

October 12, 2020, 9:06 am
$
0
0

I would like to implement my application with slides and because of the amount of content, data and slides I would like to know if is possible to implement lazy loading into an ion-slides component.

For example, for each slide add a lazy loading page

    <ion-slide>
      <app-store-page></app-store-page>
    </ion-slide>
    <ion-slide>
      <app-role-page></app-role-page>
    </ion-slide>
  </ion-slides>```

1 post - 1 participant

Read full topic

↧
Viewing all 71235 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>