Hey,

Can anyone advise about this:-

How to use google maps in Ionic 6 using Capacitor 3.

Try many old methods but not getting success!

1 post - 1 participant

Read full topic

We had an animation bug when page was transitioning from one page to another using navigateForward.

We had to change it to navigateRoot, now it no longer shows the breaking animations, and transition works fine.

What is the difference between these two. Ionic does not provide good documentation about this.

1 post - 1 participant

Read full topic

Want to know that is there any plugins available for crop feature in Ionic 5 with capacitor ? @joshmorony @max @brandyshea @mhartington

1 post - 1 participant

Read full topic

Hi! I’m trying to use the Cordova Media Plugin. After I add the plugin to my project, the iOS build fails with the following error:

The following build commands failed: CompileSwiftSources normal arm64 com.apple.xcode.tools.swift.compiler (in target ‘Capacitor’ from project ‘Pods’)
CompileC [local directories stripped]/ios/DerivedData/00008030-001614302E00802E/Build/Intermediates.noindex/Pods.build/Debug-iphoneos/CordovaPlugins.build/Objects-normal/arm64/CDVSound.o [local directories stripped]/ios/capacitor-cordova-ios-plugins/sources/CordovaPluginMedia/CDVSound.m normal arm64 objective-c com.apple.compilers.llvm.clang.1_0.compiler (in target ‘CordovaPlugins’ from project ‘Pods’)

I’ve used the plugins below:

@ionic-native/media
cordova-plugin-media

I already tried removing and re-adding the platform.

Does someone know how to solve this problem? If not, any alternative would be great. I need to play an HLS audio stream with native controls (play/pause + albumCover from the platform) and background playblack on both iOS and Android.

Thanks!

1 post - 1 participant

Read full topic

Hi,
since we develop systems for a public administration all our front-ends must ensure the highest level of accessibility.

This is ensured by the use of bootstrap-based and government-approved templates in my case: GitHub - italia/bootstrap-italia-next: Repository provvisorio - WIP - Bootstrap Italia è un tema basato su Bootstrap 5 conforme alle linee guida di design per i servizi web della PA.
This is a customization of the official Bootstrap 5 framework.

In the past, I’ve used Ionic to build mobile apps and web-based front-end systems but I didn’t have the obligation to use bootstrap like now.
Now I must use bootstrap.

I’ve seen that it is possible to include bootstrap into an Ionic front-end (a web app) but this makes it impossible to use all the components of Ionic.

So the question is, does it make sense to use Ionic and bootstrap? Or is it better to just use Angular at this point?
What benefits could I have from using Ionic (without being able to use its components) and rather than Angular?

Thank you for your opinions and your suggestions.

Claudio

1 post - 1 participant

Read full topic

I just released a new version of my app last night and every single iOS device is getting the same error:

The operation couldn’t be completed. No space left on device

The app will download 16%, then fail with this error.

I know 2 of my devices have several gb of free storage on the device.

Any ideas why iOS is doing this?

1 post - 1 participant

Read full topic

Am using device id as a unique identifier for each iphone that currently has the application.Of late I noticed that the device id keeps on changing and it is bringing a bad experience to customers.

I need help to close the issue.

1 post - 1 participant

Read full topic

Hi there,
I defined these simple segment buttons:

  <ion-segment value="present" (ionChange)="segmentChanged($event)" class="ion-margin-top">
    <ion-segment-button value="present" [layout]="'icon-hide'">
      <ion-label>present</ion-label>
    </ion-segment-button>
    <ion-segment-button value="absent" [layout]="'icon-hide'">
      <ion-label>absent</ion-label>
    </ion-segment-button>
  </ion-segment>

But the rendering is totally broken, see the attached gif.
I did not define any custom styling so I don’t understand where the issue comes from.
I use Ionic v6.0.8.
Thanks for your help.

1 post - 1 participant

Read full topic

Sustainable BPO is provides accounting outsourcing services at a very affordable cost. Our high accounting and industry expertise, coupled with experienced and qualified staff, robust infrastructure, secure work practices, and deep process orientation, has helped us deliver high quality.

1 post - 1 participant

Read full topic

When I run ionic capacitor run android with the more recent @capacitor package versions in “package.json”, I get an error:

[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>"C:\Other Programs\Java\jdk-18/bin/java.exe" "-Xmx64m" "-Xms64m"   "-Dorg.gradle.appname=gradlew" -classpath "D:\Src\GeneralRV\mobile\builds\20220414\android\\gradle\wrapper\gradle-wrapper.jar" org.gradle.wrapper.GradleWrapperMain "assembleDebug"
[capacitor]
[capacitor]         > Configure project :app
[capacitor]         WARNING:Using flatDir should be avoided because it doesn't support any meta-data formats.
[capacitor]
[capacitor]         FAILURE: Build failed with an exception.
[capacitor]
[capacitor]         * Where:
[capacitor]         Build file 'D:\Src\GeneralRV\mobile\builds\20220414\node_modules\@capacitor\android\capacitor\build.gradle'
[capacitor]
[capacitor]         * What went wrong:
[capacitor]         Could not compile build file 'D:\Src\GeneralRV\mobile\builds\20220414\node_modules\@capacitor\android\capacitor\build.gradle'.
[capacitor]         > startup failed:
[capacitor]         General error during conversion: Unsupported class file major version 62

Below is more information that I think is significant. Output of “ionic info”:

Ionic:

   Ionic CLI       : 6.19.0 (C:\Other Programs\nodejs\node_modules\@ionic\cli)
   Ionic Framework : @ionic/react 6.0.1

Capacitor:

   Capacitor CLI      : 3.4.3
   @capacitor/android : 3.4.3
   @capacitor/core    : 3.4.3
   @capacitor/ios     : 3.4.3

Utility:

   cordova-res : 0.15.4
   native-run  : 1.5.0

System:

   NodeJS : v16.14.2 (C:\Other Programs\nodejs\node.exe)
   npm    : 8.5.0
   OS     : Windows 10

Here are the relevant lines in package.json:

    "@capacitor/android": "3.4.3",
    "@capacitor/app": "1.1.1",
    "@capacitor/core": "3.4.3",
    "@capacitor/haptics": "1.1.4",
    "@capacitor/ios": "3.4.3",
    "@capacitor/keyboard": "1.2.2",
    "@capacitor/status-bar": "1.0.8",

IMPORTANT (I think): If I change those lines to the following and run npm install, and change nothing else, the command works:

    "@capacitor/android": "3.3.3",
    "@capacitor/app": "1.0.7",
    "@capacitor/core": "3.3.3",
    "@capacitor/haptics": "1.1.3",
    "@capacitor/ios": "3.3.4",
    "@capacitor/keyboard": "1.2.0",
    "@capacitor/status-bar": "1.0.6",

By “change nothing else”, I mean: same shell, same folder, same command, etc. For me, this is reproducible. And it seems to be totally out of my control.

The full output of the error when I run with the --verbose argument is:

[capacitor] √ Copying web assets from build to android\app\src\main\assets\public in 326.94ms
[capacitor] √ Creating capacitor.config.json in android\app\src\main\assets in 1.95ms
[capacitor] √ copy android in 386.51ms
[capacitor] √ Updating Android plugins in 8.97ms
[capacitor] [info] Found 4 Capacitor plugins for android:
[capacitor]        @capacitor/app@1.1.1
[capacitor]        @capacitor/haptics@1.1.4
[capacitor]        @capacitor/keyboard@1.2.2
[capacitor]        @capacitor/status-bar@1.0.8
[capacitor] 2022-04-15T12:49:47.476Z capacitor:android:update Searching 1 source files in 'D:\\Src\\GeneralRV\\mobile\\builds\\20220414\\node_modules\\@capacitor\\app\\android\\src\\main' by /^@(?:CapacitorPlugin|NativePlugin)[\s\S]+?class ([\w]+)/gm regex
[capacitor] 2022-04-15T12:49:47.484Z capacitor:android:update Searching 'D:\\Src\\GeneralRV\\mobile\\builds\\20220414\\node_modules\\@capacitor\\app\\android\\src\\main\\java\\com\\capacitorjs\\plugins\\app\\AppPlugin.java' for package by /^package ([\w.]+);?$/gm regex
[capacitor] 2022-04-15T12:49:47.484Z capacitor:android:update 'com.capacitorjs.plugins.app.AppPlugin' is a suitable plugin class
[capacitor] 2022-04-15T12:49:47.492Z capacitor:android:update Searching 6 source files in 'D:\\Src\\GeneralRV\\mobile\\builds\\20220414\\node_modules\\@capacitor\\haptics\\android\\src\\main' by /^@(?:CapacitorPlugin|NativePlugin)[\s\S]+?class ([\w]+)/gm regex
[capacitor] 2022-04-15T12:49:47.501Z capacitor:android:update Searching 'D:\\Src\\GeneralRV\\mobile\\builds\\20220414\\node_modules\\@capacitor\\haptics\\android\\src\\main\\java\\com\\capacitorjs\\plugins\\haptics\\HapticsPlugin.java' for package by /^package ([\w.]+);?$/gm regex
[capacitor] 2022-04-15T12:49:47.502Z capacitor:android:update 'com.capacitorjs.plugins.haptics.HapticsPlugin' is a suitable plugin class
[capacitor] 2022-04-15T12:49:47.510Z capacitor:android:update Searching 2 source files in 'D:\\Src\\GeneralRV\\mobile\\builds\\20220414\\node_modules\\@capacitor\\keyboard\\android\\src\\main' by /^@(?:CapacitorPlugin|NativePlugin)[\s\S]+?class ([\w]+)/gm regex
[capacitor] 2022-04-15T12:49:47.517Z capacitor:android:update Searching 'D:\\Src\\GeneralRV\\mobile\\builds\\20220414\\node_modules\\@capacitor\\keyboard\\android\\src\\main\\java\\com\\capacitorjs\\plugins\\keyboard\\KeyboardPlugin.java' for package by /^package ([\w.]+);?$/gm regex
[capacitor] 2022-04-15T12:49:47.517Z capacitor:android:update 'com.capacitorjs.plugins.keyboard.KeyboardPlugin' is a suitable plugin class
[capacitor] 2022-04-15T12:49:47.522Z capacitor:android:update Searching 3 source files in 'D:\\Src\\GeneralRV\\mobile\\builds\\20220414\\node_modules\\@capacitor\\status-bar\\android\\src\\main' by /^@(?:CapacitorPlugin|NativePlugin)[\s\S]+?class ([\w]+)/gm regex
[capacitor] 2022-04-15T12:49:47.533Z capacitor:android:update Searching 'D:\\Src\\GeneralRV\\mobile\\builds\\20220414\\node_modules\\@capacitor\\status-bar\\android\\src\\main\\java\\com\\capacitorjs\\plugins\\statusbar\\StatusBarPlugin.java' for package by /^package ([\w.]+);?$/gm regex
[capacitor] 2022-04-15T12:49:47.533Z capacitor:android:update 'com.capacitorjs.plugins.statusbar.StatusBarPlugin' is a suitable plugin class
[capacitor] √ update android in 172.45ms
[capacitor] 2022-04-15T12:49:47.983Z capacitor:android:run Invoking ./gradlew with args: [ 'assembleDebug' ]
[capacitor] × Running Gradle build - failed!
[capacitor] [error]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>if "Windows_NT" == "Windows_NT" setlocal
[capacitor]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>set DIRNAME=D:\Src\GeneralRV\mobile\builds\20220414\android\
[capacitor]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>if "D:\Src\GeneralRV\mobile\builds\20220414\android\" == "" set DIRNAME=.
[capacitor]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>set APP_BASE_NAME=gradlew
[capacitor]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>set APP_HOME=D:\Src\GeneralRV\mobile\builds\20220414\android\
[capacitor]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>for %i in ("D:\Src\GeneralRV\mobile\builds\20220414\android\") do set APP_HOME=%~fi
[capacitor]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>set APP_HOME=D:\Src\GeneralRV\mobile\builds\20220414\android\
[capacitor]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
[capacitor]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>if defined JAVA_HOME goto findJavaFromJavaHome
[capacitor]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>set JAVA_HOME=C:\Other Programs\Java\jdk-18
[capacitor]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>set JAVA_EXE=C:\Other Programs\Java\jdk-18/bin/java.exe
[capacitor]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>if exist "C:\Other Programs\Java\jdk-18/bin/java.exe" goto execute
[capacitor]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>set CLASSPATH=D:\Src\GeneralRV\mobile\builds\20220414\android\\gradle\wrapper\gradle-wrapper.jar
[capacitor]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>"C:\Other Programs\Java\jdk-18/bin/java.exe" "-Xmx64m" "-Xms64m"   "-Dorg.gradle.appname=gradlew" -classpath "D:\Src\GeneralRV\mobile\builds\20220414\android\\gradle\wrapper\gradle-wrapper.jar" org.gradle.wrapper.GradleWrapperMain "assembleDebug"
[capacitor]         Starting a Gradle Daemon, 1 stopped Daemon could not be reused, use --status for details
[capacitor]
[capacitor]         > Configure project :app
[capacitor]         WARNING:Using flatDir should be avoided because it doesn't support any meta-data formats.
[capacitor]
[capacitor]         FAILURE: Build failed with an exception.
[capacitor]
[capacitor]         * Where:
[capacitor]         Build file 'D:\Src\GeneralRV\mobile\builds\20220414\node_modules\@capacitor\android\capacitor\build.gradle'
[capacitor]
[capacitor]         * What went wrong:
[capacitor]         Could not compile build file 'D:\Src\GeneralRV\mobile\builds\20220414\node_modules\@capacitor\android\capacitor\build.gradle'.
[capacitor]         > startup failed:
[capacitor]         General error during conversion: Unsupported class file major version 62
[capacitor]
[capacitor]         java.lang.IllegalArgumentException: Unsupported class file major version 62

(stack trace omitted for length limit)

[capacitor]
[capacitor]         1 error
[capacitor]
[capacitor]
[capacitor]         * Try:
[capacitor]         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.
[capacitor]
[capacitor]         * Get more help at https://help.gradle.org
[capacitor]
[capacitor]         Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.
[capacitor]
[capacitor]         You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.
[capacitor]
[capacitor]
[capacitor]         BUILD FAILED in 9s
[capacitor]         See https://docs.gradle.org/7.2/userguide/command_line_interface.html#sec:command_line_warnings
[capacitor]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>if "1" == "0" goto mainEnd
[capacitor]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
[capacitor]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>rem the _cmd.exe /c_ return code!
[capacitor]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>if not "" == "" exit 1
[capacitor]
[capacitor]         D:\Src\GeneralRV\mobile\builds\20220414\android>exit /b 1
[capacitor]
[ERROR] An error occurred while running subprocess capacitor.

        capacitor.cmd run android --target Pixel_4_API_30_Android_11_ exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.
  ionic:utils-process onBeforeExit handler: 'process.exit' received +0ms
  ionic:utils-process onBeforeExit handler: running 2 functions +0ms
  ionic:utils-process error while killing process tree for 66448: Error: Command failed: taskkill /pid 66448 /T /F
  ionic:utils-process ERROR: The process "66448" not found.
  ionic:utils-process
  ionic:utils-process     at ChildProcess.exithandler (node:child_process:399:12)
  ionic:utils-process     at ChildProcess.emit (node:events:526:28)
  ionic:utils-process     at maybeClose (node:internal/child_process:1092:16)
  ionic:utils-process     at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5) {
  ionic:utils-process   killed: false,
  ionic:utils-process   code: 128,
  ionic:utils-process   signal: null,
  ionic:utils-process   cmd: 'taskkill /pid 66448 /T /F'
  ionic:utils-process } +373ms
  ionic:utils-process onBeforeExit handler: error from function: Error: Command failed: taskkill /pid 66448 /T /F
  ionic:utils-process ERROR: The process "66448" not found.
  ionic:utils-process
  ionic:utils-process     at ChildProcess.exithandler (node:child_process:399:12)
  ionic:utils-process     at ChildProcess.emit (node:events:526:28)
  ionic:utils-process     at maybeClose (node:internal/child_process:1092:16)
  ionic:utils-process     at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5) {
  ionic:utils-process   killed: false,
  ionic:utils-process   code: 128,
  ionic:utils-process   signal: null,
  ionic:utils-process   cmd: 'taskkill /pid 66448 /T /F'
  ionic:utils-process } +2ms
  ionic:utils-process error while killing process tree for 59928: Error: Command failed: taskkill /pid 59928 /T /F
  ionic:utils-process ERROR: The process "59928" not found.
  ionic:utils-process
  ionic:utils-process     at ChildProcess.exithandler (node:child_process:399:12)
  ionic:utils-process     at ChildProcess.emit (node:events:526:28)
  ionic:utils-process     at maybeClose (node:internal/child_process:1092:16)
  ionic:utils-process     at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5) {
  ionic:utils-process   killed: false,
  ionic:utils-process   code: 128,
  ionic:utils-process   signal: null,
  ionic:utils-process   cmd: 'taskkill /pid 59928 /T /F'
  ionic:utils-process } +4ms
  ionic:utils-process onBeforeExit handler: error from function: Error: Command failed: taskkill /pid 59928 /T /F
  ionic:utils-process ERROR: The process "59928" not found.
  ionic:utils-process
  ionic:utils-process     at ChildProcess.exithandler (node:child_process:399:12)
  ionic:utils-process     at ChildProcess.emit (node:events:526:28)
  ionic:utils-process     at maybeClose (node:internal/child_process:1092:16)
  ionic:utils-process     at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5) {
  ionic:utils-process   killed: false,
  ionic:utils-process   code: 128,
  ionic:utils-process   signal: null,
  ionic:utils-process   cmd: 'taskkill /pid 59928 /T /F'
  ionic:utils-process } +4ms
  ionic:utils-process processExit: exiting (exit code: 1) +1ms

