createThumbnail(videoselected) {

this.displayname = videoselected.substring(videoselected.lastIndexOf('/') + 1);
console.log('Display Video name:-', this.displayname);

const thumbnailoption: CreateThumbnailOptions = {
  fileUri: videoselected,
  width: 200,
  height: 100,
  atTime: 1,
  outputFileName: 'sample',
  quality: 100,
};
this.videoEditor.createThumbnail(thumbnailoption).then(thumbnailPath => {
  console.log('Thumbnail Responce =>', thumbnailPath);
  this.thumbnail = thumbnailPath;
  this.thumbpic = this.win.Ionic.WebView.convertFileSrc(thumbnailPath);
  console.log('thumbnail pic path:-', this.thumbpic);
}).catch((err) => {
  console.log('Thumbnail Responce Error=>', err);
});

}

Nice site. It is really helpful for me. I would love to visit again your site.
Software

Yandere simulator

I had the same problem as you.
I am using capacitor 3, ionic 5, vue 3 in my project.
I fork a repository in which I removed www from the asset path and now everything works correctly on android and ios

@rapropos This is so educative, thanks so much. Learning a lot from this forum, amazing.

Hi, I am trying to pipe a writable stream to Filesystem.writeFile() like one would use the pipe(fs.createwritestream(url).

this.httpService.downloadFile()

        .pipe(

          toWritableStream(stream),

          map(async chunk => {

            // Convert to base64

            let base64Data = await this.b64FromStream(chunk);

            // append to file

            await Filesystem.appendFile({
              path: url,
              data: data,
              directory: Directory.Data,
            })

      }),

    )

    .subscribe();

Is there a better way to do this? It only seems to write the first chunk and then fails.

Thanks!

I have fixed the same issue when using ionic/storage v3 for angular. I just had to update my angular to latest v9 (previously on v8) and update all ionic native to v5.XX (previously on v5.0).

Screenshot of the errors in cmd:

1. Screenshot by Lightshot

Starting a Gradle Daemon, 1 incompatible Daemon could not be reused, use --status for details
[capacitor]
[capacitor]         > Configure project :app
[capacitor]         google-services.json not found, google-services plugin not applied. Push Notifications won't work
[capacitor]         WARNING:: Using flatDirs should be avoided because it doesn't support any meta-data formats.
[capacitor]         Currently detected usages:
[capacitor]         - repository flatDir used in: project ':app', project ':capacitor-cordova-android-plugins'
[capacitor]         WARNING:: Please remove usages of `jcenter()` Maven repository from your build scripts and migrate your build to other Maven repositories.
[capacitor]         This repository is deprecated and it will be shut down in the future.
[capacitor]         See http://developer.android.com/r/tools/jcenter-end-of-service for more information.
[capacitor]         Currently detected usages in: root project 'android', project ':app', project ':capacitor-android', ...
[capacitor]

2. Screenshot by Lightshot

[capacitor]         FAILURE: Build failed with an exception.
[capacitor]
[capacitor]         * What went wrong:
[capacitor]         Execution failed for task ':app:processDebugMainManifest'.
[capacitor]         > Unable to make field private final java.lang.String java.io.File.path accessible: module java.base does not "opens java.io" to unnamed module @33538c71
[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]         Use '--warning-mode all' to show the individual deprecation warnings.
[capacitor]         BUILD FAILED in 33s
[capacitor]
[capacitor]         See https://docs.gradle.org/7.0/userguide/command_line_interface.html#sec:command_line_warnings
[capacitor]         42 actionable tasks: 42 executed

3. My package.js

"dependencies": {
    "@capacitor/android": "3.2.0",
    "@capacitor/app": "^1.0.2",
    "@capacitor/core": "3.2.0",
    "@capacitor/haptics": "^1.0.2",
    "@capacitor/keyboard": "^1.0.2",
    "@capacitor/status-bar": "^1.0.2",
    "@ionic/react": "^5.5.0",
    "@ionic/react-router": "^5.5.0",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.6.3",
    "@types/jest": "^26.0.20",
    "@types/node": "^12.19.15",
    "@types/react": "^16.14.3",
    "@types/react-dom": "^16.9.10",
    "@types/react-router": "^5.1.11",
    "@types/react-router-dom": "^5.1.7",
    "ionicons": "^5.4.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.2",
    "typescript": "^4.1.3",
    "web-vitals": "^0.2.4",
    "workbox-background-sync": "^5.1.4",
    "workbox-broadcast-update": "^5.1.4",
    "workbox-cacheable-response": "^5.1.4",
    "workbox-core": "^5.1.4",
    "workbox-expiration": "^5.1.4",
    "workbox-google-analytics": "^5.1.4",
    "workbox-navigation-preload": "^5.1.4",
    "workbox-precaching": "^5.1.4",
    "workbox-range-requests": "^5.1.4",
    "workbox-routing": "^5.1.4",
    "workbox-strategies": "^5.1.4",
    "workbox-streams": "^5.1.4"
  },
"devDependencies": {
    "@capacitor/cli": "3.2.0"
  },

Note: My android studio, ionic, capacitor are all up to date. But still getting the above error. Please help me.

Thanks

Also looking for this solution.

Hello everyone,

I recently discovered that my app is no longer working as it should, I think it is that the plugin I had installed for it is no longer supported.
Does anyone by any chance know how to use in app purchases in an ionic 3 project?
I believe there is a new plugin called inAppPurchase2 but I don’t know if it is possible to use it in an ionic 3 project

Thanks a lot

Hello everyone,

Can anyone tell me if it is possible to use Ionic Native as InAppPurchase2 or AppRate in a Ionic 3 project? Thanks a lot

Hello everyone,

why when i run “ionic start photo-gallery tabs --type = angular --capacitor” I can’t create a new project?

I get these errors:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: ionic-app-base@0.0.0
npm ERR! Found: @ angular / compiler @ 12.1.5
npm ERR! node_modules / @ angular / compiler
npm ERR! @ angular / compiler @ “~ 12.1.1” from the root project
npm ERR! peer @ angular / compiler @ “12.1.5” from @ angular / compiler-cli @ 12.1.5
npm ERR! node_modules / @ angular / compiler-cli
npm ERR! dev @ angular / compiler-cli @ “~ 12.1.1” from the root project
npm ERR! peer @ angular / compiler-cli @ “^ 12.0.0 || ^ 12.1.0-next” from @ angular-devkit / build-angular @ 12.1.4
npm ERR! node_modules / @ angular-devkit / build-angular
npm ERR! dev @ angular-devkit / build-angular @ “~ 12.1.1” from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @ angular / compiler @ “12.2.2” from @ angular / localize @ 12.2.2
npm ERR! node_modules / @ angular / localize
npm ERR! peerOptional @ angular / localize @ “^ 12.0.0 || ^ 12.1.0-next” from @ angular-devkit / build-angular @ 12.1.4
npm ERR! node_modules / @ angular-devkit / build-angular
npm ERR! dev @ angular-devkit / build-angular @ “~ 12.1.1” 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! See /Users/luca/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/luca/.npm/_logs/2021-08-20T11_01_53_118Z-debug.log
[ERROR] An error occurred while running subprocess npm.

    npm i --save -E @ capacitor / core @ latest exited with exit code 1.
    
    Re-running this command with the --verbose flag may provide more
    information.

Installing dependencies may take several minutes.

────────────────────────────────────────────────────────────────────── ────────────

    Ionic Appflow, the mobile DevOps solution by Ionic

       Continuously build, deploy, and ship apps 🚀
    Focus on building apps while we automate the rest 🎁

             👉 https://ion.link/appflow 👈

────────────────────────────────────────────────────────────────────── ────────────

npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: photo-gallery@0.0.1
npm ERR! Found: @ angular / compiler @ 12.1.5
npm ERR! node_modules / @ angular / compiler
npm ERR! @ angular / compiler @ “~ 12.1.1” from the root project
npm ERR! peer @ angular / compiler @ “12.1.5” from @ angular / compiler-cli @ 12.1.5
npm ERR! node_modules / @ angular / compiler-cli
npm ERR! dev @ angular / compiler-cli @ “~ 12.1.1” from the root project
npm ERR! peer @ angular / compiler-cli @ “^ 12.0.0 || ^ 12.1.0-next” from @ angular-devkit / build-angular @ 12.1.4
npm ERR! node_modules / @ angular-devkit / build-angular
npm ERR! dev @ angular-devkit / build-angular @ “~ 12.1.1” from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @ angular / compiler @ “12.2.2” from @ angular / localize @ 12.2.2
npm ERR! node_modules / @ angular / localize
npm ERR! peerOptional @ angular / localize @ “^ 12.0.0 || ^ 12.1.0-next” from @ angular-devkit / build-angular @ 12.1.4
npm ERR! node_modules / @ angular-devkit / build-angular
npm ERR! dev @ angular-devkit / build-angular @ “~ 12.1.1” 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! See /Users/luca/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/luca/.npm/_logs/2021-08-20T11_01_56_167Z-debug.log
[ERROR] An error occurred while running subprocess npm.

    npm i exited with exit code 1.
    
    Re-running this command with the --verbose flag may provide more
    information.

Hi.

The following code…

Code

        <div id="container">
            <ion-grid>
                <ion-row>
                    <ion-col size-md="6" offset-md="3" size-lg="4" offset-lg="4">

                        <ion-card class="ion-padding-top ion-padding-bottom">
                            <ion-card-header>
                                <ion-card-title> Effettua l'accesso </ion-card-title>
                                <ion-card-subtitle> Inserisci i tuoi dati </ion-card-subtitle>
                            </ion-card-header>

                            <ion-card-content>
                                <ion-item>
                                    <ion-label position="floating"> Utente </ion-label>
                                    <ion-input v-model="user.auth_name" type="text" placeholder="Nome utente o email" clear-input></ion-input>
                                </ion-item>

                                <ion-item>
                                    <ion-label position="floating"> Password </ion-label>
                                    <ion-input v-model="user.auth_password" type="password" placeholder="" clear-input></ion-input>
                                </ion-item>
                            </ion-card-content>

                            <ion-card-content>
                                <ion-button @click="userSignin" color="primary"> Accedi </ion-button>
                            </ion-card-content>

                            <ion-card-content>
                                <p> Hai dimenticato i dati? Recuperali adesso. </p>
                            </ion-card-content>
                        </ion-card>

                    </ion-col>
                </ion-row>
            </ion-grid>
        </div>

…generates this result on my Mac:

Mac

Screenshot 2021-08-20 at 15.13.402880×1600 189 KB

iPhone 12 mini

But on my iPhone 12 mini (hardware, no virtual device) I got this:

IMG_0870.PNG1125×2436 94.7 KB

Can you see the background under the sign-in fields?
It’s visible only on my “physical” phone, instead it isn’t on the iPhone 12 mini (virtual device) on Xcode.

Questions

1. Why is it visible on my phone?
2. How should I remove it “properly”?

Thank you,
Niccolò

I’m seeing the same issue in unit tests.

Hello guys, i’m looking for easy way to remove all the default “detail arrow” on IOS. I know all i need to do is use detail=“false”. But i use ion-item in a lot of different places.
Is it possible to remove with one line of code or i need to do it one by one in every component inside my app?

Sorry if I wrote something wrong, english is not my first language.

image772×246 16.1 KB

ok i understood. thank you rapropos.

Hi,

Thanks for answer. Followed your tips…

Space in path name Ionic 5 removed.

nvm installed:

nvm -v
0.38.0

LTS node installed:

node -v
v14.17.5

Debugging results:

1) Attach to running Android on device:
Error: Unable to find localabstract name of cordova app

