Quantcast
Channel: Ionic Forum - Latest topics
Viewing all 70617 articles
Browse latest View live

Emulate with cordova and live reload won't work, but a normal build will

$
0
0

I posted about this yesterday, and i’m confused with what the problem is. To begin with if i run:

ionic cordova build ios -c staging

This will build the app with my environment.staging.ts file, which is fine, i have the build command defined in angular.json.

now, if i try this:

ionic cordova emulate ios -c staging

It also works fine! However, now if i try this:

ionic cordova emulate ios -c staging --livereload

I get the following error:

ng run app:ionic-cordova-serve:staging --host=localhost --port=8100 --platform=ios
[ng] An unhandled exception occurred: Configuration ‘staging’ is not set in the workspace.
[ng] See “/private/var/folders/nr/s6_w32nj0472fhz5lxtqk7800000gn/T/ng-bd6bt5/angular-errors.log” for further details.

If i now try it like this, i get a different error:

ionic cordova emulate ios -c staging --livereload --host=http://192.168.1.179:8100 --external

I get this error:

[ng] Schema validation failed with the following errors:
[ng] Data path “” should NOT have additional properties(allowedCommonJsDependencies).

I just want to be able to emulate with live reload, and also run on a real device with live reload.

Here is my package.json and 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/ngx-lightbox/lightbox.css",
              "./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"
    }
  }
}
{
  "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/toast": "^5.37.3",
    "@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-lightbox": "^2.5.1",
    "ngx-toastr": "^11.3.3",
    "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",
    "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-ionic-webview": "^4.0.0",
    "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": {}
    },
    "platforms": [
      "android",
      "ios"
    ]
  }
}

1 post - 1 participant

Read full topic


Compressing gif before upload

$
0
0

Hi,

I have an app that should upload a gif image to a small embedded device which accepts only small media files (< 10kb). I’m building an app which the user can select the gif but then the app would need to compress that image. I didn’t want to call a backend on my end to do this I was expecting I could do this at the device which is running an Ionic app with Angular.

Does anyone have any experience optimizing GIFs? I know we have libraries that optimize images but I tried using on gifs and they end up converting it to JPEG.

Thanks,

1 post - 1 participant

Read full topic

Ionic cordova android platform won't add

$
0
0

I am having a nightmare as always with npm packages and ionic / cordova. I run:

ionic cordova platform add android

And i get this error:

Cannot overwrite directory
‘/Volumes/Work/Projects/green-water-services/platforms/android/app/src/main’
with non-directory
‘/Volumes/Work/Projects/green-water-services/plugins/cordova-plugin-firebase/src/android/google-services.json’.

I have no idea what it’s doing! Here is my package:

{
  "name": "green-water-services",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^11.2.14",
    "@angular/core": "^11.2.14",
    "@angular/fire": "^6.1.5",
    "@angular/forms": "^11.2.14",
    "@angular/platform-browser": "^11.2.14",
    "@angular/platform-browser-dynamic": "^11.2.14",
    "@angular/router": "^11.2.14",
    "@ionic-native/ble": "^5.6.11",
    "@ionic-native/bluetooth-serial": "^5.6.11",
    "@ionic-native/camera": "^5.6.11",
    "@ionic-native/core": "^5.6.11",
    "@ionic-native/firebase": "^5.6.11",
    "@ionic/angular": "^5.6.11",
    "@ionic/app-scripts": "^3.2.4",
    "cordova-plugin-bluetooth-serial": "^0.4.7",
    "firebase": "^8.6.8",
    "ionic": "^5.4.16",
    "ionicons": "^5.5.2",
    "npm": "^8.3.0",
    "rxjs": "~6.6.0",
    "rxjs-compat": "^6.6.7",
    "signature_pad": "^4.0.1",
    "tslib": "^2.3.0",
    "typescript": "4.1.6",
    "zone.js": "^0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.1.0",
    "@angular-eslint/builder": "2.0.2",
    "@angular-eslint/eslint-plugin": "2.0.2",
    "@angular-eslint/eslint-plugin-template": "2.0.2",
    "@angular-eslint/template-parser": "2.0.2",
    "@angular/cli": "11.2.14",
    "@angular/compiler": "^11.2.14",
    "@angular/compiler-cli": "^11.2.14",
    "@angular/language-service": "^11.2.14",
    "@ionic/angular-toolkit": "^3.1.1",
    "@types/jasmine": "^3.7.7",
    "@types/jasminewd2": "^2.0.9",
    "@types/node": "^12.20.15",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "cordova-android": "^10.1.1",
    "cordova-plugin-ble-central": "^1.3.1",
    "cordova-plugin-camera": "^5.0.2",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-firebase": "^2.0.5",
    "cordova-plugin-firebase-lib": "^5.1.1",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-splashscreen": "^5.0.4",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.5",
    "eslint": "^7.29.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "firebase-tools": "^9.14.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.6.0",
    "postcss": "^8.4.5",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-bluetooth-serial": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-ble-central": {
        "ACCESS_BACKGROUND_LOCATION": "false"
      },
      "cordova-plugin-firebase": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      }
    },
    "platforms": []
  }
}

