Hello everyone, how are you doing?

I have a question regarding the use of the Preferences plugin in Ionic > [Preferences Capacitor Plugin API | Ionic Documentation](https://Plugin Capacitor Preferences) , which employs UserDefaults on iOS and SharedPreferences on Android. My concern revolves around the interoperability between native code (Android or iOS) and Ionic, particularly when it comes to saving data natively.

For instance, when using SharedPreferences on Android, I would like to confirm if it’s possible to retrieve this data directly in Ionic. The logic is that the Ionic Preferences plugin utilizes Android’s SharedPreferences, so theoretically, accessing the natively stored data should be feasible.
Exemple native code. (android)

import android.content.Context;
import android.content.SharedPreferences;

public class SharedPreferencesManager {
    private static final String PREFS_NAME = "MyPrefs";

    public static void saveData(Context context, String key, String value) {
        SharedPreferences.Editor editor = context.getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE).edit();
        editor.putString(key, value);
        editor.apply();
    }

    public static String getData(Context context, String key) {
        SharedPreferences prefs = context.getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE);
        return prefs.getString(key, null);
    }
}

1 post - 1 participant

Read full topic

Is there any way to get the desktop OS with Capacitor?

To check if iOS or Android, there is the getPlatform method.

But for the desktop, I want to know if the OS is Windows, Linux, or macOS.

Does Capacitor provide any way to do that?

2 posts - 2 participants

Read full topic

I have built an Ionic-Angular application as a PWA and it’s working great. Are there any things I need to do to build this project as a Hybrid Mobile app for Android and IOS? I’m thinking in terms of things like the ngsw-config.json file and this code I added in app.component.ts

  async ngOnInit() {
    if (environment.production) {
      const hasUpdate = await this.swUpdate.checkForUpdate();
      if (hasUpdate) {
        const toast = await this.toastCtrl.create({
          message: 'Update available!',
          position: 'bottom',
          buttons: [
            {
              text: 'Reload',
              role: 'cancel',
            },
          ],
        });
        await toast.present();
        
        toast
          .onDidDismiss()
          .then(() => this.swUpdate.activateUpdate())
          .then(() => globalThis.location.reload());
      }
    }
  }

1 post - 1 participant

Read full topic

I am getting error while running this command in my ionic Project “npm run ionic:serve”

error:“Error: Could not find an “NgModule” decorator in /Users/emblemtechnologies/Documents/ttgap/ttg-ionic/src/app/app.module.ts Error: Could not find an “NgModule” decorator in /Users/emblemtechnologies/Documents/ttgap/ttg-ionic/src/app/app.module.ts at new BuildError (/Users/emblemtechnologies/Documents/ttgap/ttg-ionic/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28) at /Users/emblemtechnologies/Documents/ttgap/ttg-ionic/node_modules/@ionic/app-scripts/dist/deep-linking.js:57:21”

My app.module.ts file code

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule} from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { IonicStorageModule } from '@ionic/storage';
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { MyApp } from './app.component';
import { AppVersion } from '@ionic-native/app-version'
import { HockeyApp } from 'ionic-hockeyapp';
import { Push} from '@ionic-native/push/ngx';
import { Camera } from '@ionic-native/camera/ngx';
import { Diagnostic } from '@ionic-native/diagnostic/ngx';
import { CardIO } from '@ionic-native/card-io/ngx';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { Network } from '@ionic-native/network/ngx';
import { LaunchNavigator} from '@ionic-native/launch-navigator/ngx';
import { BackgroundGeolocation} from '@ionic-native/background-geolocation/ngx';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';
import { CallNumber } from '@ionic-native/call-number/ngx';
import { EmailComposer } from '@ionic-native/email-composer/ngx';

import { TabsPage } from '../pages/mobile/Common/tabs/tabs';
import { LoginPage } from '../pages/common/login/login';
import { SchedulesPage } from '../pages/mobile/Ticket/schedules/schedules';
import { UsersPage } from '../pages/mobile/User/users/users';
import { TicketsPage } from '../pages/mobile/Ticket/tickets/tickets';
import { FinancesPage } from '../pages/mobile/Finance/finances/finances';
import { TicketDetailPage } from '../pages/mobile/Ticket/ticket-detail/ticket-detail';
import { AddingServiceTicketPage } from '../pages/mobile/Setting/adding-service-ticket/adding-service-ticket';