2) Run Android on device:

Iniciando para android (esta operación puede tardar varios minutos)...
Command failed: emulator -list-avds
/bin/sh: 1: emulator: not found
Continue using standard CLI workflow.
2021-08-20T15:32:34.641Z ionic:lib Terminal info: { ci: false, shell: '/bin/bash', tty: false, windows: false }
2021-08-20T15:32:34.647Z ionic:lib CLI global options: { _: [ 'cordova', 'run', 'android' ], help: null, h: null, verbose: true, quiet: null, interactive: false, color: true, confirm: null, json: null, project: null, '--': [] }
2021-08-20T15:32:35.035Z ionic:lib:project Project type from config: @ionic/angular (angular)
2021-08-20T15:32:35.038Z ionic:lib:project Project details: { context: 'app', type: 'angular', errors: [], configPath: '/media/ramiro/EEE86441E86409E3/Documentos/Proyectos/Ionic/Ionic/Pruebas/Ionic5/myApp1/ionic.config.json' }
2021-08-20T15:32:35.046Z ionic Context: { binPath: '/usr/lib/node_modules/@ionic/cli/bin/ionic', libPath: '/usr/lib/node_modules/@ionic/cli', execPath: '/media/ramiro/EEE86441E86409E3/Documentos/Proyectos/Ionic/Ionic/Pruebas/Ionic5/myApp1', version: '6.16.3' }
2021-08-20T15:32:35.149Z ionic:lib:integrations:cordova:config Loading Cordova Config (config.xml: '/media/ramiro/EEE86441E86409E3/Documentos/Proyectos/Ionic/Ionic/Pruebas/Ionic5/myApp1/config.xml', package.json: '/media/ramiro/EEE86441E86409E3/Documentos/Proyectos/Ionic/Ionic/Pruebas/Ionic5/myApp1/package.json')
SyntaxError: Unexpected number in JSON at position 4