Output of ng version is:

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.14
@angular-devkit/build-angular   12.2.14
@angular-devkit/core            12.2.14
@angular-devkit/schematics      11.2.14
@angular/fire                   6.1.5
@schematics/angular             11.2.14
@schematics/update              0.1102.14
rxjs                            6.6.7
typescript                      4.1.6

It works fine when serving or running to a device, but as soon as i try to build it errors happen all over. Does anyone have any idea what is going on?

4 posts - 2 participants

Read full topic

Using a specific version of webview

$
0
0

Hi all,

I have a web application that is run through a capacitor webview .
Everything works fine.
By default system webview is used.
Except that each time the webview version is changed on the smartphone, there can be regressions.
I want to know if it is possible to use a specific version of webview with capacitor ?

Cap.

1 post - 1 participant

Read full topic

Disable scrolling on input focus

$
0
0

I am trying to stop the UI from scrolling up when focusing on an input. There is enough room for keyboard without scrolling. Any advice to stop this behavior? Can it be done on a screen by screen use case?

Before:

Not good:

Good:

1 post - 1 participant

Read full topic

Problem with time in datatime

$
0
0

Welcome, When I select time in popover then this time its not change in datime, but when i select Done time is true in property - ngModel.

Select time
1

When popover is close
image

When i click Done:

image

In my opinion time must be change in Datetime when i select time in popover.

1 post - 1 participant

Read full topic

Disable /public folder generation inside Android app

$
0
0

Hello guys.
I have a project that I want to serve remotely from a server, in an Android app. So what I’m doing right now is generating a build, uploading the contents of /www/ to my server, and then I added the URL to capacitor.config.ts:

const baseConfig: CapacitorConfig = {
	...
	server: {
		url: "https://mysite.com"
	}
}

This works perfectly, but now my problem is that everytime I compile the project, the source code is still being generated in android/app/src/main/assets/public. How can I disable this?

Thanks a lot.

1 post - 1 participant

Read full topic

Redirecting to a specific page based on the incoming push notification message -FCM

$
0
0

Hi. I am sending a notification to the phone with FCM. According to a code in this notification, I want to redirect to that page when opening the application. How can I do it? The code below opens the home page of the application directly.

in app.components.ts:

    this.fcm.onNotification().subscribe(data => {
      var noti_data = data['body'].split(" ");
      var noti_type = noti_data[noti_data.length-1];

        if (data.wasTapped) {
          if(noti_type == "XX001")
          {
            alert("111");
            this.route.navigate(['/address']);
          }
          else if (noti_type == 'XX002')
          {
            alert("222");
            this.route.navigate(['/home/address2']);
          }
          else if (noti_type == 'XX003')
          {
            alert("333");
            this.route.navigate(['/home/address3']);
          }
          console.log('Received in background');
        } else {
          console.log('Received in foreground');
        }
    });      

It works when I put the same code block in foreground.

1 post - 1 participant

Read full topic


How to use Native Storage to Add to Cart functionnality?

$
0
0

I need to Store Cart Items to Native Storage and restore them into Cart Component

So , I use Native Storage offer by Ionic , i need to send item ( image , model-name ) into storage but in array of object not ( object ) and get them with getter function in array and display the array in the Cart Component
the problem is : how to define the value of key as array and set the array … and in second time to restore this array in get function
my code Setter :