import { ServicesProvider } from '../providers/services/services';
import {RequestInterceptor} from '../providers/authentication/authentication';
import {AddLocationPage} from "../pages/mobile/Common/add-location/add-location";
import {CancelTicketPopupPage} from "../pages/mobile/Ticket/cancel-ticket-popup/cancel-ticket-popup";
import {SettingsPage} from "../pages/mobile/Setting/settings/settings";
import {RemoveLocationPopupPage} from "../pages/mobile/Ticket/remove-location-popup/remove-location-popup";
import { CalendarModule } from 'angular-calendar';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {OverviewDesktopPage} from "../pages/desktop/overview-desktop/overview-desktop";
import {TicketsDesktopPage} from "../pages/desktop/tickets-desktop/tickets-desktop";
import {AddTicketDesktopPage} from "../pages/desktop/add-ticket-desktop/add-ticket-desktop";
import {FinancesDesktopPage} from "../pages/desktop/finances-desktop/finances-desktop";
import {Constants} from "../providers/constants";
import {AddNewCustomerPage} from "../pages/mobile/User/add-new-customer/add-new-customer";
import {AcceptQuotePopupPage} from "../pages/mobile/Quote/accept-quote-popup/accept-quote-popup";
import {DeclineQuotePopupPage} from "../pages/mobile/Quote/decline-quote-popup/decline-quote-popup";
import {ProfilePage} from "../pages/mobile/Setting/profile/profile";
import {AccountDetailsPage} from "../pages/mobile/Setting/account-details/account-details";
import {CancelQuotePopupPage} from "../pages/mobile/Quote/cancel-quote-popup/cancel-quote-popup";
import {NewTicketDesktopPage} from "../pages/desktop/new-ticket-desktop/new-ticket-desktop";
import {TicketDetailDesktopPage} from "../pages/desktop/ticket-detail-desktop/ticket-detail-desktop";
import {QuotesDesktopPage} from "../pages/desktop/quotes-desktop/quotes-desktop";
import {QuotesDetailDesktopPage} from "../pages/desktop/quotes-detail-desktop/quotes-detail-desktop";
import {AddQuoteDesktopPage} from "../pages/desktop/add-quote-desktop/add-quote-desktop";
import {AddSkillPage} from "../pages/mobile/Setting/add-skill/add-skill";
import {SkillDetailPage} from "../pages/mobile/Setting/skill-detail/skill-detail";
import {AddNewCustomerDesktopPage} from "../pages/desktop/add-new-customer-desktop/add-new-customer-desktop";
import {ProfileDesktopPage} from "../pages/desktop/profile-desktop/profile-desktop";
import {AddSkillDesktopPage} from "../pages/desktop/add-skill-desktop/add-skill-desktop";
import {SkillDetailDesktopPage} from "../pages/desktop/skill-detail-desktop/skill-detail-desktop";
import {SettingPopupPage} from "../pages/desktop/setting-popup/setting-popup";
import {SettingsDesktopPage} from "../pages/desktop/settings-desktop/settings-desktop";
import {ScheduleDesktopPage} from "../pages/desktop/schedule-desktop/schedule-desktop";
import {AddUserPage} from "../pages/mobile/User/add-user/add-user";
import {SendInvitePopupPage} from "../pages/mobile/User/send-invite-popup/send-invite-popup";
import {ColleagueDetailPage} from "../pages/mobile/User/colleague-detail/colleague-detail";
import {SkillsPage} from "../pages/common/memberSignup/skills/skills";
import {ServiceAreaPage} from "../pages/common/memberSignup/service-area/service-area";
import {VerifyAddressPage} from "../pages/common/memberSignup/verify-address/verify-address";
import {WelcomePage} from "../pages/common/memberSignup/welcome/welcome";
import {AddNumberPage} from "../pages/common/customerSignup/add-number/add-number";
import {QuoteInfoPage} from "../pages/common/customerSignup/quote-info/quote-info";
import {VerifyQuotePage} from "../pages/common/customerSignup/verify-quote/verify-quote";
import {AddOfficeLocationPage} from "../pages/common/customerSignup/add-office-location/add-office-location";
import {GetOfficeLocationsPage} from "../pages/common/customerSignup/get-office-locations/get-office-locations";
import {ShowMessagePage} from "../pages/common/customerSignup/show-message/show-message";
import {TermsConditionsPage} from "../pages/common/terms-conditions/terms-conditions";
import {SignupPage} from "../pages/common/memberSignup/signup/signup";
import {UserDesktopPage} from "../pages/desktop/user-desktop/user-desktop";
import {AddUserDesktopPage} from "../pages/desktop/add-user-desktop/add-user-desktop";
import {ColleagueDetailDesktopPage} from "../pages/desktop/colleague-detail-desktop/colleague-detail-desktop";
import {EnrouteTicketPage} from "../pages/mobile/Ticket/enroute-ticket/enroute-ticket";
import {TimerTicketPage} from "../pages/mobile/Ticket/timer-ticket/timer-ticket";
import {UserDetailPage} from "../pages/mobile/User/user-detail/user-detail";
import {RefreshTokenProvider} from "../providers/refresh-token/refresh-token";
import {UserDetailDesktopPage} from "../pages/desktop/user-detail-desktop/user-detail-desktop";
import {EnrouteTicketDesktopPage} from "../pages/desktop/enroute-ticket-desktop/enroute-ticket-desktop";
import {TimerTicketDesktopPage} from "../pages/desktop/timer-ticket-desktop/timer-ticket-desktop";
import {InvoiceDetailPage} from "../pages/mobile/Finance/invoice-detail/invoice-detail";
import {EarningCalenderPage} from "../pages/mobile/Finance/earning-calender/earning-calender";
import {ChoiceSignupPage} from "../pages/common/choice-signup/choice-signup";
import {VerifyEmailPage} from "../pages/common/customerSignup/verify-email/verify-email";
import {CustomerLaunchPage} from "../pages/mobile/Common/customer-launch/customer-launch";
import {BlockTechPage} from "../pages/mobile/User/block-tech/block-tech";
import {BlockColleaguePage} from "../pages/mobile/User/block-colleague/block-colleague";
import {CompanyDetailPage} from "../pages/mobile/User/company-detail/company-detail";
import {QuoteCompanyPage} from "../pages/mobile/Quote/quote-company/quote-company";
import {QuoteGetSpecialRatesPage} from "../pages/mobile/Quote/quote-get-special-rates/quote-get-special-rates";
import {QuoteLocationPage} from "../pages/mobile/Quote/quote-location/quote-location";
import {QuoteServicesPage} from "../pages/mobile/Quote/quote-services/quote-services";
import {QuoteSetRatesPage} from "../pages/mobile/Quote/quote-set-rates/quote-set-rates";
import {QuoteSetSpecialRatesPage} from "../pages/mobile/Quote/quote-set-special-rates/quote-set-special-rates";
import {QuoteSummaryPage} from "../pages/mobile/Quote/quote-summary/quote-summary";
import {QuoteSupportContractPage} from "../pages/mobile/Quote/quote-support-contract/quote-support-contract";
import {QuotesPage} from "../pages/mobile/Quote/quotes/quotes";
import {QuotesDetailPage} from "../pages/mobile/Quote/quotes-detail/quotes-detail";
import {InvoiceDisputePage} from "../pages/mobile/Finance/invoice-dispute/invoice-dispute";
import {TicketAddressPage} from "../pages/mobile/Ticket/ticket-address/ticket-address";
import {TicketDesCredPage} from "../pages/mobile/Ticket/ticket-des-cred/ticket-des-cred";
import {TicketSelectCustomerPage} from "../pages/mobile/Ticket/ticket-select-customer/ticket-select-customer";
import {TicketServicePage} from "../pages/mobile/Ticket/ticket-service/ticket-service";
import {TicketSummaryPage} from "../pages/mobile/Ticket/ticket-summary/ticket-summary";
import {TicketTimePage} from "../pages/mobile/Ticket/ticket-time/ticket-time";
import {TicketTypePage} from "../pages/mobile/Ticket/ticket-type/ticket-type";
import {TicketSelectMemberPage} from "../pages/mobile/Ticket/ticket-select-member/ticket-select-member";
import {RatesPage} from "../pages/mobile/Setting/rates/rates";
import {RateAnalysisPage} from "../pages/mobile/Setting/rate-analysis/rate-analysis";
import {ServicesPage} from "../pages/mobile/Setting/services/services";
import {TicketRateReviewPage} from "../pages/mobile/Ticket/ticket-rate-review/ticket-rate-review";
import {TicketSearchPage} from "../pages/mobile/Ticket/ticket-search/ticket-search";
import {UserSearchPage} from "../pages/mobile/User/user-search/user-search";
import { CountryProvider } from '../providers/country/country';
import {InvoiceDetailDesktopPage} from "../pages/desktop/invoice-detail-desktop/invoice-detail-desktop";
import {CompanyDetailDesktopPage} from "../pages/desktop/company-detail-desktop/company-detail-desktop";
import {CompanyLocationsPage} from "../pages/mobile/User/company-locations/company-locations";
import {InviteMemberPage} from "../pages/mobile/User/invite-member/invite-member";
import {InviteMemberPopupPage} from "../pages/mobile/User/invite-member-popup/invite-member-popup";
import {MoveCustomersPage} from "../pages/mobile/User/move-customers/move-customers";
import {AddManualTimePage} from "../pages/mobile/Ticket/add-manual-time/add-manual-time";
import {MessagesPage} from "../pages/common/messages/messages";
import {AboutPage} from "../pages/mobile/Setting/about/about";
import {AppFeedbackPage} from "../pages/mobile/Setting/app-feedback/app-feedback";
import {DocumentsPage} from "../pages/mobile/Setting/documents/documents";
import {LegalPage} from "../pages/mobile/Setting/legal/legal";
import {NoticesPage} from "../pages/mobile/Setting/notices/notices";
import {ReportProblemPage} from "../pages/mobile/Setting/report-problem/report-problem";
import {ResourcesPage} from "../pages/mobile/Setting/resources/resources";
import {SupportPage} from "../pages/mobile/Setting/support/support";
import {StatusPage} from "../pages/mobile/Setting/status/status";
import {LicensesPage} from "../pages/mobile/Setting/licenses/licenses";
import {InvoiceAdjustPage} from "../pages/mobile/Finance/invoice-adjust/invoice-adjust";
import { Observable, Subject } from 'rxjs';