Any direction for me on how to get past this? I know that for now I can stick with the earlier package versions, but at some point I’ll have to update.

Thanks.

4 posts - 2 participants

Read full topic

Hi! I’m building an app which needs to play an HLS stream. When the user hides the app (to the background) the stream needs to continue playing. Preferably with the possibility of using the media controls.

For iOS, this isn’t a problem. I can just use the HTML5 audio player and it just works perfect. For Android this won’t work. When I hide the app, the music stops playing (even with backgroundMode enabled).

Does anyone know how to solve this on Android?

1 post - 1 participant

Read full topic

I would like my app to get and report background location much like Find My Friends. Apps like Uber or Google Maps (when it’s navigating) display a blue bar behind the clock which allows you to background the app and use other apps and click the clock to return. I want to do the same thing.

I thought the capacitor community plugin for background location would do it, but so far I haven’t seen it show that. Is that something else? Anyone ever crossed this bridge?

1 post - 1 participant

Read full topic

I there, I’ve been trying to find any issues about this and I found 1 closed without solution and an other one for react which does not apply to angular I guess.

First the setup issue/problem, although I have globally installed @ionic/angular@5.9.3, when I create a new ionic project the latest version is installed locally.
The questions here would be:

• Is it possible to start an Ionic project with an angular specific version?
• Does Ionic 5 works with latest angular dependencies “^13.0.0”?
• How should I downgrade the ionic framework version to not be limited to +60 chromium android usersdevice browser support? If I change >@ionic/angular within package.json (locally @6.1.2) to version “^5.0.0” or “~5.9.3” or “5.9.3” but gives the following error while trying to execute ionic serve:

[ng] 
[ng] Error: node_modules/ionicons/dist/types/components.d.ts:66:15 - error TS2320: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'.
[ng]   Named property 'ariaHidden' of types 'IonIcon' and 'HTMLStencilElement' are not identical.
[ng] 
[ng] 66     interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
[ng]                  ~~~~~~~~~~~~~~~~~~
[ng] 
[ng] 
[ng] Error: node_modules/ionicons/dist/types/components.d.ts:66:15 - error TS2320: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'.
[ng]   Named property 'ariaLabel' of types 'IonIcon' and 'HTMLStencilElement' are not identical.
[ng] 
[ng] 66     interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
[ng]                  ~~~~~~~~~~~~~~~~~~
[ng] 
[ng] 
[ng] Error: node_modules/typescript/lib/lib.dom.d.ts:4632:101 - error TS2344: Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Element'.
[ng]   Type 'HTMLElement | HTMLMetaElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | ... 151 more ... | HTMLMarqueeElement' is not assignable to type 'Element'.
[ng]     Type 'HTMLIonIconElement' is not assignable to type 'Element'.
[ng]       Property 'ariaHidden' is optional in type 'HTMLIonIconElement' but required in type 'Element'.
[ng] 
[ng] 4632     getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
[ng]                                                                                                          ~~~~~~~~~~~~~~~~~~~~~~~~
[ng] 
[ng] 
[ng] Error: node_modules/typescript/lib/lib.dom.d.ts:4953:101 - error TS2344: Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Element'.
[ng]   Type 'HTMLElement | HTMLMetaElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | ... 151 more ... | HTMLMarqueeElement' is not assignable to type 'Element'.
[ng] 
[ng] 4953     getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
[ng]                                                                                                          ~~~~~~~~~~~~~~~~~~~~~~~~
[ng] 
[ng] 
[ng] 
[ng] node_modules_ionic_core_dist_esm_focus-visible-f4ad4f1a_js.js      | focus-visible-f4ad4f1a-js                    |   1.99 kB | 
[ng] node_modules_ionic_core_dist_esm_ion-text_entry_js.js              | -                                            |   1.70 kB | 
[ng] 
[ng] Build at: 2022-04-21T12:12:45.332Z - Hash: 83641904bab4306e - Time: 9714ms
[ng] ✖ Failed to compile.

