I understand in the blog Ionic 6 has support for input styles outline and filled for android? I can’t find reference to this in the documentation, does any one know how to apply these new styles?

Thanks in advance.

1 post - 1 participant

Read full topic

Recently I started seing a strange behavior, when I run

ionic cordova run android

to deploy my debug version of the app to an actual android device, the generated app-debug.apk does not reflect the changes I made, and when I look at the app-debug.apk file I see that the date and time has not changed. No matter how many times I keep running the above command nothing changes.
This behavior is also valid when building a --release version too.
It does not fix until I restart my Mac computer.
My working environment

OS: MacOS Big Sur
npm: 8.3.2
ionic/cli: 6.18.1
cordova: 11.0.0
cordova-android: ^10.0.0
ionic/angular-toolkit: ^2.1.1
angular/core: ~9.1.6
ionic/angular: ^5.0.0

I don’t have any clue to what has happened that prevents the apk from updating and it is driving me crazy.
Any thoughts would halp and thanks in advance

1 post - 1 participant

Read full topic

Hi there, is there a way to build an ionic vue app as a library so it can be injected in an existing website? I can get the vue app built as a library by running yarn build which is defined as

"build": "vue-cli-service build --target lib --formats=umd --name helloWorld src/main.ts"

However when I import the generated library into the existing website I can see vue finds the target div and injects the ion-app and ion-router tags but they have nothing inside. I have the feeling that running yarn build doesn’t include any ionic references and that’s why it’s not working. Any ideas?

Thanks

1 post - 1 participant

Read full topic

I’ve come across what appears to be an access issue. I have a Subject in a service, shared via a public accessor as an observable.

  // can't subscribe with async
  private _connection$: Subject<number> = new Subject();
  public get connection$(): Observable<number> {
    return this._connection$.asObservable();
  }
  // this one works as I'd expect it
  private _interval$ = interval(1000);
  public get interval$(): Observable<number> {
    return this._interval$;
  }

When I subscribe to connection$ in a component controller I can access the emissions in the UI. However when I try to directly access it with an async pipe, I can’t. I added another observable as a property to the service and I can directly access that using async.

<div>from shared obs$: {{ data.interval$ | async }} - works</div>
<div>from async: {{ data.connection$ | async }} - doesn't work</div>
<div>from observable: {{ fromObservable$ | async }} - works</div>
<div>from subscription: {{ fromSubscription }} - works</div>

  public fromSubscription: number = 0;
  public fromObservable$: Observable<number> = this.data.connection$;

  constructor(public data: DataService) {
    data.connection$.subscribe({
      next: (count) => (this.fromSubscription = count),
    });
  }

I can work around it. But I’d like to understand why this is the case. It seems that the Subject returned asObservable in the service accessor isn’t subscribable via async but a regular observable is.

1 post - 1 participant

Read full topic

Hello,

I’m new to Vue and Ionic so I’m learning as I go.

I want to fit some text into a certain DIV i have on my page. But I cannot seem to make it work.

I want with page load to run a certain function so it can check whether or not the text need to be fitted.

I have found the following function:

const input = document.querySelector('input');
const output = document.querySelector('.output');
const outputContainer = document.querySelector('.container');

function resize_to_fit() {
  let fontSize = window.getComputedStyle(output).fontSize;
  output.style.fontSize = (parseFloat(fontSize) - 1) + 'px';
  
  if(output.clientHeight >= outputContainer.clientHeight){
    resize_to_fit();
  }
}

function processInput() { 
  output.innerHTML =this.value;
  output.style.fontSize = '100px'; // Default font size
  resize_to_fit();
}

input.addEventListener('input', processInput);

Now I have incorporated this into my app the following way:

...
<ion-text class="outputContainer">
  <div class="output" style="word-break: break-all; word-wrap: break-word;">{{key}}</div>
</ion-text>
...

export default {
    components: {
        IonPage,
        IonContent,
        IonNavLink,
        IonIcon,
        IonText
        
    },
    created(){
      return this.$store.getters.getStorageKey;
    },
    setup() {
      return {
          cog
      };
    },

    mounted() {
      this.resize_to_fit(".output", ".outputContainer");
    },
    computed: {
      aandoening(){
        return this.$store.getters.key;
      }
    },
    methods:{
      resize_to_fit(divOutputClassName, divOutputContainerClassName) {

        const output = document.querySelector(divOutputClassName);
        const outputContainer = document.querySelector(divOutputContainerClassName);

        let fontSize = getComputedStyle(output).fontSize;
        output.style.fontSize = (parseFloat(fontSize) - 1) + 'px';
        
        if(output.clientHeight >= outputContainer.clientHeight){
          //this.resize_to_fit(".output", ".outputContainer");
        }
      }
    }
}