@NgModule({
  declarations: [
      MyApp,
      LoginPage,
      TicketsPage,
      TabsPage,
      TicketDetailPage,
      AddingServiceTicketPage,
      UsersPage,
      QuotesPage,
      QuotesDetailPage,
      SchedulesPage,
      FinancesPage,
      AddLocationPage,
      CancelTicketPopupPage,
      SettingsPage,
      RemoveLocationPopupPage,
      OverviewDesktopPage,
      TicketsDesktopPage,
      AddTicketDesktopPage,
      FinancesDesktopPage,
      AddNewCustomerPage,
      AcceptQuotePopupPage,
      DeclineQuotePopupPage,
      ProfilePage,
      AccountDetailsPage,
      CancelQuotePopupPage,
      NewTicketDesktopPage,
      SignupPage,
      TicketDetailDesktopPage,
      QuotesDesktopPage,
      QuotesDetailDesktopPage,
      AddQuoteDesktopPage,
      ShowMessagePage,
      AddSkillPage,
      SkillDetailPage,
      AddNewCustomerDesktopPage,
      ProfileDesktopPage,
      AddSkillDesktopPage,
      SkillDetailDesktopPage,
      SettingPopupPage,
      SettingsDesktopPage,
      ScheduleDesktopPage,
      AddUserPage,
      SendInvitePopupPage,
      ColleagueDetailPage,
      SkillsPage,
      ServiceAreaPage,
      TermsConditionsPage,
      VerifyAddressPage,
      WelcomePage,
      AddNumberPage,
      QuoteInfoPage,
      VerifyQuotePage,
      AddOfficeLocationPage,
      GetOfficeLocationsPage,
      UserDesktopPage,
      AddUserDesktopPage,
      ColleagueDetailDesktopPage,
      EnrouteTicketPage,
      TimerTicketPage,
      UserDetailPage,
      UserDetailDesktopPage,
      EnrouteTicketDesktopPage,
      TimerTicketDesktopPage,
      InvoiceDetailPage,
      EarningCalenderPage,
      ChoiceSignupPage,
      VerifyEmailPage,
      CustomerLaunchPage,
      BlockTechPage,
      BlockColleaguePage,
      CompanyDetailPage,
      QuoteCompanyPage,
      QuoteGetSpecialRatesPage,
      QuoteLocationPage,
      QuoteServicesPage,
      QuoteSetRatesPage,
      QuoteSetSpecialRatesPage,
      QuoteSummaryPage,
      QuoteSupportContractPage,
      InvoiceDisputePage,
      TicketAddressPage,
      TicketDesCredPage,
      TicketSelectCustomerPage,
      TicketServicePage,
      TicketSummaryPage,
      TicketTimePage,
      TicketTypePage,
      TicketSelectMemberPage,
      RatesPage,
      RateAnalysisPage,
      ServicesPage,
      TicketRateReviewPage,
      TicketSearchPage,
      UserSearchPage,
      InvoiceDetailDesktopPage,
      CompanyDetailDesktopPage,
      CompanyLocationsPage,
      InviteMemberPage,
      InviteMemberPopupPage,
      MoveCustomersPage,
      AddManualTimePage,
      MessagesPage,
      AboutPage,
      AppFeedbackPage,
      DocumentsPage,
      LegalPage,
      NoticesPage,
      ReportProblemPage,
      ResourcesPage,
      SupportPage,
      StatusPage,
      LicensesPage,
      InvoiceAdjustPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp, {mode: 'ios'}),
    IonicStorageModule.forRoot(),
    BrowserAnimationsModule,
    CalendarModule,
    NgbModule,
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    LoginPage,
    TicketsPage,
    TabsPage,
    TicketDetailPage,
    AddingServiceTicketPage,
    UsersPage,
    QuotesPage,
    QuotesDetailPage,
    SchedulesPage,
    FinancesPage,
    AddLocationPage,
    CancelTicketPopupPage,
    SettingsPage,
    RemoveLocationPopupPage,
    OverviewDesktopPage,
    TicketsDesktopPage,
    AddTicketDesktopPage,
    FinancesDesktopPage,
    AddNewCustomerPage,
    AcceptQuotePopupPage,
    DeclineQuotePopupPage,
    ProfilePage,
    AccountDetailsPage,
    CancelQuotePopupPage,
    NewTicketDesktopPage,
    SignupPage,
    TicketDetailDesktopPage,
    QuotesDesktopPage,
    QuotesDetailDesktopPage,
    AddQuoteDesktopPage,
    ShowMessagePage,
    AddSkillPage,
    SkillDetailPage,
    AddNewCustomerDesktopPage,
    ProfileDesktopPage,
    AddSkillDesktopPage,
    SkillDetailDesktopPage,
    SettingPopupPage,
    SettingsDesktopPage,
    ScheduleDesktopPage,
    AddUserPage,
    SendInvitePopupPage,
    ColleagueDetailPage,
    SkillsPage,
    ServiceAreaPage,
    TermsConditionsPage,
    VerifyAddressPage,
    WelcomePage,
    AddNumberPage,
    QuoteInfoPage,
    VerifyQuotePage,
    AddOfficeLocationPage,
    GetOfficeLocationsPage,
    UserDesktopPage,
    AddUserDesktopPage,
    ColleagueDetailDesktopPage,
    EnrouteTicketPage,
    TimerTicketPage,
    UserDetailPage,
    UserDetailDesktopPage,
    EnrouteTicketDesktopPage,
    TimerTicketDesktopPage,
    InvoiceDetailPage,
    EarningCalenderPage,
    ChoiceSignupPage,
    VerifyEmailPage,
    CustomerLaunchPage,
    BlockTechPage,
    BlockColleaguePage,
    CompanyDetailPage,
    QuoteCompanyPage,
    QuoteGetSpecialRatesPage,
    QuoteLocationPage,
    QuoteServicesPage,
    QuoteSetRatesPage,
    QuoteSetSpecialRatesPage,
    QuoteSummaryPage,
    QuoteSupportContractPage,
    InvoiceDisputePage,
    TicketAddressPage,
    TicketDesCredPage,
    TicketSelectCustomerPage,
    TicketServicePage,
    TicketSummaryPage,
    TicketTimePage,
    TicketTypePage,
    TicketSelectMemberPage,
    RatesPage,
    RateAnalysisPage,
    ServicesPage,
    TicketRateReviewPage,
    TicketSearchPage,
    UserSearchPage,
    InvoiceDetailDesktopPage,
    CompanyDetailDesktopPage,
    CompanyLocationsPage,
    InviteMemberPage,
    InviteMemberPopupPage,
    MoveCustomersPage,
    AddManualTimePage,
    MessagesPage,
    AboutPage,
    AppFeedbackPage,
    DocumentsPage,
    LegalPage,
    NoticesPage,
    ReportProblemPage,
    ResourcesPage,
    SupportPage,
    StatusPage,
    LicensesPage,
    InvoiceAdjustPage,
    Subject
],
providers: [
  StatusBar,
  SplashScreen,
    InAppBrowser,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Constants,
    {
        provide: HTTP_INTERCEPTORS,
        useClass: RequestInterceptor,
        multi: true
    },
    HttpModule,
    HttpClientModule,
    AppVersion,
    HockeyApp,
    Push,
    Camera,
    Diagnostic,
    CardIO,
    Geolocation,
    RefreshTokenProvider,
    ServicesProvider,
    Network,
    LaunchNavigator,
    BackgroundGeolocation,
    AndroidPermissions,
    CountryProvider,
    CallNumber,
    EmailComposer,
    Observable,
    Subject
]
})
export class AppModule {}