• NPM listings

• npm -g list:
  ├── @angular/cli@12.2.17
  ├── @ionic/angular@5.9.3
  ├── @ionic/cli@6.19.0
  ├── corepack@0.10.0
  └── npm@8.6.0

• npm list:
  ├── ngcc_entry_points.json@ extraneous
  ├── @angular-devkit/build-angular@13.2.6
  ├── @angular-eslint/builder@13.0.1
  ├── @angular-eslint/eslint-plugin-template@13.0.1
  ├── @angular-eslint/eslint-plugin@13.0.1
  ├── @angular-eslint/template-parser@13.0.1
  ├── @angular/cli@13.2.6
  ├── @angular/common@13.2.7
  ├── @angular/compiler-cli@13.2.7
  ├── @angular/compiler@13.2.7
  ├── @angular/core@13.2.7
  ├── @angular/forms@13.2.7
  ├── @angular/language-service@13.2.7
  ├── @angular/platform-browser-dynamic@13.2.7
  ├── @angular/platform-browser@13.2.7
  ├── @angular/router@13.2.7
  ├── @capacitor/android@3.4.3
  ├── @capacitor/app@1.1.1
  ├── @capacitor/cli@3.4.3
  ├── @capacitor/core@3.4.3
  ├── @capacitor/haptics@1.1.4
  ├── @capacitor/ios@3.4.3
  ├── @capacitor/keyboard@1.2.2
  ├── @capacitor/status-bar@1.0.8
  ├── @ionic/angular-toolkit@6.1.0
  ├── @ionic/angular@6.1.2
  ├── @types/jasmine@3.6.11
  ├── @types/jasminewd2@2.0.10
  ├── @types/node@12.20.48
  ├── @typescript-eslint/eslint-plugin@5.3.0
  ├── @typescript-eslint/parser@5.3.0
  ├── eslint-plugin-import@2.22.1
  ├── eslint-plugin-jsdoc@30.7.6
  ├── eslint-plugin-prefer-arrow@1.2.2
  ├── eslint@7.32.0
  ├── jasmine-core@3.8.0
  ├── jasmine-spec-reporter@5.0.2
  ├── karma-chrome-launcher@3.1.1
  ├── karma-coverage-istanbul-reporter@3.0.3
  ├── karma-coverage@2.0.3
  ├── karma-jasmine-html-reporter@1.7.0
  ├── karma-jasmine@4.0.2
  ├── karma@6.3.19
  ├── protractor@7.0.0
  ├── rxjs@6.6.7
  ├── ts-node@8.3.0
  ├── tslib@2.3.1
  ├── typescript@4.4.4
  └── zone.js@0.11.5

• Gestures Issue

To introduce this issue I’ll explain its purpose, I’m trying to handle routing by swipe, therefore, I’m using ion-tabs structure to instead of placing an ion-bar place a custom element in which the gesture will be captured to change within a list of routes.

@ViewChild('slider') private slider: ElementRef;

  public details = '';

  constructor(private gestureCtrl: GestureController) { }

  ngOnInit() {
    const gesture: Gesture = this.gestureCtrl.create({
      el: this.slider.nativeElement,
      gestureName: 'slide-gesture',
      threshold: 20,
      onMove: detail => { this.onMove(detail); },
      onEnd: (ev) => { this.end(ev); },
    }, true);
    gesture.enable();
  }
  private end(ev: GestureDetail) {
      console.log('end', ev);
    }

  private onMove(detail) {
    const type = detail.type;
    const currentX = detail.currentX;
    const deltaX = detail.deltaX;
    const velocityX = detail.velocityX;

    this.details = `
      <div>Type: ${type}</div>
      <div>Current X: ${currentX}</div>
      <div>Delta X: ${deltaX}</div>
      <div>Velocity X: ${velocityX}</div>
    `;
  }
}