You see I have commented out that last line because I got an error in the Vue console:

Uncaught (in promise) RangeError: Maximum call stack size exceeded

When I remove that line it doesn’t work, nothing gets changed, font-size doesn’t get changed.

I am pretty new to this so I’m probably doing things wrong, but I cannot seem to figure it out. If someone could help me, that would be great. Thanks.

2 posts - 1 participant

Read full topic

All of a sudden when i run: ionic corova run ios i am getting the following:

An unhandled exception occurred: Package "@ionic/angular-toolkit" has no builders defined.
See "/private/var/folders/nr/s6_w32nj0472fhz5lxtqk7800000gn/T/ng-v5vPRV/angular-errors.log" for further details.
[ERROR] An error occurred while running subprocess ng.

I don’t really do too much ionic work so i don’t know what this means. It was working a couple of days ago, and all of a sudden it’s now not.

package.json (yes i know version mismatches but it’s a messed up project and it works as is for now):

{
  "name": "org.apache.cordova.newapp",
  "displayName": "frontend",
  "version": "1.0.0",
  "description": "A sample Apache Cordova application that responds to the deviceready event.",
  "main": "index.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build-prod": "node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng build --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^10.2.5",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "^8.2.10",
    "@angular/compiler": "^8.2.10",
    "@angular/core": "^8.2.10",
    "@angular/forms": "^8.2.14",
    "@angular/http": "^7.2.16",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "^8.2.10",
    "@angular/platform-browser-dynamic": "^8.2.10",
    "@angular/router": "^8.2.10",
    "@awesome-cordova-plugins/core": "^5.37.3",
    "@awesome-cordova-plugins/diagnostic": "^5.37.3",
    "@awesome-cordova-plugins/ionic-webview": "^5.37.3",
    "@awesome-cordova-plugins/media-capture": "^5.37.3",
    "@awesome-cordova-plugins/photo-viewer": "^5.38.0",
    "@ionic-native/in-app-browser": "^5.36.0",
    "@ionic/angular": "^5.9.3",
    "@ionic/core": "^5.8.4",
    "@ng-bootstrap/ng-bootstrap": "^5.3.1",
    "angular-linky": "^1.2.2",
    "angular-password-strength-meter": "^3.0.1",
    "date-fns": "^2.25.0",
    "emoji-js": "^3.6.0",
    "flatpickr": "^4.6.9",
    "hammerjs": "^2.0.8",
    "ionicons": "^5.5.3",
    "jquery": "^3.6.0",
    "ng-socket-io": "^0.2.4",
    "ng2-file-upload": "^1.4.0",
    "ngb-modal": "^2.0.3",
    "ngx-emoji-picker": "0.0.2",
    "ngx-file-drop": "^10.1.1",
    "ngx-image-cropper": "^3.3.5",
    "ngx-infinite-scroll": "^9.1.0",
    "ngx-ui-loader": "^8.0.0",
    "rxjs": "^6.6.7",
    "rxjs-compat": "^6.6.7",
    "socket.io-client": "^2.4.0",
    "tslib": "^1.14.1",
    "ws": "^7.5.5",
    "zone.js": "~0.9.1",
    "zxcvbn3": "^0.1.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.29",
    "@angular/cli": "^8.3.29",
    "@angular/compiler-cli": "^8.2.10",
    "@angular/language-service": "^8.2.10",
    "@ionic/angular-toolkit": "latest",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "com-sarriaroman-photoviewer": "^1.2.5",
    "cordova-android": "^9.1.0",
    "cordova-ios": "^6.2.0",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-inappbrowser": "^5.0.0",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^4.0.0",
    "cordova-plugin-media-capture": "^3.0.3",
    "cordova-plugin-splashscreen": "5.0.2",
    "cordova-plugin-statusbar": "2.4.2",
    "cordova-plugin-whitelist": "^1.3.4",
    "cordova-plugin-x-socialsharing": "^6.0.3",
    "cordova-plugin-x-toast": "^2.7.3",
    "cordova.plugins.diagnostic": "^6.1.0",
    "es6-promise-plugin": "^4.2.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  },
  "keywords": [
    "ecosystem:cordova"
  ],
  "author": "Apache Cordova Team",
  "license": "Apache-2.0",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-x-socialsharing": {
        "PHOTO_LIBRARY_ADD_USAGE_DESCRIPTION": "This app requires photo library access to function properly.",
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": "This app requires photo library access to function properly."
      },
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-media-capture": {},
      "cordova.plugins.diagnostic": {},
      "cordova-plugin-x-toast": {},
      "com-sarriaroman-photoviewer": {}
    },
    "platforms": [
      "android",
      "ios"
    ]
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "defaultProject": "app",
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss",
              {
                "input": "node_modules/@ionic/angular/css/core.css"
              },
              {
                "input": "node_modules/@ionic/angular/css/normalize.css"
              },
              {
                "input": "node_modules/@ionic/angular/css/structure.css"
              },
              {
                "input": "node_modules/@ionic/angular/css/typography.css"
              },
              {
                "input": "node_modules/@ionic/angular/css/display.css"
              },
              {
                "input": "node_modules/@ionic/angular/css/padding.css"
              },
              {
                "input": "node_modules/@ionic/angular/css/float-elements.css"
              },
              {
                "input": "node_modules/@ionic/angular/css/text-alignment.css"
              },
              {
                "input": "node_modules/@ionic/angular/css/text-transformation.css"
              },
              {
                "input": "node_modules/@ionic/angular/css/flex-utils.css"
              },
              {
                "input": "src/theme/variables.css"
              }
            ],
            "scripts": [
              "src/assets/js/emoji.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "50mb",
                  "maximumError": "100mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "60mb",
                  "maximumError": "100mb"
                }
              ]
            },
            "staging": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ],
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "50mb",
                  "maximumError": "100mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "60mb",
                  "maximumError": "100mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              "./node_modules/ngx-lightbox/lightbox.css",

              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": [
              "src/assets/js/emoji.js"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "app:serve:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            },
            "staging": {
              "cordovaBuildTarget" : "app:ionic-cordova-build:staging",
              "devServerTarget": "app:serve:staging"
            }
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "staging": {
              "browserTarget": "app:build:staging"
            }
          }
        }
      }
    }
  },
  "cli": {
    "defaultCollection": "@ionic/angular-toolkit",
    "analytics": false
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}