1 post - 1 participant

Read full topic

hi members,

1. we have a old version of app build in ionic 2, version 1 live
2. we are building a new version of same app in react native,

we want to create a final app version 2, inside this we want to give flexibility to switch between two version of app [old and new] based on user choice.

our core team is working on solutions but i may take time, any thoughts in this direction will help.

thanks
atul

1 post - 1 participant

Read full topic

I have a web app working ok. I added ios app using capacitor. When I am running the app on an Iphone I cannot get pass the login screen. Login works ok, but it cannot move to the next view.

It works fine on an IPad, also on the IPad simulator.

I sometimes get a warning: “Can’t move our portal view at the top.”
But I do not know if it has anything to do with this.
I also get these warnings:

-[RTIInputSystemClient remoteTextInputSessionWithID:textSuggestionsChanged:] Can only set suggestions for an active session. sessionID = 8CA716C7-A6BF-4181-8FB0-E97DB74D1069

-[RTIInputSystemClient remoteTextInputSessionWithID:textSuggestionsChanged:] Can only set suggestions for an active session. sessionID = 8CA716C7-A6BF-4181-8FB0-E97DB74D1069

-[RTIInputSystemClient remoteTextInputSessionWithID:performInputOperation:] perform input operation requires a valid sessionID

-[RTIInputSystemClient remoteTextInputSessionWithID:textSuggestionsChanged:] Can only set suggestions for an active session. sessionID = 8CA716C7-A6BF-4181-8FB0-E97DB74D1069