at JSON.parse (<anonymous>)
at Object.getNativeTargets (/usr/lib/node_modules/@ionic/cli/lib/native-run.js:110:44)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async RunCommand.preRun (/usr/lib/node_modules/@ionic/cli/commands/cordova/run.js:201:37)
at async RunCommand.execute (/usr/lib/node_modules/@ionic/cli/lib/command.js:42:13)
at async Executor.run (/usr/lib/node_modules/@ionic/cli/lib/executor.js:54:9)
at async Executor.execute (/usr/lib/node_modules/@ionic/cli/node_modules/@ionic/cli-framework/lib/executor.js:70:13)
at async Object.run (/usr/lib/node_modules/@ionic/cli/index.js:106:9)
2021-08-20T15:32:36.244Z ionic SyntaxError: Unexpected number in JSON at position 4
    at JSON.parse (<anonymous>)
    at Object.getNativeTargets (/usr/lib/node_modules/@ionic/cli/lib/native-run.js:110:44)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async RunCommand.preRun (/usr/lib/node_modules/@ionic/cli/commands/cordova/run.js:201:37)
    at async RunCommand.execute (/usr/lib/node_modules/@ionic/cli/lib/command.js:42:13)
    at async Executor.run (/usr/lib/node_modules/@ionic/cli/lib/executor.js:54:9)
    at async Executor.execute (/usr/lib/node_modules/@ionic/cli/node_modules/@ionic/cli-framework/lib/executor.js:70:13)
    at async Object.run (/usr/lib/node_modules/@ionic/cli/index.js:106:9)