By now I’ve tried to replicate Ionic documentation about gestures with no result as the browser says:

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'nativeElement')
TypeError: Cannot read properties of undefined (reading 'nativeElement')
    at GestureRoutingPage.ngOnInit (gesture-routing.page.ts:19:23)
    at callHook (core.mjs:2542:1)
    at callHooks (core.mjs:2511:1)
    at executeInitAndCheckHooks (core.mjs:2462:1)
    at refreshView (core.mjs:9499:1)
    at renderComponentOrTemplate (core.mjs:9598:1)
    at tickRootContext (core.mjs:10829:1)
    at detectChangesInRootView (core.mjs:10854:1)
    at RootViewRef.detectChanges (core.mjs:21451:1)
    at StackController.setActive (ionic-angular.js:2526:48)
    at resolvePromise (zone.js:1262:1)
    at resolvePromise (zone.js:1216:1)
    at zone.js:1329:1
    at _ZoneDelegate.push.3484._ZoneDelegate.invokeTask (zone.js:443:1)
    at Object.onInvokeTask (core.mjs:25535:1)
    at _ZoneDelegate.push.3484._ZoneDelegate.invokeTask (zone.js:442:1)
    at Zone.push.3484.Zone.runTask (zone.js:214:1)
    at drainMicroTaskQueue (zone.js:632:1)

Github Repo for reproduce: here

1 post - 1 participant

Read full topic

Hi,
I’m making a page that shows a list of cards.
The data structure is in the form of an array of objects (example: [{a: 1}, {b: 2}, …]). (name of objects: FirstCategory).

Since each object is a category, each object will then have children (showcases).
Showcases are also imported as an object vector.
Each showcase has a “ParentID” field which is identical to the “ID” field owned by the parent category it belongs to.

I need to be able to filter the categories array but the search must be performed in the “Name” field of the showcase object (in the showcase array).

Anyone have any idea how I can do it?

Thanks in advance.

1 post - 1 participant

Read full topic

Hey there, I’ve noticed that putting my phone in Airplane mode and opening an app which runs on AppFlow causes the app not to load. I assume this is because it’s trying to connect to Ionic’s servers to query for an update and it can’t reach it’s destination. Is this true or am I doing something wrong? We need both updatable apps but also offline support. Help!

1 post - 1 participant

Read full topic

Hi there.

I’m trying to do some cleanup events when leaving ionic views but neither method is firing on any page of my app. I thought it may have been due to how the routing is declared, but I can’t find any solution.

        <IonApp>
            <IonReactRouter>
                <IonRouterOutlet> 
                    <Route path="/login" render={() => user ? <Redirect to="/home/pending-chats"/> : <Login/>} exact={true}/>
                    <Route path="/pending-chats/:contactId" component={LinkChat} />
                    <Route path="/conversations/:contactUserSwitchboardId" component={Chat} />
                    <Route path="/contacts/:contactId" component={ContactDetails} />
                </IonRouterOutlet>
                <Route path="/home" >
                    <IonTabs>
                        <IonRouterOutlet>
                            <Route path="/home/pending-chats" component={PendingChats} exact={true} />
                            <Route path="/home/conversations" component={Conversations} exact={true} />
                            <Route path="/home/contacts" component={Contacts} exact={true} />
                            <Route path="/home/configuration" component={Configuration} exact={true} />
                        </IonRouterOutlet>
                        <IonTabBar slot="bottom" style={{borderTop: 0}}>
                            <IonTabButton tab="pending-chats" href="/home/pending-chats">
                                {app.unreadPendingChats > 0 &&
                                    <IonBadge className="notification-tabs" color="primary">
                                        {app.unreadPendingChats < 100 ? app.unreadPendingChats : '99+'}
                                    </IonBadge>
                                }
                                <IonIcon icon={peopleCircle} />
                                <IonLabel>{t('pendingChats.navTitle')}</IonLabel>
                                <IonRippleEffect />
                            </IonTabButton>
                            <IonTabButton tab="conversations" href="/home/conversations">
                                {app.unreadConversations > 0 &&
                                    <IonBadge className="notification-tabs" color="primary">
                                        {app.unreadConversations < 100 ? app.unreadConversations : '99+'}
                                    </IonBadge>
                                }
                                <IonIcon icon={chatbubblesOutline} />
                                <IonLabel>{t('conversations.navTitle')}</IonLabel>
                                <IonRippleEffect />
                            </IonTabButton>
                            <IonTabButton tab="contacts" href="/home/contacts">
                                <IonIcon icon={personCircleOutline} />
                                <IonLabel>{t('contacts.navTitle')}</IonLabel>
                                <IonRippleEffect />
                            </IonTabButton>
                            <IonTabButton tab="configuration" href="/home/configuration">
                                <IonIcon icon={options} />
                                <IonLabel>{t('configuration.navTitle')}</IonLabel>
                                <IonRippleEffect />
                            </IonTabButton>
                        </IonTabBar>
                    </IonTabs>
                </Route>
                <Route render={() => user ? <Redirect to="/home/pending-chats" /> : <Redirect to="/login" />} />
            </IonReactRouter>
        </IonApp>

1 post - 1 participant

Read full topic

Hi,
I have a method in component -

  /**
   * Calculate if horizontal stepper would fit within screen
   */
  private canShowHorizontalStepper(): boolean {
    const elementStyles = getComputedStyle(this.el);
    const stepWidth = elementStyles
      .getPropertyValue('--step-width-md')
      .replace(/\D/g, '');
    const lineWidth = elementStyles
      .getPropertyValue('--step-horizontal-line-width')
      .replace(/\D/g, '');

    return window.innerWidth < (
      (+stepWidth * this.stepperData.length) + (+lineWidth * this.stepperData.length - 1)
    );
  }