1 post - 1 participant

Read full topic

Hi All,

I have a basic popover (tooltip) that is under the same IonItem as a potentially disabled IonTextarea. When the IonTextarea is disabled, the popover is also disabled, when I want the popover to stay active due to being an informational tooltip next to the IonLabel for the disabled field.

My question: is this expected and if so, does anyone have a solution on how to NOT have the popover disabled? Ionic automatically adds the disabled tag to it, and there is no override for the disabled flag on popovers.

Thanks!

1 post - 1 participant

Read full topic

Hello, This is my first post.
Trying to develop an app that runs in browser and android. Here is the code for home page

<ion-content :fullscreen="true">
    <ion-toolbar>
      <ion-button @click="loginClicked">Login Clicked</ion-button>
      <ion-button v-if="authenticated === false" @click="loginClicked">Login</ion-button>
      <ion-button v-if="authenticated" @click="logoutClicked">Logout</ion-button>
      <ion-button v-if="authenticated" @click="toTSP">TSP</ion-button>
      <ion-button v-if="authenticated" @click="toGTC">GTC</ion-button>
      <ion-text>Something</ion-text>
      <ion-text>{{ authenticated }}</ion-text>
      <div v-if="authenticated">
        <p>Logged as {{ user }}</p>
        <p>Access Token</p>
      <pre>{{ token }}</pre>
  </div>
    </ion-toolbar>
</ion-content>

The app runs in browser.
Built and ran the app in android devise. Can see ‘Login Clicked’ button but not ‘Login’ button.
Am using ionic auth connect also.

Please can you advise why I can’t see ‘Login’ button.

1 post - 1 participant

Read full topic

This is what I got

This is what I expect

In my version, when the modal is open there is the status bar is white. what I want is black.

, another problem is the colour inconsistency between the status bar and the toolbar.

