The hardware back functionality of capacitor 3 is going two page back but when running normally but in debug mode, its working fine. Why this is happening and Kindly suggest solution

1 post - 1 participant

Read full topic

Hi there,

how do we handle closing a specific modal in Ionic 5 and Vue?

I have seen some old answers mentioning a modal id property but I cannot find anything about it in the docs.

There is a dismiss() method on the modal instance but that would require having the modals globally available.

Before I implement my own solution, is the id property still available?

1 post - 1 participant

Read full topic

Hello!

I am using the plugin: In-App Purchase (IAP) 2: iOS, Android, Windows, macOS & Xbox Apps

I have trouble detecting the “Slow test card, declines after a few minutes” case when testing from an Android device.

My code has handlers for when product is loaded, approved, verified, cancelled, and error.
It is also catching errors after calling “order(product)”.

But in this particular case, none of the cancelled/error status is triggered. So I just leave the user with an endless loading screen.

Is there any special trick for noticing this case?
All the others seem to work fine (“card approves”, “card declines”, “slow card, approves after a few minutes”)

I don’t like the idea of adding some sort of timeout, since it doesn’t guarantee working every time, plus it could mess up with the “slow card, approves after a few minutes” case.

I’ve read some forums pointing that this may be a problem to be solved by Android, but there’s also not many people complaining which leads me to believe there might be a workaround to handle it.

My ionic info just in case:

Ionic:

Ionic CLI : 5.4.9
Ionic Framework : @ionic/angular 4.9.0
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0, ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 10 other plugins)

Utility:

cordova-res : 0.10.0
native-run : 0.3.0

System:

Android SDK Tools : 26.1.1 (C:—\tools_r25.2.3-windows)
NodeJS : v12.18.3 (C:\Program Files\nodejs\node.exe)
npm : 6.11.3
OS : Windows 10

And the devices I’m using to test have Android 7 and Android 11.

1 post - 1 participant

Read full topic

I am building an app with Ionic WebServer

I like to modify the plugin code for some custom behaviour.

But i noticed that by default

ionic capacitor update

Will download a new version of plugin.

So how can i modify or edit the downloaded Cordova/Capacitor plugin?

1 post - 1 participant

Read full topic

I want the IonModal to open when I click the IonIcon.

                        <IonIcon id="open-modal" icon={calendar} slot="start"/>
                        <IonModal trigger="open-modal">
                            <IonContent>
                                <IonDatetime></IonDatetime>
                            </IonContent>
                        </IonModal>

Right now the trigger property is giving me this error.

TS2322: Type '{ children: Element; trigger: string; }' is not assignable to type 'IntrinsicAttributes & Pick<ModalOptions<ComponentRef>, "id" | "mode" | ... etc.

Property 'trigger' does not exist on type 'IntrinsicAttributes & Pick<ModalOptions<ComponentRef>, "id" | "mode" | ... etc.

I looked at the declaration for IonModal in ionic/react and indeed I don’t see the trigger attribute. Has this not been implemented or something? I’m confused because it shows a working example just like this in the documentaiton.

^ referenced documentation

3 posts - 2 participants

Read full topic

When typing ionic serve I started to receive the following error in the Windows terminal:

Error: EPERM: operation not permitted, open 'C:\Users\Asus\.ionic\helper.log'

helper.log