1 post - 1 participant

Read full topic

My app is scanning qrcode. For this I am using the capacitor-community barcode-scanner plugin. With previous versions of ionic I had no problems; I had used the css to get the transparent background and to be able to see what the camera framed. Now with ionic V6 it no longer works. Anyone who can help me? Thanks so much!

Ionic CLI : 6.17.1
Ionic Framework : @ionic/angular 6.0.5
Capacitor CLI : 3.3.4
@capacitor/android : 3.4.0
@capacitor/core : 3.4.0
Angular CLI 12

1 post - 1 participant

Read full topic

I have a list of items and there have multiple shows more, I want to hide when one show more is open, once the user clicked on the second one previous one should be closed please can you help me with that it will be very helpful for me

1 post - 1 participant

Read full topic

Running mobile app using npx cap run andriod has CORS error though http://localhost is already added as CORS on Backend.
If I run website using dist folder using serve -l 80 -s dist, it doesn’t have CORS error.

1 post - 1 participant

Read full topic

Hi!
i’m using ionic react to build my application and i have this registration page with very thin lines (1px), no problem running my app on android/chrome but as soon as i try it with safari i get strange behaviours, the thin lines keep disappearing and overall do not work as intended, is this a know bug? or am i doing something wrong?
Thanks

1 post - 1 participant

Read full topic

I always get confused with the npm packages and dependencies.

I am trying to install the latest version of @angular-devkit/build-angular , it gives me this error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: org.apache.cordova.newapp@1.0.0
npm ERR! Found: @angular/compiler@13.2.2
npm ERR! node_modules/@angular/compiler
npm ERR! dev @angular/compiler@"^13.2.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@“8.2.14” from @angular/compiler-cli@8.2.14
npm ERR! node_modules/@angular/compiler-cli
npm ERR! dev @angular/compiler-cli@"^8.2.14" 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/glenelkins/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/glenelkins/.npm/_logs/2022-02-09T18_01_06_348Z-debug-0.log