I know that the capacitor provides API to customize the status bar.
But I still want to adjust to in browser or Safari Shortcut, any possible solutions?

1 post - 1 participant

Read full topic

I’m upgrading an app from Ionic 6/Capacitor 3 to Ionic 7/Capacitor 5. Starting Capacitor 3, the Camera plugin had some issues on Android devices, not allowing to access camera or photo library.

According to Capacitor document for Android: “Camera API launches a separate Activity to handle taking the photo”.

The way I was able to resolve this was by disabling the background mode before access camera and the enabling it again

import { BackgroundMode } from ‘@ionic-native/background-mode/ngx’;
…
constructor(… private backgroundMode: BackgroundMode …) {}
…
private async getPhoto() {
const isAndroid = Capacitor.getPlatform() === ‘android’;
if (isAndroid && Capacitor.isNativePlatform()) {
this.backgroundMode.disable();
}

const imageData = await Camera.getPhoto(this.cameraOptions);

if (isAndroid && Capacitor.isNativePlatform()) {
  this.backgroundMode.enable();
}
...

}

But the “@ionic-native/background-mode” plugin does not work with Ionic 7 and I couldn’t find any way to resolve the problem. With Capacitor 5’s Camera on Android, the Take Picture function kind of work but it’s not possible to access photo library.
I’m wondering how come Capacitor team never resolved this problem on Android?!

Does anybody know how to resolve this?

Thank you in advance.

1 post - 1 participant

Read full topic

Hi,
I am making radio application using Radio.co API to stream the audio and I have two problems:

1. play/pause through bluetooth headset controls is not working. I am using media-session plugin, however something is missing.

2. on some devices the audio is glitchy when the phone is locked, however when the screen is active the audio is ok. On some phones the audio is glitchy if my radio application is in the background and the user is using WhatsApp or other application while the radio is playing. On some devices this issue does not exist.

I am using Ionic 7 with Angular 16 and Capacitor 5. In AndroidManifest.xml I have the following permissions:
android.permission.INTERNET
android.permission.RECORD_AUDIO
android:name="android.permission.BLUETOOTH
android:name="android.permission.BLUETOOTH_ADMIN
android.permission.BLUETOOTH_CONNECT
android.permission.FOREGROUND_SERVICE

Does anyone have an idea/suggestion on how to solve these issues?

1 post - 1 participant

Read full topic

I installed
npm i -D @capacitor/cli@latest
but package.json 's capacitor’s version is same.

and I command npc cap migrate
then error occurs saying
Migrate can only be used on capacitor 4 and above, please use the CLI in Capacitor 4 to upgrade to 4 first

my package.json