Which works correctly in storybook, but when running unit test both css properties are returned as empty strings;

ps. these css properties are defined inside component style :host {}

1 post - 1 participant

Read full topic

Hello fam,

I’m trying to create a logger service for my project to write a file and send it to my server. Through console it writes ok, but when I open the file it is supposed to write … there is a mess with the logs.

I’m using this setup for the app:

Ionic:

   Ionic CLI                     : 6.18.1 
   Ionic Framework               : @ionic/angular 5.9.3
   @angular-devkit/build-angular : 0.901.15
   @angular-devkit/schematics    : 9.1.12
   @angular/cli                  : 9.1.12
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 10.0.0 (cordova-lib@10.1.0)
   Cordova Platforms : not available
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 18 other plugins)

Here is my code:

import { Injectable } from '@angular/core';
import { File } from '@ionic-native/file/ngx';
import { Device } from '@ionic-native/device/ngx';
@Injectable({
  providedIn: 'root',
})
export class LoggerServiceService {
  nombreLog: string;
  
  constructor(private readonly file: File, private readonly device: Device) {
    const fechaHoy = new Date();
    this.nombreLog =
      'log_' +
      fechaHoy.toLocaleDateString().replace('/', '').replace('/', '') +
      '.log';
  }

  info(mensaje: string) {
    this.log(mensaje, 'INFO');
  }

  error(mensaje: string) {
    this.log(mensaje, 'ERROR');
  }

  log(mensaje: string, tipo: string) {

    const fechaHoraLog = new Date();
    const fec =  fechaHoraLog.toLocaleString();
    const seg = String(fechaHoraLog.getMilliseconds()).padStart(3, '0');

    const msgArray = [];
    msgArray.push(mensaje);

    for (let elemento of msgArray){
      mensaje = `\n${fec},${seg} - ${this.device.uuid} - ${tipo} - ${elemento}`;
      console.log(mensaje);
    }

    this.file.writeFile(this.file.dataDirectory + '/logs', this.nombreLog, mensaje, { append: true, replace: false });
  }

  comprobarFicheroYdirectorioLog(callback) {
    this.file
      .checkDir(this.file.dataDirectory, 'logs')
      .then((result) => {
        const fechaHoy = new Date();
        const nombreLog =
          'log_' +
          fechaHoy.toLocaleDateString().replace('/', '').replace('/', '') +
          '.log';
        this.file
          .checkFile(this.file.dataDirectory, this.nombreLog)
          .then((result) => {
            if (!result) {
              //log no existe por alguna razon pero la funcion no devuelve error, no deberia ocurrir
              this.file
                .createFile(this.file.dataDirectory + '/logs', nombreLog, true)
                .then((result) => {
                  callback();
                });
            }
          })
          .catch((err) => {
            console.log('fichero no existe');
            //no se encuentra el fichero log
            this.file
              .createFile(this.file.dataDirectory + '/logs', nombreLog, true)
              .then((result) => {
                callback();
                console.log(result);
              });
          });
      })
      .catch((err) => {
        console.log('directorio no existe');
        this.file
          .createDir(this.file.dataDirectory, 'logs', false)
          .then((result) => {
            console.log('directorio creado ');
            this.info('Directorio logs creado ');
            this.comprobarFicheroYdirectorioLog(callback);
          })
          .catch((err) => {
            console.log('directorio no creado' + err);
            this.error('Directorio logs no creado');
            callback();
          });
      });
  }
}

And here is what I find when I open the file:

22/4/2022, 11:04:03,525 - e42ab3ff7ff8995c - INFO - PAGINA 1 DELETE -> 613428940,613428942,613428944,613429035
22/4/2022, 11:04:04,030 - e42ab3ff7ff8995c - INFO - Guardando anomalias descargadas
22/4/2022, 11:04:07,587 - e42ab3ff7ff8995c - INFO - Respuesta servidor OK
22/4/2022, 11:04:07,596 - e42ab3ff7ff8995c - INFO - DATOS DESCARGADOS PARA LA PAGINA 2
22/4/2022, 11:04:08,306 - e42ab3ff7ff8995c - INFO - Guardando anomalias descargadas
22/4/2022, 11:04:11,142 - e42ab3ff7ff8995c - INFO - Comienza proceso de UPSERT_1
22/4/2022, 11:04:11,429 - e42ab3ff7ff8995c - INFO - Guardando anomalias descargadas
22/4/2022, 11:04:12,025 - e42ab3ff7ff8995c - INFO - Exito en descarga anomalias Gamad
22/4/2022, 11:04:12,435 - e42ab3ff7ff8995c - INFO - NAVEGACION -> seleccion-elemento
22/4/2022, 11:04:17,289 - e42ab3ff7ff8995c - INFO - file:///data/user/0/iberdrola.distribucion.medisweb.gia.intune.intg/files/
22/4/2022, 11:04:17,333 - e42ab3ff7ff8995c - INFO - [object Object]
22/4/2022, 11:05:54,700 - e42ab3ff7ff8995c - INFO - Se ha creado Maestros.db
22/4/2022, 11:05:56,002 - e42ab3ff7ff8995c - INFO - El numero de version es:  0.1.7
22/4/2022, 11:05:56,339 - e42ab3ff7ff8995c - INFO - Se ha añadido registros en Medisgia.db
22/4/2022, 11:05:56,563 - e42ab3ff7ff8995c - INFO - No hace falta descargar Maestros local
22/4/2022, 11:05:59,571 - e42ab3ff7ff8995c - INFO - Se hace llamada al servidor de descarga de anomalias: sincronizarAnomaliasGamadServiceImpl
22/4/2022, 11:05:59,931 - e42ab3ff7ff8995c - INFO - **PAGINA 0 UPSERT -> No**
**22/4/2**
22/4/2022, 11:05:59,936 - e42ab3ff7ff8995c - INFO - Comienza proceso de DELETE
22/4/2022, 11:06:00,101 - e42ab3ff7ff8995c - INFO - Se hace llamada al servidor de descarga de anomalias: sincronizarAnomaliasGamadServiceImpl
22/4/2022, 11:06:00,116 - e42ab3ff7ff8995c - INFO - Guardando anomalias descargadas
22/4/2022, 11:06:00,349 - e42ab3ff7ff8995c - INFO - DATOS DESCARGADOS PARA LA PA
22/4/2022, 11:06:00,359 - e42ab3ff7ff8995c - INFO - PAGINA 1 INSERT ->  No hay anoma
22/4/2022, 11:06:00,555 - e42ab3ff7ff8995c - INFO - Guardando anomalias descargadas
22/4/2022, 11:06:01,155 - e42ab3ff7ff8995c - INFO - Exito en descarga anomalias Gamad
22/4/2022, 11:06:01,616 - e42ab3ff7ff8995c - INFO - NAVEGACION -> seleccion-elemento

That is just a small example, but I got a lot of badly written lines and there are a lot more missing.

First before pushing the ‘mensaje’ to the msgArray I tried to directly print it like this:

log(mensaje: string, tipo: string) {
    const fechaHoraLog = new Date();
    const fec =  fechaHoraLog.toLocaleString();
    const seg = String(fechaHoraLog.getMilliseconds()).padStart(3, '0');
    mensaje = `\n${fec},${seg} - ${this.device.uuid} - ${tipo} - ${mensaje}`;
    this.file.writeFile(this.file.dataDirectory + '/logs', this.nombreLog, mensaje, { append: true, replace: false });
  }

but it was even worse.

Hope you can help!

1 post - 1 participant

Read full topic

Hey there, on a specific page in our app, when loading another page, this error appears in xcode and the webview reolads completly (sometimes it works?).

2022-04-22 16:04:42.037219+0200 App[20358:1582226] [Process] 0x114001910 - [PID=20365] WebProcessProxy::didClose: (web process 20365 crash)
2022-04-22 16:04:42.037276+0200 App[20358:1582226] [Process] 0x114001910 - [PID=20365] WebProcessProxy::processDidTerminateOrFailedToLaunch: reason=4
2022-04-22 16:04:42.037305+0200 App[20358:1582226] [ProcessSuspension] 0x112018300 - ProcessAssertion: Failed to acquire RBS Background assertion 'ConnectionTerminationWatchdog' for process because PID 0 is invalid
2022-04-22 16:04:42.037362+0200 App[20358:1582226] [Process] 0x105021418 - [pageProxyID=7, webPageID=8, PID=20365] WebPageProxy::processDidTerminate: (pid 20365), reason 4
2022-04-22 16:04:42.037358+0200 App[20358:1583066] [ProcessSuspension] 0x112018300 - ProcessAssertion: Failed to acquire RBS assertion 'ConnectionTerminationWatchdog' for process with PID=0, error: (null)
2022-04-22 16:04:42.040106+0200 App[20358:1582226] [Loading] 0x105021418 - [pageProxyID=7, webPageID=8, PID=20365] WebPageProxy::dispatchProcessDidTerminate: reason=Crash
2022-04-22 16:04:42.048096+0200 App[20358:1583066] [assertion] Error acquiring assertion: <Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}>
2022-04-22 16:04:42.050357+0200 App[20358:1583066] [ProcessSuspension] 0x112018360 - ProcessAssertion: Failed to acquire RBS assertion 'WebProcess Background Assertion' for process with PID=20365, error: Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}
2022-04-22 16:04:42.054601+0200 App[20358:1583066] [assertion] Error acquiring assertion: <Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}>
2022-04-22 16:04:42.066444+0200 App[20358:1583066] [ProcessSuspension] 0x112009c10 - ProcessAssertion: Failed to acquire RBS assertion 'GPUProcess Background Assertion' for process with PID=20367, error: Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}

If don’t know how to dig into this, does someone experienced the same and can help me getting in the right direction?

Also if some of the Ionic team would like to help, please answer me, i will give you access to the app so you can debug i for example?

1 post - 1 participant

Read full topic

We have an Angular application that is packaged as a mobile app for iOS and Android. The app itself works great on the mobile platforms. Encountering a problem with the authentication piece. App uses the Okta javascript Sign-In Widget which works fine when running as a web application, however, it does not function inside of the Capacitor webview because of the browser redirects needed to function.

Does anyone have experience with an OIDC login flow and redirects in a webview or perhaps suggestions for possible options with this scenario?

1 post - 1 participant

Read full topic