I clearly don’t understand what this is saying, the first error mentions compiler@13.2.2 yet my package.json says: “@angular/compiler”: “^13.2.2”

So why is it complaining about this if i have it installed? Same with compiler-cli, i have version 8.2.14??

Could someone break down what this is telling me? I’m a php developer for the most part, i use composer, but npm just confuses me. All i want is the latest @angular-devkit/build-angular to install

Here is the package.json:

{
  "name": "org.apache.cordova.newapp",
  "displayName": "frontend",
  "version": "1.0.0",
  "description": "A sample Apache Cordova application that responds to the deviceready event.",
  "main": "index.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build-prod": "node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng build --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^10.2.5",
    "@angular/common": "^8.2.10",
    "@angular/core": "^8.2.10",
    "@angular/forms": "^8.2.14",
    "@angular/http": "^7.2.16",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "^8.2.10",
    "@angular/platform-browser-dynamic": "^8.2.10",
    "@angular/router": "^8.2.10",
    "@awesome-cordova-plugins/core": "^5.37.3",
    "@awesome-cordova-plugins/diagnostic": "^5.37.3",
    "@awesome-cordova-plugins/ionic-webview": "^5.37.3",
    "@awesome-cordova-plugins/media-capture": "^5.37.3",
    "@awesome-cordova-plugins/photo-viewer": "^5.38.0",
    "@ionic-native/in-app-browser": "^5.36.0",
    "@ionic/angular": "^5.9.3",
    "@ionic/core": "^5.8.4",
    "@ng-bootstrap/ng-bootstrap": "^5.3.1",
    "angular-linky": "^1.2.2",
    "angular-password-strength-meter": "^3.0.1",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "date-fns": "^2.25.0",
    "emoji-js": "^3.6.0",
    "flatpickr": "^4.6.9",
    "hammerjs": "^2.0.8",
    "ionicons": "^5.5.3",
    "jquery": "^3.6.0",
    "ng-socket-io": "^0.2.4",
    "ng2-file-upload": "^1.4.0",
    "ngb-modal": "^2.0.3",
    "ngx-emoji-picker": "0.0.2",
    "ngx-file-drop": "^10.1.1",
    "ngx-image-cropper": "^3.3.5",
    "ngx-infinite-scroll": "^9.1.0",
    "ngx-ui-loader": "^8.0.0",
    "rxjs": "^6.6.7",
    "rxjs-compat": "^6.6.7",
    "socket.io-client": "^2.4.0",
    "tslib": "^1.14.1",
    "ws": "^7.5.5",
    "zone.js": "~0.9.1",
    "zxcvbn3": "^0.1.1"
  },
  "devDependencies": {
    "@angular/cli": "^8.3.29",
    "@angular/compiler": "^13.2.2",
    "@angular/compiler-cli": "^8.2.14",
    "@angular/language-service": "^8.2.10",
    "@ionic/angular-toolkit": "latest",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "com-sarriaroman-photoviewer": "^1.2.5",
    "cordova-android": "^9.1.0",
    "cordova-ios": "^6.2.0",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-inappbrowser": "^5.0.0",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-splashscreen": "5.0.2",
    "cordova-plugin-statusbar": "2.4.2",
    "cordova-plugin-whitelist": "^1.3.4",
    "cordova-plugin-x-toast": "^2.7.3",
    "cordova.plugins.diagnostic": "^6.1.0",
    "es6-promise-plugin": "^4.2.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  },
  "keywords": [
    "ecosystem:cordova"
  ],
  "author": "Apache Cordova Team",
  "license": "Apache-2.0",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-x-socialsharing": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-media-capture": {},
      "cordova.plugins.diagnostic": {},
      "cordova-plugin-x-toast": {},
      "com-sarriaroman-photoviewer": {}
    },
    "platforms": [
      "android",
      "ios"
    ]
  }
}

1 post - 1 participant

Read full topic

I need to add transition to background-color of ion-button.
My css:
ion-button{
–transition: all 2s ease-in-out; → only have transition on text color
}

Transition on background color only works when I directly added transition: all 2s ease-in-out; to .button-native::after in dev tool.

I try to copy the CSS from dev tool to my css file but it doesnt work.
I did try:
ion-button::part(native)::after {
transition: all 5s ease-in-out !important;
}