{
“name”: “xxx”,
“version”: “0.0.1”,
“author”: “Ionic Framework”,
“homepage”: “https://ionicframework.com/”,
“scripts”: {
“add-ios”: “NODE_ENV=ios ionic capacitor add ios”,
“add-android”: “NODE_ENV=android ionic capacitor add android”,
“set-projects-android”: “npx trapeze run trapeze-android.yml -y”,
“set-projects-ios”: “npx trapeze run trapeze-ios.yml -y”,
“set-assets-android”: “cordova-res android --skip-config --copy”,
“set-assets-ios”: “cordova-res ios --skip-config --copy”,
“copy-assets-android”: “npx recursive-copy platformConfigurement/android android -w”,
“copy-assets-ios”: “npx recursive-copy platformConfigurement/ios ios -w”,
“clean-build-android”: “npx rimraf android && npm run add-android && npm run set-projects-android && npm run set-assets-android && npm run copy-assets-android”,
“clean-build-ios”: “npx rimraf ios && npm run add-ios && npm run set-projects-ios && npm run set-assets-ios && npm run copy-assets-ios”,
“build-android”: “npm run clean-build-android && ionic capacitor build android”,
“build-ios”: “npm run clean-build-ios && ionic capacitor build ios”,
“build-android-prod”: “npm run clean-build-android && ionic capacitor build android --prod”,
“build-ios-prod”: “npm run clean-build-ios && ionic capacitor build ios --prod”
},
“private”: true,

“dependencies”: {
“@angular/cdk”: “^13.3.7”,
“@angular/common”: “~13.2.2”,
“@angular/core”: “~13.2.2”,
“@angular/forms”: “~13.2.2”,
“@angular/platform-browser”: “~13.2.2”,
“@angular/platform-browser-dynamic”: “~13.2.2”,
“@angular/router”: “~13.2.2”,
“@awesome-cordova-plugins/core”: “^5.43.0”,
“@awesome-cordova-plugins/email-composer”: “^5.43.0”,
“@awesome-cordova-plugins/in-app-browser”: “^5.44.0”,
“@awesome-cordova-plugins/social-sharing”: “^5.44.0”,
“@capacitor-community/admob”: “^3.2.0”,
“@capacitor-community/apple-sign-in”: “^1.0.1”,
“@capacitor-community/facebook-login”: “^3.4.0”,
“@capacitor/android”: “3.8.0”,
“@capacitor/app”: “1.1.1”,
“@capacitor/camera”: “^1.3.1”,
“@capacitor/core”: “^3.9.0”,
“@capacitor/haptics”: “1.1.4”,
“@capacitor/ios”: “3.8.0”,
“@capacitor/keyboard”: “1.2.2”,
“@capacitor/splash-screen”: “^1.2.2”,
“@capacitor/status-bar”: “1.0.8”,
“@capacitor/storage”: “^1.2.5”,
“@ionic-native/core”: “^5.36.0”,
“@ionic-native/in-app-purchase-2”: “^5.36.0”,
“@ionic/angular”: “^6.0.0”,
“@trapezedev/configure”: “^3.0.2”,
“@trapezedev/project”: “^3.0.2”,
“capacitor-kakao-plugin”: “^1.0.2”,
“cordova-plugin-inappbrowser”: “^5.0.0”,
“cordova-plugin-x-socialsharing”: “^6.0.3”,
“cordova-res”: “^0.15.4”,
“recursive-copy-cli”: “^1.0.20”,
“rxjs”: “~6.6.0”,
“swiper”: “^8.2.4”,
“tslib”: “^2.2.0”,
“zone.js”: “~0.11.4”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “~13.2.3”,
“@angular-eslint/builder”: “~13.0.1”,
“@angular-eslint/eslint-plugin”: “~13.0.1”,
“@angular-eslint/eslint-plugin-template”: “~13.0.1”,
“@angular-eslint/template-parser”: “~13.0.1”,
“@angular/cli”: “~13.2.3”,
“@angular/compiler”: “~13.2.2”,
“@angular/compiler-cli”: “~13.2.2”,
“@angular/language-service”: “~13.2.2”,
“@capacitor/cli”: “^5.5.1”,
“@ionic/angular-toolkit”: “^6.0.0”,
“@ionic/lab”: “3.2.11”,
“@types/jasmine”: “~3.6.0”,
“@types/jasminewd2”: “~2.0.3”,
“@types/node”: “^12.11.1”,
“@typescript-eslint/eslint-plugin”: “5.3.0”,
“@typescript-eslint/parser”: “5.3.0”,
“cordova-plugin-androidx-adapter”: “^1.1.3”,
“cordova-plugin-device”: “^1.1.4”,
“cordova-plugin-email-composer”: “github:katzer/cordova-plugin-email-composer”,
“cordova-plugin-file”: “^6.0.2”,
“cordova-plugin-file-transfer”: “^1.7.1”,
“cordova-plugin-ionic-webview”: “^4.1.3”,
“cordova-plugin-nativestorage”: “^2.3.2”,
“cordova-plugin-payment-iap”: “^2.0.52”,
“cordova-plugin-purchase”: “13.0”,
“cordova-plugin-splashscreen”: “^4.0.3”,
“cordova-plugin-statusbar”: “^2.2.2”,
“cordova-promise-polyfill”: “0.0.2”,
“es6-promise-plugin”: “^4.2.2”,
“eslint”: “^7.6.0”,
“eslint-plugin-import”: “2.22.1”,
“eslint-plugin-jsdoc”: “30.7.6”,
“eslint-plugin-prefer-arrow”: “1.2.2”,
“eslint-plugin-prettier”: “^4.0.0”,
“ionic-plugin-keyboard”: “^2.2.1”,
“jasmine-core”: “~3.8.0”,
“jasmine-spec-reporter”: “~5.0.0”,
“karma”: “~6.3.2”,
“karma-chrome-launcher”: “~3.1.0”,
“karma-coverage”: “~2.0.3”,
“karma-coverage-istanbul-reporter”: “~3.0.2”,
“karma-jasmine”: “~4.0.0”,
“karma-jasmine-html-reporter”: “^1.5.0”,
“protractor”: “~7.0.0”,
“ts-node”: “~8.3.0”,
“typescript”: “~4.4.4”
},
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-plugin-camera”: {
“ANDROIDX_CORE_VERSION”: “1.8.0”,
“CAMERA_USAGE_DESCRIPTION”: “your usage message”
},
“cordova-plugin-device”: {},
“cordova-plugin-email-composer”: {},
“cordova-plugin-file”: {},
“cordova-plugin-file-transfer”: {},
“cordova-plugin-inappbrowser”: {},
“cordova-plugin-nativestorage”: {},
“cordova-plugin-payment-iap”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-x-socialsharing”: {},
“ionic-plugin-keyboard”: {},
“cordova-plugin-ionic-webview”: {},
“cordova-plugin-androidx-adapter”: {},
“cordova-plugin-purchase”: {}
},
“platforms”:
}
}

1 post - 1 participant

Read full topic