public storeItem(): void {

this.nativeStorage.setItem('cart-items', 

{

  Model: this.Model,

  Image: this.Image

})

.then(

  () => console.log('Item successfuly saved!'+this.Model+this.Image),

  error => console.error('Error storing item', error)

);

type or paste code here

and Getter function :

 public getCartItems(): void {

    this.nativeStorage.getItem('cart-items')
    .then(
      data => {
        console.log("CART COMPONENT BEGIN...");
        console.log(JSON.stringify(data));

             this.StoredItems.push(JSON.stringify(data));
             alert(JSON.stringify(data));
             console.log("STOREDITEM"+this.StoredItems);

      },
      error => console.error(error)
    );
  }

1 post - 1 participant

Read full topic

Capacitor Push Notification: navigate to route when the app is not in background

$
0
0

Hello!

Ionic 6 + capacitor 3 app.

The push notifications are working well in my app, tough I have one “problem”:
in my code I have this section:

    PushNotifications.addListener(
      'pushNotificationActionPerformed',
      async (notification: ActionPerformed) => {
        const data = notification.notification.data;
        if (data.internalRoute) {
          this.routingService.navigateByUrl('/' + data.internalRoute);
        }
      }
    );

If the app is running, everything works as expected otherwise, the first time I get a push notification it just open the App and only after this (doesn’t matter if the app is now running in background or foreground) if I send a new push notification, it navigates to the chosen route. (basically, it goes to the route only if the app is “loaded”)

I think it doesn’t work because that fragment of code is being executed while the app is not completely “running”, so it does nothing.

There is any way to translate my code in something like

**Wait for the app to be completely "awake" and only then execute this:**
 
this.routingService.navigateByUrl('/' + data.internalRoute);
 

thank you!

1 post - 1 participant

Read full topic

How to extend web component from html element to make attributes works

$
0
0

Hello, I’m new to web component and stancil, so please help

Can I extend a web component that build by stencil from HTML element?
for example I want to build a custom button, when I call this button from the JSX how can I make sure all normal attributes like, {type, disabled, etc} will work, or I must re-create everything and pass it as prop?

1 post - 1 participant

Read full topic

Icon Above Text

$
0
0

Hey, im having some issues with ionic icons…
Im making a simple HTML page and i needed a custom icon for a button
this is my code:

<a class="btn btn-outline-primary btn-block" type="button" id="button2" onclick=redirectToURL(this.id)><ion-icon src="https://raw.githubusercontent.com/tabler/tabler-icons/master/icons/lock.svg"></ion-icon>Login</a>

expected:
image
result:
image

I dont really know whats going on…

1 post - 1 participant

Read full topic

Curious, is there a practical reason Ionic UI components start with Ion?

$
0
0

Curious, is there a practical reason for starting Ionic UI components with Ion? Is is just a naming convention, one that is only meant to go along with the Ion(ic) brand or is there something more to it than that?

1 post - 1 participant

Read full topic

Parallax libs suggestions

$
0
0

Hey guys,
I’m thinking about implementing a parallax effect in the welcome screen of my app. Do you have any suggestions of libraries you’ve used and work ok with ionic/angular?

1 post - 1 participant

Read full topic

Inline GIF/STICKER Keyboard Support

$
0
0

We need a way to get permission from the native iOS/android system to allow us to use the GIFS from the keyboard directly. There is no need anymore in 2022 to have external functionality when its already supported by the system. Countless apps have this implemented, the ones I know are built with React Native. I saw that React Native has added this functionality natively. Cordova keyboard plugin by Ionic is really the only solution we have for keyboard control at the system level and it cannot get it done.

Many users want this feature, I have seen it asked as a feature request since 2018 but no one has ever really given a good response.

This feature is pretty important for anyone making a messaging app.

Our app gets the error ____ doesn’t support image insertion here for gboard

For Samsung keyboard its “cant enter this content here”

There are pretty much zero work arounds that I know of for people using cordova/ionic

Much help would be appreciated!

1 post - 1 participant

Read full topic


With Ionic WebServer Android iOS App

$
0
0

OpenSpeedTest-Server is here to help you to improve your internet experience.

Test Your WiFi (Wireless) or Ethernet Connection (Wired Connection) and Fix your local network before pointing fingers towards your ISP for a slow and sluggish internet experience.

Are you experiencing slow internet? Endless buffering? Probably due to congested wifi channel. You may need to change your WiFi router location or adjust your router settings.

An application for launching HTML5 Network Speed Test Server. You can Conduct download/upload speed tests from any device within your network with a web browser that is IE10 or new.

Introducing Network Speed Test Server for Android, iOS, Windows, Mac & Linux!. For Headless/large-scale deployments, Docker image and Source Code are available.

How to use OpenSpeedTest Network Speed Test Server?

You need two device in between your WiFi router. Run OpenSpeedTest Server App on one device and connect directly to your router, if it’s a wireless device, put it within 1.5 meter.

Navigate to the URL shown from OpenSpeedTest Server App from the second device.

Please Share Your Feedbacks.


Android Phone

iPhone

Download on the Mac App Store

1 post - 1 participant

Read full topic

Create app with ionic and vue.js

$
0
0

I’m trying to create an ionic vue.js application. but, I’m already get stucked on the installation
here is what I have. how can i fix it please ?

? Starter template: tabs
√ Preparing directory .\app-vue-ionic in 1.42ms
√ Downloading and extracting tabs starter in 1.09s

ionic integrations enable capacitor --quiet – app-vue-ionic io.ionic.starter
npm.cmd i --save -E @capacitor/core@latest
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: cache-loader@4.1.0
npm WARN Found: webpack@5.67.0
npm WARN node_modules/webpack
npm WARN webpack@"^5.54.0" from @vue/cli-plugin-babel@5.0.0-rc.2
npm WARN node_modules/@vue/cli-plugin-babel
npm WARN dev @vue/cli-plugin-babel@"~5.0.0-rc.1" from the root project
npm WARN 20 more (@vue/cli-service, @vue/cli-plugin-eslint, …)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@"^4.0.0" from cache-loader@4.1.0
npm WARN node_modules/cache-loader
npm WARN cache-loader@"^4.1.0" from @vue/cli-service@5.0.0-rc.2
npm WARN node_modules/@vue/cli-service
npm WARN 1 more (@vue/cli-plugin-typescript)
npm WARN
npm WARN Conflicting peer dependency: webpack@4.46.0
npm WARN node_modules/webpack
npm WARN peer webpack@"^4.0.0" from cache-loader@4.1.0
npm WARN node_modules/cache-loader
npm WARN cache-loader@"^4.1.0" from @vue/cli-service@5.0.0-rc.2
npm WARN node_modules/@vue/cli-service
npm WARN 1 more (@vue/cli-plugin-typescript)
npm WARN deprecated @types/webpack-dev-server@4.7.2: This is a stub types definition. webpack-dev-server provides its own type definitions, so you do not need this installed.
npm WARN deprecated source-map-url@0.4.1: See GitHub - lydell/source-map-url: [DEPRECATED] Tools for working with sourceMappingURL comments.
npm WARN deprecated urix@0.1.0: Please see GitHub - lydell/urix: [DEPRECATED] Makes Windows-style paths more unix and URI friendly.
npm WARN deprecated source-map-resolve@0.5.3: See GitHub - lydell/source-map-resolve: [DEPRECATED] Resolve the source map and/or sources for a generated file.
npm WARN deprecated resolve-url@0.2.1: GitHub - lydell/resolve-url: [DEPRECATED] Like Node.js’ `path.resolve`/`url.resolve` for the browser.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

1 post - 1 participant

Read full topic

How to Disable User Font Size and Zoom preference on IONIC3+ / 6? (Override Mobile Accessibility)

$
0
0

I saw phonegap-mobile-accessibility but it gives me error and app is not starting.
is there is any way to disable user selected font size and zoom preference?


This is how it should look.


This is one user send me.
looks like he set custom font size or zoom in system level

I reproduced this on my phone just by increasing font size.

UI is responsive it should scale without any issues.

I don’t know how to approach this problem

I try

package io.ionic.starter;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    WebView mWebView = (WebView) findViewById(R.id.webview);
    WebSettings webSettings = mWebView.getSettings();

    webSettings.setTextZoom(100);
  }
}