But still, it doesnt work.
What should I do to have transition on background color of button

1 post - 1 participant

Read full topic

I would like to fix some issues and automate some stuff when I create a modal in Ionic V4. The solution I’ve found is to create a service to create my modals for me.

@Injectable({
    providedIn: 'root'
})
export class ModalSingleton {

   public lock = false;
   public modal: HTMLIonModalElement;

   constructor(
       public toastHelper: ToastHelper,
       public modalController: ModalController,
   ) {
   }

    /**
     * This helper adds a Double click Guard to the modal and implement the progress bar when opening
     * @param $config The modal
     */
   async presentModal( $config: ModalOptions ) {
       if ( this.lock ) {
           console.log('Double click detected');
           return;
       } // Double click guard
       this.lock = true;

       this.toastHelper.presentProgressBar();
       this.modal = await this.modalController.create( $config );

       await new Promise(r => setTimeout(r, 2));
       await this.modal.present();
       this.modal.onDidDismiss().then( onDismiss => {
            this.dismissModal();
       });
       this.toastHelper.dismissProgressBar();
   }


   async dismissModal() {
       this.modal = null;
       this.lock  = false;
   }

Then in my component, I call it.

this.modalSingleton.presentModal( {
component: PaymentMethodModal,
});

It works but I MUST add “PaymentMethodModal” and EVERY other modal.module in app.module.ts, therefore, losing the lazy loading feature.

How can my service resolve and use modals dynamically?

Thank you for your time

1 post - 1 participant

Read full topic

Hi All,

I am not that great with Stackblitz but is anyone please able to provide a Stackblitz of the latest ionic 6 with Angular 13? It makes it easier when trying discuss bugs, how tos. Big thanks in advance.

K

1 post - 1 participant

Read full topic

I am writing a Capacitor plugin for an Ionic Vue application. My question is pretty simple. I am getting an error when running “ionic build” in my Ionic app when it is trying to register the callback to subscribe to plugin events: “TS2339: Property ‘addListener’ does not exist on type ‘MyPlugin’.”

I have the following bit of code in my Ionic Vue project:

import { MyPlugin } from "@valmarc/myplugin"
.....
MyPlugin.addListener("myPluginEvent", myCallback)

The TypeScript compiler error occurs on the “addListener” call above. The above code was written against following capacitor documentation: Capacitor - build cross platform apps with the web.

The error is not particularly surprising, because the datatype of “MyPlugin” is defined as follows in the auto-generated TypeScript file “index.ts”:

import { registerPlugin } from '@capacitor/core';
import type { MyPluginPlugin } from './definitions';
const MyPlugin= registerPlugin<MyPluginPlugin>('MyPlugin', {
    web: () => import('./web').then(m => new m.MyPluginWeb()),
});
export * from './definitions';
export { MyPlugin };

The above auto-generated code seems to assign an object of type “MyPluginPlugin” to the MyPlugin variable, which is exported. The type “MyPluginPlugin” is defined as follows in the “definitions.ts” file:

export interface MyPlugin {
      createState(options: { source: string}): Promise<{ id: number}>;
      callFunction(options: { id: number, function: string}): Promise<{ result: string}>;
      closeState(options: { id: number}): Promise<void>;
}

My plugin interface above does not define the “addListener” method that is referred to in the Capacitor documentation I referred to above.

So obviously I am missing something here. Where is the “addListener” method supposed to be declared on the object that is returned from registerPlugin? Unless the addListener method is declared somewhere, there is going to be a TypeScript error.

2 posts - 1 participant

Read full topic

how to fix on some android device that unable to open native camera ?

this is my ionic info and im using @ionic-native/camera@5.36.0.

im using standard code to access native camera , but some android device like OPPO A93 and OnePlus , cannot open native camera.

i already tested on Iphone, and some android device such as redmi , vivo and it work like a charm

Ionic:

   Ionic CLI                     : 6.17.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.4
   @angular-devkit/build-angular : 0.1101.4
   @angular-devkit/schematics    : 11.1.4
   @angular/cli                  : 11.1.4
   @ionic/angular-toolkit        : 3.1.0

Capacitor:

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

Utility:

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

System:

   NodeJS : v14.18.1 (/usr/local/bin/node)
   npm    : 6.14.15
   OS     : macOS Monterey

AccessCamera(){    
    const options: CameraOptions = {
      quality: 50,
      correctOrientation: true,
      // allowEdit: true,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }
    this.camera.getPicture(options).then((ImageData => {
      this.pic.base64img = "data:image/jpeg;base64," + ImageData;
    }), error => {
      console.log(error);
    })
  }

1 post - 1 participant

Read full topic

Hi everyone!

I am a young developer looking to create an application using ionic.

trying to start the emulator via capacitor, however, I get the following error:

capacitor.cmd run android --target Pixel_3_API_30
[capacitor] √ Copying web assets from www to android\app\src\main\assets\public in 2.47s
[capacitor] √ Creating capacitor.config.json in android\app\src\main\assets in 2.44ms
[capacitor] √ copy android in 2.55s
[capacitor] √ Updating Android plugins in 10.30ms
[capacitor] [info] Found 4 Capacitor plugins for android:
[capacitor] @capacitor/app@1.1.0
[capacitor] @capacitor/haptics@1.1.4
[capacitor] @capacitor/keyboard@1.2.1
[capacitor] @capacitor/status-bar@1.0.7
[capacitor] √ update android in 109.37ms
[capacitor] × Running Gradle build - failed!
[capacitor] [error] 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 JCenter service update  |  Android Developers for more information.
[capacitor] Currently detected usages in: root project ‘android’, project ‘:app’, project ‘:capacitor-android’, …
[capacitor]
[capacitor] FAILURE: Build failed with an exception.
[capacitor]
[capacitor] * What went wrong:
[capacitor] Could not determine the dependencies of task ‘:app:compileDebugJavaWithJavac’.
[capacitor] > SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project’s local properties file at ‘C:\Users\Stefano\Desktop\Prova-emulatore\emulatore\android\local.properties’.
[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]
[capacitor] * Get more help at https://help.gradle.org
[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] See Command-Line Interface
[capacitor] BUILD FAILED
[capacitor] in 3s
[capacitor]
[ERROR] An error occurred while running subprocess capacitor.

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

    Re-running this command with the --verbose flag may provide more information.

I just created a new tabs project and launched the “ionic capacitor run android” command.

what’s the solution?
my ionic version is 6.18.0.

Thanks for your help

1 post - 1 participant

Read full topic

Hi,
I have developed an Ionic 5 App but I´m having problem with dark theme.
I have in my variable.scss file the following code:
@media (prefers-color-scheme: dark) {
.
.
.
.
}
In IoS device it works nicely, and when I switch between light/dark theme its automatically applied when I go back to the app.

In android, when I switch from light theme to dark theme I have to restart the app to changes being applied, and it works fine. But when I switch from dark to light then the app continue showing the dark theme styles even if I restart the app.

The only way I have found to go back to light theme is clearing the data of the app and starting it again with system prefference with dark mode disabled.

Thanks in advance

1 post - 1 participant

Read full topic

ionic version - 6.18.1
cordova --version: 11.0.0
Angular CLI: 13.1.4
Android: 12 (SDK: 31)

executeSql API always returns a rejected promise even for successful execution of queries. For instance, the following table creation returns an error but the table is created successfully - I’ve verified this by downloading the .db file and opening it with DB Browser for SQLite.

query = `CREATE TABLE IF NOT EXISTS test_table 
                 id INTEGER PRIMARY KEY NOT NULL,
                 col1 INTEGER NULL DEFAULT NULL,
                 col2 CHAR(20) NULL DEFAULT NULL,
                 col3 CHAR(20) NULL DEFAULT NULL,`
        this.dbEngine
            .executeSql(query)
            .then(() => {
                console.log('Table created');
            })
            .catch((e) => {
                console.log(`Table creation error: ${JSON.stringify(e)}`);
            });

Android Logcat has the following output:

Msg: Table creation error: {"rows":{"length":0},"rowsAffected":0}

I have also verified successful insertions into the table but the promise is always returned as rejected. Any query executed with executeSql returns as rejected. But the same query executed with sqlBatch returns a resolved promise.

1 post - 1 participant

Read full topic

Hello,

I encounter an issue with the ion-refresher component when there is a fixed element in the page.
For example, I use fixed tabs but since I added the refresher, the tabs doesn’t keep the top position.

This is related to the inner-scroll of the ion-content and the translateZ value (added by the refresher).

Could someone help me to find a fix or a workaround?

Thanks

2 posts - 1 participant

Read full topic