Error de ionic cordova run android --verbose --no-interactive con el código de salida 1

3) android-webview
No webviews found

@3kSolutions @kanjiroushi ran into this problem as well, but our pages were too complicated to override all the CSS to make it work.

So instead we went this route javascript - Ionic 5 with Angular 9: How to Print from Desktop (not mobile device) - Stack Overflow.

printPage(id, title = "", subtitle = "") {
  let element = document.getElementById(id);
  if (element) {
    let printer = window.open("", "PRINT", "height=600,width=800");
    printer.document.write("<html><head>");
    printer.document.write("<title>" + document.title + "</title>");
    printer.document.write("</head><body>");
    if (title && title.length > 0) {
      printer.document.write("<h2>" + title + "</h2>");
    }
    if (subtitle && subtitle.length > 0) {
      printer.document.write("<h3>" + subtitle + "</h3>");
    }
    printer.document.write("<div>" + element.innerHTML + "</div>");
    printer.document.write("</body></html>");
    printer.document.close();
    printer.focus();
    printer.print();
    printer.close();
  }
},

Now we can call the printPage method from anywhere with an element id and optional title and subtitle, it prints multiple pages without any formatting.

Hi Everyone,

My ionic 3 signed app not working only in android 11 saying app not installed, without sign it’s working

Here are my configurations:

cordova-android": “^10.1.0”, and below properties were listed in my cdv-gradle-congig.json

“MIN_SDK_VERSION”: 22,
“SDK_VERSION”: 30,
“GRADLE_VERSION”: “7.1.1”,
“MIN_BUILD_TOOLS_VERSION”: “30.0.3”,
“AGP_VERSION”: “4.2.2”,
“KOTLIN_VERSION”: “1.5.21”,
“ANDROIDX_APP_COMPAT_VERSION”: “1.3.1”,
“ANDROIDX_WEBKIT_VERSION”: “1.4.0”,
“GRADLE_PLUGIN_GOOGLE_SERVICES_VERSION”: “4.3.8”,

Hi -

Hopefully, this is the correct place for this post. I have decided to use Ionic Vue to take our web application and target various desktops (Android, Windows, macOS). Our web application has the ability to embed a web link and we used to accomplish this with an iFrame. Security issues surrounding iFrame usage caused us to abandon the iFrame and open up a new tab instead. This work flow is fine for a web application, but are there any alternatives for desktop versions? I’m new to Ionic and would appreciate being pointed in the right direction.

Matt