Throws an error ““R”” not found.

1 post - 1 participant

Read full topic

Cannot remove white space above view in a clone of UIImagePickerControler

$
0
0

I’m trying to remove a white space that shows above my image picker view. I’m using this clone of UIImagePickerController. You can see in this picture:

media-gap

It’s the white space between the gray bar at the top of the screenshot and the images. From this thread and this one, it seems the problem is the image picker leaving space for the status bar. But none of those solutions have worked for me. My app is built with cordova so I’ve also tried hiding the status bar using this plugin but it didn’t work. The size of the space simply increased because the statusbar was no longer present. The plugin relies on setStatusBarHidden:YES on the main UIApplication of the app, so it’s similar to one of the suggestions in those other threads.

What else can I try to fix this?

1 post - 1 participant

Read full topic

Getting started with SQLlite

$
0
0

Hi everyone,
I am new to Ionic and I admit I don’t have a lot of experience either with React.

I wanted to do a first sample application with a small db.
Nothing complex but I am going mad for 3 days and can’t find much resources.

Is there any example I can see on how to use SQLite with ionic?
I have followed a tutorial on youtube, which is already outdated though and I am still stuck.

Even just connecting to the database and how to insert/delete one line from an input.

I am getting a bit frustrated as I can’t find much help or info googling as usual, sigh.

:smiley: Thanks for any help

1 post - 1 participant

Read full topic

Viewing all 70617 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>