[e[40mWARNe[49m] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'
       
       Require stack:
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic
[e[40mWARNe[49m] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package'
       
       Require stack:
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic
[e[40mWARNe[49m] Error loading ionic-angular package.json: Error: Cannot find module 'ionic-angular/package'
       
       Require stack:
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic
[e[40mWARNe[49m] Error loading @ionic/app-scripts package.json: Error: Cannot find module '@ionic/app-scripts/package'
       
       Require stack:
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic
[e[40mWARNe[49m] Error loading @capacitor/core package.json: Error: Cannot find module '@capacitor/core/package'

...

Then what I did was :

npm uninstall -g @ionic/cli
npm uninstall @capacitor/core --save -g
npm uninstall @capacitor/cli --save -g

npm install @ionic/cli -g --save
npm install @capacitor/core --save -g
npm install @capacitor/cli --save -g

but still same issue.

Also tried : Error: EPERM: operation not permitted, open 'F:\projects\www\build\15.js' - #2 by pettrin

Any help would be much appreciated

1 post - 1 participant

Read full topic

Hello,

I have an Ionic 6 app which streams a video from a webcam, the source file is .m3u8

Until this morning, everything was working fine but suddenly it stopped working after upgrading to iOS 15.
Do you have any similar issue?

this is my code

    <video onclick="this.play();" width="100%" height="auto"  
 
      id="videoID" preload="auto" controls autoplay>
      <source [src]="https://mysite.com/live.m3u8?a=2aaunkj8rkem2stmd6k8ig0f90" type="video/mp4" />
    </video>

any idea about how let iOS devices play live streaming and m3u8 files again?

thank you!

1 post - 1 participant

Read full topic

(topic deleted by author)

1 post - 1 participant

Read full topic

When doing some comparison between some old and new projects, I noticed that my projects using Ionic 6 / Angular 13 have a much larger node_modules folders in my project.

It looks like the @ionic/angular-toolkit jumped from 1.8 MB in size to over 100 MB size going from Ionic 5 / Angular 12 to Ionic 6 / Angular 13.

Is this normal? What’s the big differences in the toolkits?

1 post - 1 participant

Read full topic

Originally published at: Updates to Ionic Angular Toolkit - Ionic Blog

Since we shipped our 4.0 version of Ionic Angular, Ionic has provided a core package called@ionic/angular-toolkit. This package provides two features for Angular apps: A collection of schematics for generating new pages/routes as well as components with Ionic already imported A collection of builders for Cordova based apps. Now, Angular Toolkit has reached a point…

1 post - 1 participant

Read full topic

I want to further customize ion-datetime to meet the needs of my client for a simple year-picker:

    <ion-datetime mode="md" value="1991" presentation="year" size="cover"></ion-datetime>

Couldn’t find a hint in documentation, but managed so far to adapt background and color with css variables.
Still need to adapt at least font-size, line-height, also maybe padding and border.
Not able to find any more css variables to do this. Also the relevant shadow-dom elements are not available as parts.

Any help is much appreciated

1 post - 1 participant

Read full topic

I use the datetime component with the popover from the docs:

<!-- Datetime in popover with cover element -->
<ion-item button="true" id="open-date-input">
  <ion-label>Date</ion-label>
  <ion-text slot="end">{{ dateValue }}</ion-text>
  <ion-popover trigger="open-date-input" show-backdrop="false">
    <ng-template>
      <ion-datetime
        #popoverDatetime
        presentation="date"
        (ionChange)="dateValue = formatDate(popoverDatetime.value)"
      ></ion-datetime>
    </ng-template>
  </ion-popover>
</ion-item>

Is there a way to close the popover with the date selection? The standard behavior ist: Choose date and then click somewhere else to close the popover. I want to close it automatically.

Thanks!

1 post - 1 participant

Read full topic

I had an Ionic v4 app that was published as a PWA in Firebase. I’ve since updated that app to Ionic v6 and the PWA is looking different now.

My v4 PWA didn’t have the browser frame around the app once the app was added to my iPhone’s home screen. My Ionic v6 version of the PWA continues to look like I’m viewing my app within Safari.

How do I hide the browser elements when the site is loaded as a PWA? Did something change here between Ionic v4 and Ionic v6?

1 post - 1 participant

Read full topic

Hello,

We have a simple code for register push notifications with Apple, works with certificate, and we add capabilities too .

When start app some strange happened on push register:

2022-01-20 18:57:35.013896-0300 App[1338:212424] Push Plugin register called
2022-01-20 18:57:35.013960-0300 App[1338:212424] PushPlugin.register: setting badge to true
=================================================================
Main Thread Checker: UI API called on a background thread: -[UIApplication setApplicationIconBadgeNumber:]
PID: 1338, TID: 212424, Thread name: (none), Queue name: com.apple.root.default-qos, QoS: 0
Backtrace:
4   App                                 0x0000000104e75638 __19-[PushPlugin init:]_block_invoke.278 + 940
5   libdispatch.dylib                   0x000000010595fae8 _dispatch_call_block_and_release + 24
6   libdispatch.dylib                   0x000000010596132c _dispatch_client_callout + 16
7   libdispatch.dylib                   0x0000000105963ac8 _dispatch_queue_override_invoke + 884
8   libdispatch.dylib                   0x0000000105972e1c _dispatch_root_queue_drain + 376
9   libdispatch.dylib                   0x000000010597373c _dispatch_worker_thread2 + 148
10  libsystem_pthread.dylib             0x00000001cb4b9580 _pthread_wqthread + 212
11  libsystem_pthread.dylib             0x00000001cb4bc86c start_wqthread + 8
2022-01-20 18:57:35.015009-0300 App[1338:212424] [reports] Main Thread Checker: UI API called on a background thread: -[UIApplication setApplicationIconBadgeNumber:]
PID: 1338, TID: 212424, Thread name: (none), Queue name: com.apple.root.default-qos, QoS: 0
Backtrace:
4   App                                 0x0000000104e75638 __19-[PushPlugin init:]_block_invoke.278 + 940
5   libdispatch.dylib                   0x000000010595fae8 _dispatch_call_block_and_release + 24
6   libdispatch.dylib                   0x000000010596132c _dispatch_client_callout + 16
7   libdispatch.dylib                   0x0000000105963ac8 _dispatch_queue_override_invoke + 884
8   libdispatch.dylib                   0x0000000105972e1c _dispatch_root_queue_drain + 376
9   libdispatch.dylib                   0x000000010597373c _dispatch_worker_thread2 + 148
10  libsystem_pthread.dylib             0x00000001cb4b9580 _pthread_wqthread + 212
11  libsystem_pthread.dylib             0x00000001cb4bc86c start_wqthread + 8
2022-01-20 18:57:42.636565-0300 App[1338:212424] PushPlugin.register: clear badge is set to 1
2022-01-20 18:57:42.636886-0300 App[1338:212424] PushPlugin.register: better button setup
2022-01-20 18:57:42.638199-0300 App[1338:212424] FCM Sender ID (null)
2022-01-20 18:57:42.638810-0300 App[1338:212424] Using APNS Notification

We don’t know why that happened, other apps (ionic 5<=) not show that problem .

And we receive nothing with register on the handlers for registration or error .

This is output for ionic info :

Ionic:

   Ionic CLI                     : 6.17.0 (/Users/mtoro/.nvm/versions/node/v14.17.5/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.0.3
   @angular-devkit/build-angular : 13.0.4
   @angular-devkit/schematics    : 12.2.15
   @angular/cli                  : 13.0.4
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

   Capacitor CLI      : 3.3.3
   @capacitor/android : not installed
   @capacitor/core    : 3.3.0
   @capacitor/ios     : 3.3.0

Utility:

   cordova-res : not installed globally
   native-run  : 1.5.0

System:

   NodeJS : v14.17.5 (/Users/mtoro/.nvm/versions/node/v14.17.5/bin/node)
   npm    : 6.14.14
   OS     : macOS Monterey

1 post - 1 participant

Read full topic

I had an Ionic v4 app that was published as a PWA in Firebase. I’ve since updated that app to Ionic v6 and the PWA no longer displays in full screen mode.

When I add my app to my home screen in iOS and then launch the PWA, it continues to display in the Safari browser wrapper. I don’t have the same problem on Android. The PWA is fine there.

Did something change in Ionic v6? This wasn’t an issue for me before.

I do have a meta tag in /index.html to specify apple-mobile-web-app-capable as yes.

1 post - 1 participant

Read full topic

I recently saw that LaraBug announced it was going Open Source (Ionic/Vue) and wanted to see if any one on here had some great examples of other Ionic/Angular apps that are open source other than the great ones that Ionic has released (Conferences App/EAS 2021).

I always enjoy seeing how others have created their apps that are out in the App stores and if they have decided to make them open source.

1 post - 1 participant

Read full topic

Hi all,
I need to open a url in ionic inappbrowser and also set some cookies to maintain the session for authentication. Can any one help me how to pass cookies or headers in the inappbrowser along with the url.

1 post - 1 participant

Read full topic

I have a login token stored in the storage of the platform and every time I want to use it I need to use async in the function, Can someone plz help me to store it in a globally variable and access it everywhere without ASYNC in function.

Now if somewhere I need to use the token in a function I have to use the ASYNC with my function otherwise it will not work.

A function I build.

async ngOnInit() {
    const token = await Storage.get({ key: TTOKEN_KEY });
    const takenValue = token.value;

    let headers = new HttpHeaders({
      'Content-Type': 'application/json;',
      Authorization: 'Bearer ' + takenValue,
    });
    let options = { headers: headers };
    this.http
      .get('https://website.com/api/Details/'+this.cid, options)
      .subscribe((res: any) => {
        this.profile = res;
      });
}

My login.service.ts file is where I store generated TOKEN at the platform.

 login(credentials: { email; password }): Observable<any> {
    return this.http.post(`https://website.com/api/login`, credentials).pipe(
      map((data: any) => data.success.token),
      switchMap((token) => {
        return from(Storage.set({ key: TTOKEN_KEY, value: token }));
      }),
      tap((_) => {
        this.isAuthenticated.next(true);
      })
    );
  }

and

1 post - 1 participant

Read full topic

I want to select a date at the bottom of a modal with a datetime popover, but it’s opening to the bottom and so it’s disappearing. I’m using side="left" , but with the popover side="top" it’s possible to get the popover over the date button, but not opening to the top.
Can I open it to the top or align it at the bottom?

1 post - 1 participant

Read full topic

Hi!

I have a stencil component (build with lit) which make a fetch request in componentWillLoad event.

At browser it works like a charm, but when I try to build a static HTML using renderToString I am getting the error:

Error: fetch() not implemented

Which is triggered by the hydrate script created by the stencil build.

import { Component, Host, h, Prop, State, Watch } from '@stencil/core';

@Component({
  tag: 'counting-result',
})
export class CountingResult {
  async requestJsonData() {
    const json = await fetch(`https://api.hostname.com/mock.json`).then(res => res.json());

    document.dispatchEvent(new CustomEvent('dataResult', {
      detail: json,
    }));
  }

  componentWillLoad() {
    this.requestJsonData();
  }

  render() {
    return (
      <Host>
        <slot></slot>
      </Host>
    );
  }
}

const hydrate = require('./hydrate/index.js');

;(async() => {
  const results = await hydrate.renderToString('<counting-result></counting-result>', {
    prettyHtml: true,
    removeScripts: true
  });

  console.log(results.html)
})();

I have tried to install fetch-node and expose it to global or change the hydrated script to use the fetch-node but I have no success.

Somebody knows if it is a Stenciljs limitation/bug or if I need to install some dependencie?

1 post - 1 participant

Read full topic