I built a simple application for testing. When I build for android sdk versions equal to or greater than 24 it recognizes the SDK and does the correct procedure, but if you try to build other versions like 22 and 23 (Android 5.1 and 6.0) an error appears and the procedure is not completed . If it is SDK 23 the situation is even worse as it cannot even add the Android platform to the ionic project, unlike API level 23, which in turn adds the platform but cannot build it.

What I’ve tried: I added the sdk and gradle path as a system variable by the windows manager, I changed the SDK versions for testing several times, concluding that the SDK only doesn’t work when less than 24, I updated the gradle and I’ve already added the commands:

set ANDROID_HOME=C:\Users\Herick Pereira\AppData\Local\Android\sdk
set PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

My error:

Android SDK not found. Make sure that it is installed. If it is not at the default location, set the ANDROID_HOME environment variable.

Used configuration:

Ionic:

   Ionic CLI                     : 6.12.3 (C:\Users\Herick 
   Ionic Framework               : @ionic/angular 5.5.2
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 7.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 4 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 1.3.0

System:

   NodeJS : v14.15.4 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.10
   OS     : Windows 10

1 post - 1 participant

Read full topic

I’m evaluating appflow as it’d be very useful for our project and would be keen to get one of the paid plans.

However, I don’t seem to be able to get the basic live deployments working with my Ionic/Angular/Capacitor app, and I’m a bit at a loss as to how to troubleshoot.

I have followed the docs and installed the SDK in my app.
I can see the app id, channel name (Production) and update method (auto) in string.xml and info.plist.

I have successfully built the app in appflow (web build), and I can see on the deployments screen my build assigned to the production channel of type ‘Live Update’.

I’m not seeing changes on device after the splash screen, so I’ve put together a screen using the ‘Deploy’ plugin to show me what version is installed, and if updates are available.

import { Deploy } from 'cordova-plugin-ionic/dist/ngx';

...

private async loadDeployInfo() 
{
    const info = await this.deploy.getCurrentVersion();

    if (info) {
      this.liveUpdateId = info.buildId;
    }    

    const updateCheck = await this.deploy.checkForUpdate();

    console.log(updateCheck);

    if (updateCheck.available) {
      this.updateAvailable = updateCheck.build;
    }    
  }

I call the above ‘loadDeployInfo()’ when my view loads and display out the build Id and whether an update is available. Neither show up anything when testing on device. I’m using capacitor, so running locally involves running ngx cap commands and opening android studio, which is not a tool I know how to get debug information out of, but I’m not seeing any red in the console as it’s running.

I’m a bit stuck. I’m keen to use app flow, but I’m not seeing basic live updates take effect and there’s not much documentation on troubleshooting.

1 post - 1 participant

Read full topic

Hi,
We are facing issues trying to create deployments via Appflow as well as some other issues.

1. The application compiles fine for android and an APK is available for download. However, the app says there is ‘No builds history for this app’ meaning we cannot create a deployment.
2. The build logs detailing the failure for iOS are not available and are always truncated before we can diagnose the issue.
3. We have no visibility of the requirements for making a deployment.

I would greatly appreciate any help or guidance when it comes to creating a beta version of our hybrid app. I wish to create a beta build on android and push this to test-flight ASAP.

Thanks for your time

1 post - 1 participant

Read full topic

Hi there. I am a rookie when it comes to Cordova plugins because I’ve always been able to use Capacitor plugins. However, I am trying to get this bluetooth plugin to work in my project. I read the docs, I ran the following commands:

npm install https://github.com/flemmingdjensen/cordova-plugin-ble-central.git 
npx cap update

Things appear to be working because I see:

✔ Copying web assets from dist to android/app/src/main/assets/public in 79.00ms
✔ Copying native bridge in 2.42ms
✔ Copying capacitor.config.json in 1.10ms
  Found 1 Cordova plugin for android
    cordova-plugin-ble-central (1.3.1)
✔ copy in 179.88ms
✔ Copying web assets from dist to ios/App/public in 73.50ms
✔ Copying native bridge in 709.66μp
✔ Copying capacitor.config.json in 2.66ms
⠙ copy  Found 1 Cordova plugin for ios
    cordova-plugin-ble-central (1.3.1)

But I am unable to import the plugin into the project. I am probably doing it wrong!

import 'cordova-plugin-ble-central/web/ble.js';

When I try to compile, I get:

ERROR  Failed to compile with 1 error                           11:39:38 PM

This dependency was not found:

* cordova-plugin-ble-central in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/views/Home.vue?vue&type=script&lang=js

What am I doing wrong? I am thinking I’m doing a few things wrong! Any help would be great!

1 post - 1 participant

Read full topic

Hello, I have been able to solve the issue of receiving push notifications in ionic when app is closed/killed after struggling with it for days. It seems there are still no clear answers on the issue. Before following the steps below, ensure you have set up FCM plugin and are able to receive notifications when your app is opened.

The main issue seems to be that the getInitialPushPayload() method returns undefined. This is because you are probably calling it in your FCM.onNotification() event callback and that event will not fire when your app is killed because it is pretty impossible to do so . The code usually looks like this

FCM.onNotification().subscribe(data => {
      if (data.wasTapped) {
         // handle data here
        console.log("received in background");
        FCM.getInitialPushPayload().then( data => {
              // or handle data here
              console.log(data);
              console.log("received in background")
        }, error=> console.log(error))
      } else {
        console.log("received in foreground")
      };
    });

The above code only works when app is opened and is in foreground/background. But fails to work when app is killed/closed.

FIrst Step
Add this property “click_action”: “FCM_PLUGIN_ACTIVITY” and the below object

"data": {
  "title": "title",
 "body": "body"
}

to notification object. Note that the above data json object is different from the default and standard “title” and “body” fields but should ideally contain the same information for consistency.

Second step
Retrieve the data we just defined using the getInitialPushPayload() method once we are sure that the FCM plugin is ready.
I personally do this inside the getToken() method which is called after platform.ready().

  getToken() {
    FCM.getToken().then( token => {
      // Register your new token in your back-end if you want
      // backend.registerToken(token);
      console.log(token);
      // get push payload and display if notification was tapped
      FCM.getInitialPushPayload().then( data => {
        if(data) {
          if(data.wasTapped) {
               // we know the user launched the app by clicking on the notification

               // data here contains the data object we defined earlier so you can do whatever you want with the data like navigate to a specific page etc.
               console.log(JSON.parse(data));
          }
        }
      })
    });
  }

That is it

FCM is quite easy to work with once you understand what is going on behind the scenes .

2 posts - 1 participant

Read full topic

Hey,
I’m working on an ionic firebase application. And for that i have a service file for firebase to get data from different collections. It was working fine before. But now i’m getting a error
public getMyReviews(id): Promise {

return new Promise<any>((resolve, reject) => {

  this.adb.collection('reviews', ref => ref.where('restId', '==', id)).get().subscribe(async (review) => {

    let data = review.docs.map((element) => {

      let item = element.data();

      item.id = element.id;

      item.uid.get().then(function (doc) {

        item.uid = doc.data();

      });

      return item;

    });

    resolve(data);

  }, error => {

    reject(error);

  });

});

}

The error is in the line item.id = element.id and item.uid.get(), the error says that cannot find item.id or item.uid. What is the problem? i don’t know what change made this error to come

1 post - 1 participant

Read full topic

Please describe the question in detail and share your code, configuration, and other relevant info.

I installed Ionic yesterday on Ubuntu 20.04, so I hope I am using Ionic 5.

Once we set up the HTML, CSS and Angular, what to do next to build the app ?

I tried

ionic build prod

npx cap add android

but when I try npx cap open android

it asks me to add the location of Android Studio’s studio.sh file in a particular format inside

capacitor.config.json

But doing so brings no change. The project won’t open in Android Studio even if I redo the npx cap open android command.

After giving up, I tried open the my-app folder in Android Studio through the GUI and it worked without any problem. It also gives some notifications like framework found, gradle
and so on. But when I click Run, nothing happens. There is no option to Build at all.

It would be nice to know how to get past these and make a successful build. I know this is very trivial for many of you. But I am really finding it hard to build an apk from the completed project. Thanks.

2 posts - 1 participant

Read full topic

Windows 10 on running a ionic cmd like ionic serve through command promt using latest ionic CLI is redirecting to powershell where as ionic 3.2 cli is working fine without redirecting to powershell, May i know why it’s redirecting to powershell ?

1 post - 1 participant

Read full topic

Hello,
I hope you doing well,

Actually, I’m working on migrating an old ionic 3 project to 5,
so I chose to migrate from 3 to 4 then from 4 to 5,
I installed ionic cli version 4 but when I created the project and went to package.json
I found this line :
"@ionic/angular": "^5.0.0",

Does this mean that my project is in ionic 5 ?
because the version of the cli in my machine is 4

1 post - 1 participant

Read full topic

  searchPublikasi(ev: any) {
    // set val to the value of the searchbar
    let val = ev.target.value;
    this.publicationList.searchPublikasi(val).subscribe((publicationListData:any) => {
			this.allPublication= publicationListData.data;
			this.listDomain=this.allPublication[1];
	  })
  }

	doInfinite(infiniteScroll) {
	  console.log('Begin async operation');
    this.page = this.page+1;
    // set val to the value of the searchbar
    let val = ev.target.value;;
	  setTimeout(() => {
      this.publicationList.searchPublikasi(val).subscribe((publicationListData:any) => {
        for (let pub of publicationListData.data[1]) {
        this.listDomain.push(pub)
        }
      });
      console.log('Async operation has ended');
      infiniteScroll.complete();
	  }, 1000)
  }

 <!--Adds a search bar and an ionInput event to trigger the searchMovies function everytime a user types-->
  <ion-searchbar placeholder = "Cari Publikasi" (ionInput)="searchPublikasi($event)"></ion-searchbar>

  <span *ngFor="let list of allPublication" color="dark">
      <ion-label style="font-size: 1rem;text-align: right;padding-right: 2%;">
        Menampilkan {{list.total}} Publikasi
      </ion-label>
      <ion-grid *ngFor="let pub of listDomain">
        <ion-card (click)="launchPubDetailsPage(pub)">
          <ion-row>
            <ion-col size="1">
              <ion-item>
                <ion-thumbnail>
                  <ion-img [src]="pub.cover"></ion-img>
                </ion-thumbnail>
              </ion-item>
            </ion-col>
            <ion-col size="11" style="font-weight: bold;">
              <ion-label color="danger" style="font-size: 1.1rem;">{{pub.rl_date}}</ion-label>
              {{pub.title}}
              <ion-label color="secondary" style="font-size: 1.1rem;">{{pub.size}}</ion-label>
            </ion-col>
          </ion-row>
        </ion-card>
      </ion-grid>
  </span>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content loadingSpinner="circles" loadingText=""></ion-infinite-scroll-content>
  </ion-infinite-scroll>

  searchPublikasi(searchStr:string){
    return this.http.get(this.apiUrl+""+this.page+"/keyword/"+searchStr+"/key/790ab00650e59132961637e651ba47fb/")
                    .do(res=>console.log(res))
                    .map(res=>res);
  }

I really confused, how to get the value that user input in search bar and used it in doInfinite.

1 post - 1 participant

Read full topic

In ionic ios app notification received when I sent using token but not received when I subscribe topic.
I have uploaded APNs Authentication Key in the firebase console.

1 post - 1 participant

Read full topic

I have an app created in ionic-v3 that when after login uses preferences stored in storage to load data and if no preferences are set the user gets prompted to set these and they’ll get stored. I have however gotten some complaints from users that they need to set these preferences almost every time but sometimes it can go a couple of days before the storage is cleared again.

I couldnt recreate this issue on devices with version 13.x but when upgrading one of my devices to 14.3 i’m starting to experience the same issues as the users, when checking the logs in xcode while running the app i cannot see anything out of the ordinary and there’s a seemingly randomness to the bug its hard to pinpoint the issue other than this version of IOS are having problems with persisting storage in browser.

Anyone else on Ionic v3 experiencing these kinds of issues with the latest IOS version?

1 post - 1 participant

Read full topic

Hi Guys,

I’m sly new to the capacitor and I’ve built a capacitor app that uses the standard camera plugin to take photos and pic images from the photo library.

In iOS, the preview isn’t working as expected for an unknown reason. The file is saved permanently [ i can use the base64 file read option and see the image, but it is not memory efficient as there are 10s of images to show ]

The following code is working fine on Android and for many people, this seems to work on iOS as well.

Unfortunately, this same code does not work in iOS [ in real device ]

         const finalPhotoUri = await Filesystem.getUri({
            directory: FilesystemDirectory.Data,
            path: fileName
          })

          this.imgSrc = Capacitor.convertFileSrc(finalPhotoUri.uri)

        <img src="imgSrc" > // used this way in html template. 

Are there any changes we should make to index.html [ content-security ] or iOS info.plist for this work?

I did allow arbit URLs to load in NSAppTransportSecurity.

Please suggest some hacks to get this working. Thanks in advance.

Cheers,
Sachin

1 post - 1 participant

Read full topic

I want to achieve the attached image design, please suggest me how I can do that.

1 post - 1 participant

Read full topic

Hello

I need that depending on a variable stored in memory, when entering the site or the application, that is, when the url = “/”, it goes to one of two specific urls

The problem with the code that I have raised is that it does not show any url, everything is blank.
Why is that? It is because App should not have a return statment?

Depending if isReg equals true path="/" must route to /Registro and if isReg is false must route to /home

const App: React.FC = () => {
    
      const [isReg, setIsReg] = useState(false);
    
      useEffect(() => {
        if(getItem("isRegistered")==null){
        console.log(getItem("isRegistered"));
        setIsReg(true);
      }
      else{
        setIsReg(false);
      }
    }, []);
    
      if(isReg){
        return (
          <IonApp>
            <IonReactRouter>
            <IonSplitPane contentId="main" when="(min-width: 4096px)">
                  <Menu />
              <IonRouterOutlet id="main">
              <Route path="/" component= {Registro } exact={true}/>
    
              </IonRouterOutlet>
              </IonSplitPane>
            </IonReactRouter>
          </IonApp>
          );
      }
      else{
        return (
          <IonApp>
            <IonReactRouter>
            <IonSplitPane contentId="main" when="(min-width: 4096px)">
                  <Menu />
              <IonRouterOutlet id="main">
                <Route path="/" component= {Home} exact={true}/>
    
              </IonRouterOutlet>
              </IonSplitPane>
            </IonReactRouter>
          </IonApp>
          );
      }
      
    };

Thanks in advance.

1 post - 1 participant

Read full topic

Greetings,

We have successfully converted a regular Ionic Angular app into SSR, using Angular Universal as described on your blog.

However, it seems that what we are able to achieve is SSR with Re(Hydration) and not “Real” SSR.

imagem2164×1434 207 KB

Can anyone from the Ionic team confirm if that is the case?

Or is it a bad setup on our side?

Thank you

1 post - 1 participant

Read full topic

                    <ion-button 
                        *ngFor="let group of equipmentGroups" 
                        [ngClass]="{'selected-menu-item': group == selectedZoneGroup}" 
                        (click)="selectGroup(group)"
                        [style.--background]="group === selectedZoneGroup ? '#9a6cba' : '#6b1fa1'"
                        expand="full"
                    >
                        {{group.name}} &nbsp;  
                        <ion-badge color="light" class="ion-text-end">
                            <fa-icon [className]="group.StatusClass" icon="check" ></fa-icon>
                        </ion-badge>
                    </ion-button>

^Those empty buttons will gradually populate, one by one, just by clicking any of the blue buttons (the list items should be populating each button by default).

My issue is related to my hacky way of overriding the background color of each button using [style.–background].

My intention was just to change the button color for the selected element, which is resulting in this bug. Is there a cleaner way of achieving this?

1 post - 1 participant

Read full topic

kaphoto1125×2436 201 KB

I don’t know how to change the icon of pictured upper small icon.
I changed all resources/ iOS / icon folder, but it never changed.

how can I change the icon of small icon of swipe up icon.

1 post - 1 participant

Read full topic

ionic3 in app purchase2 --> billing v3

i want billing v3 --> ionic3 in app purchase 2

can i help you???

—>

Thanks @chuchuva

Just like Play’s TargetSDK requirements, it’s important that all users are able to benefit from any security, performance, and user experience improvements in new versions of Billing Library. At Google I/O in 2019, we released Billing Library version 2 and announced changes including a two-year support window for each major release.

This means starting August 2, 2021, all new apps must use Billing Library version 3 or newer. By November 1, 2021, all updates to existing apps must use Billing Library version 3 or newer.

1 post - 1 participant

Read full topic

I could not able to load the iOS app on the iOS emulator or device using the development server, tried almost all the possibilities and the following commands
ionic capacitor run ios -l --external

ionic capacitor run ios -l 

For android ionic capacitor development server loading and working perfectly fine for both emulator and device but for iOS, it is returning the blank screen and the app is not loading.

I can executeionic cap build ios from VScode and it build the production in xcode and run successfully for device and emulator, but it is really frustrating and time-consuming to do this practice from VScode to Xcode.

Following are the system configuration , please advice

Ionic:

Ionic CLI : 6.12.3 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 5.5.2

Capacitor:

Capacitor CLI : 3.0.0-beta.1
@capacitor/core : 3.0.0-beta.1

Utility:

cordova-res : not installed
native-run : 1.3.0

System:

NodeJS : v14.10.1 (/usr/local/Cellar/node/14.10.1/bin/node)
npm : 6.14.8
OS : macOS Big Sur

Xcode : Version 12.3 (12C33)

1 post - 1 participant

Read full topic