Hi guys,
I am trying to install pinia for state managment in the ionic 7 project and getting the following error i dont understand why is it asking me to fix the upstream deps… is the Vue JS version not updated in the latest version

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: project@0.0.1
npm ERR! Found: vue@3.3.8
npm ERR! node_modules/vue
npm ERR!   peer vue@"^3.2.25" from @vitejs/plugin-vue@4.5.0
npm ERR!   node_modules/@vitejs/plugin-vue
npm ERR!     dev @vitejs/plugin-vue@"^4.0.0" from the root project
npm ERR!   peer vue@"3.3.8" from @vue/server-renderer@3.3.8
npm ERR!   node_modules/@vue/server-renderer
npm ERR!     peerOptional @vue/server-renderer@"^3.0.1" from @vue/test-utils@2.4.2
npm ERR!     node_modules/@vue/test-utils
npm ERR!       dev @vue/test-utils@"^2.3.0" from the root project
npm ERR!     @vue/server-renderer@"3.3.8" from vue@3.3.8
npm ERR!   4 more (@vue/test-utils, vue-router, vuex, the root project)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! pinia@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vue@3.3.9
npm ERR! node_modules/vue
npm ERR!   peer vue@">= 2.5 < 2.7" from @vue/composition-api@1.7.2
npm ERR!   node_modules/@vue/composition-api
npm ERR!     peerOptional @vue/composition-api@"^1.4.0" from pinia@2.1.7
npm ERR!     node_modules/pinia
npm ERR!       pinia@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:

I used Ionic’s vscode plugin to create a new Project and now i am trying to add Pinia state management Here are the deps from package.json

  "dependencies": {
    "@capacitor/android": "5.5.1",
    "@capacitor/app": "5.0.6",
    "@capacitor/core": "5.5.1",
    "@capacitor/haptics": "5.0.6",
    "@capacitor/keyboard": "5.0.6",
    "@capacitor/status-bar": "5.0.6",
    "@ionic/vue": "^7.0.0",
    "@ionic/vue-router": "^7.0.0",
    "axios": "^1.6.2",
    "ionicons": "^7.0.0",
    "nprogress": "^0.2.0",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
  },
  "devDependencies": {
    "@capacitor/cli": "5.5.1",
    "@vitejs/plugin-legacy": "^4.0.2",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/test-utils": "^2.3.0",
    "cypress": "^12.7.0",
    "eslint": "^8.35.0",
    "eslint-plugin-vue": "^9.9.0",
    "jsdom": "^22.1.0",
    "terser": "^5.4.0",
    "vite": "^4.3.9",
    "vite-plugin-pwa": "^0.17.2",
    "vitest": "^0.32.2"
  },

Any Pointers…

1 post - 1 participant

Read full topic

How can I specify the environment, whether it’s in the environment.prod.ts file or at the Appflow level, considering that locally I work with the command ‘ionic cap sync --configuration=development’?

1 post - 1 participant

Read full topic

I’m porting an app from ionic 6/cordova to ionic 7/capacitor and something that used to work on the old app is not functioning in the new one.

The scenario is that I’m using an ion-list of ion-item-sliding and I want to be able to dynamically add extra options into an open sliding row.

When I add an option to the row, it appears OK, but the ion-item-sliding text may now fully/partially cover it. So to get around this, I programmatically close() and open() the ion-item-sliding and the options are now fully visible.

Only problem now is that they are no longer clickable and the sliding item itself can’t be manually closed.

I’ve recreated the issue in this app based on the blank example…

Slide the item open. Click on the button to add extra option. Options appears OK… but no events.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <ion-list>
      <ion-item-sliding #slider (ionDrag)="dragEvent($event, slider)">
        <ion-item>
          <ion-label>Line 1</ion-label>
        </ion-item>
    
        <ion-item-options>
          <ion-item-option (click)="doSomething()">Do Something</ion-item-option>
          <ion-item-option *ngIf="option2enabled" (click)="doNothing()">Do Nothing</ion-item-option>
        </ion-item-options>
      </ion-item-sliding>

    </ion-list> 
  
    <ion-button *ngIf="line1 !== undefined" (click)="addOption()">Add option</ion-button>
  </div>
</ion-content>

import { Component } from '@angular/core';
import { IonItemSliding } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  line1?: IonItemSliding 

  option2enabled: boolean = false

  constructor() {}

  doSomething() {
    console.log("doing something...")
    this.line1?.close()
  }

  doNothing() {
    console.log("doing nothing...")
  }

  dragEvent(event: any, slider: IonItemSliding) {
    this.line1 = slider
    console.log(JSON.stringify(event), slider)
  }

  addOption() {
    this.option2enabled = true
    this.line1?.close()
    this.line1?.open(undefined)
  }

}

1 post - 1 participant

Read full topic

Originally published at: Superapps for a Better Employee Experience - Ionic Blog

Learn how superapps can help create a better employee experience - from onboarding to retention to day to day activities.

1 post - 1 participant

Read full topic

Hello!

I have a form with 5 select components, How can I identify which one is open and close it programmatically?

1 post - 1 participant

Read full topic

I want to provide a Chromecast and Airplay button in-app of my Ionic 6 app, that streams the screen to a compatible device. Not a video file that you provide a mp4 for, but the actual screen of the app, which has a p5.js sketch inside it. Is this possible? I see a few capacitor and cordova plugins that stream video files, but not the actual screen.

cheers
david

1 post - 1 participant

Read full topic

Hello, I am working on an ionic capacitor application, and I want to know the metrics of the application hence, I was thinking of using Datadog. But I need help with the integration. On the ionic website I’ve seen that it does support Datadog, but I can’t find a way to do it. I would really appreciate if someone could help me with this.

1 post - 1 participant

Read full topic

Camera is not working on Android 13 after update to Target SDK 33 . Help Please

1 post - 1 participant

Read full topic