Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all 49305 articles
Browse latest View live

Ionic and Angular RouteReuseStrategy

$
0
0

@benzata wrote:

Hi all,
I am wondering if I should use the RouteReuseStrategy from Angular.
I have a few pages, which are loading data from an API and I am wondering if this would speed up the page loading (when returning to a page).
Is there anything already integrated from Ionic? Because I noticed that in my app.module.ts there is already an import { RouteReuseStrategy } from '@angular/router' and { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
Any help will be much appreciated!
Best regards!

Posts: 1

Participants: 1

Read full topic


Ionic cordova run android issues

$
0
0

@sampath151 wrote:

I was facing issue to run in device used “ionic cordova run android” but facing the bellow issue:

BUILD SUCCESSFUL in 3s
42 actionable tasks: 42 up-to-date
Built the following apk(s):
C:\Users\UMS090\VDR\platforms\android\app\build\outputs\apk\debug\app-debug.apk

native-run.cmd android --app platforms\android\app\build\outputs\apk\debug\app-debug.apk --device
[native-run] ERR_AVD_HOME_NOT_FOUND: No valid Android AVD home found.
[native-run]
[native-run] More details for this error may be available online:
[native-run]
[native-run] https://github.com/ionic-team/native-run/wiki/Android-Errors
[ERROR] An error occurred while running subprocess native-run.

    native-run.cmd android --app platforms\android\app\build\outputs\apk\debug\app-d... exited with exit code 1.

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

C:\Users\UMS09

Posts: 1

Participants: 1

Read full topic

Problem with InAppBrowser

Check phone call status in ionic v3

Error: xcodebuild: Command failed with exit code 65

$
0
0

@borjalo wrote:

I’m getting this error when running ionic cordova build ios --release --buildFlag='-UseModernBuildSystem=0':

The following build commands failed:
        CompileC /Users/xxxxxxxx/Library/Developer/Xcode/DerivedData/xxxxxx-ftrhrospgqgqlaevfiwsgnfxhzen/Build/Intermediates.noindex/xxxxxx.build/Release-iphonesimulator/xxxxxxxx.build/Objects-normal/x86_64/UniversalAnalyticsPlugin.o /Users/xxxxxxx/WebstormProjects/xxxxxx/platforms/ios/xxxxxxxx/Plugins/cordova-plugin-google-analytics/UniversalAnalyticsPlugin.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)
(node:4663) UnhandledPromiseRejectionWarning: Error: xcodebuild: Command failed with exit code 65
    at ChildProcess.whenDone (/Users/borjaalonsomelero/WebstormProjects/journify-hybrid-app/platforms/ios/cordova/node_modules/cordova-common/src/superspawn.js:135:23)
    at ChildProcess.emit (events.js:310:20)
    at maybeClose (internal/child_process.js:1021:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)

Any help?

Posts: 1

Participants: 1

Read full topic

Google API http request unknow error

$
0
0

@samuelv wrote:

Hi !

Since yesterday i deal with an error that i can’t fix, so now i’m asking for your help.
I’m trying to call a request to the Google Api to get Json data but i get this error:

ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https://maps.googleapis.com/maps/api/place/nearbys…ruise&key=My-Key", ok: false, …}

But actually the google api url is working in my browser, and i tried the same code with an other Json url which is not from google and it worked.

So I don’t have any idea of where is the error.

Here is the concerned part of the code:

import { HttpClient } from  '@angular/common/http'; 

constructor(private http: HttpClient){}

getPlaceInfo(placeId: string){
      return this.http.get("https://maps.googleapis.com/maps/api/place/details/json?place_id='+placeId+'&fields=name,rating,formatted_phone_number&key=My_Key")
  }

this.getPlaceInfo(this.placeId).subscribe(data => {
      console.log(data);
    })

Do someone know how to fix this issue ?
Thank’s in advance

Posts: 1

Participants: 1

Read full topic

@angular/fire

Newly generated page not working

$
0
0

@Davidr17 wrote:

I am starting to use ionic for the first time and I have used the ionic generate page command to create a new page in my test app. When doing so, the new page has been added to my template menu, however when I want to modify the new page in its corresponding html, the changes are not shown when compiling. What do I need to configure so that the page is linked correctly? I have been looking for information but where I have looked is outdated, thanks in advance.

Posts: 1

Participants: 1

Read full topic


Apk update issue

$
0
0

@john8174 wrote:

hi guys, i have same project configured in two systems, one in lap and another in desktop.with same configurations.the project version and package name are same . when i take production build in laptop and install on the phone it works as usual. if i take the build from desktop(pc) for the same project, production build and installing on the phone. it asks “do yo want to install an update to the existing application ?” if i click install, it says “App Not Installed” . any ideas?? . how to fix this. i don’t want to lose the existing apk. i need an update. it is just production build. i don’t want to lose the old data. any ideas.

Posts: 1

Participants: 1

Read full topic

How to span a Unicode character in a page?

$
0
0

@leonardofmed wrote:

I’m trying to span a simple hexagon () in my page, this way:
<span>&#x2b22;</span>

but I’m receiving a rectangle with a cross in the middle, like an error icon. I tried with the decimal code (&#11042;), but I’m receiving the same error. If I try other Unicode character (), like:
<span>&#8377;</span>

it loads normally. What can be causing this symbol to be missing?

Posts: 1

Participants: 1

Read full topic

How to add a component to a modal in ionic angular

$
0
0

@akshh wrote:

In the modal which is displaying i wanted to add a part in that modal.So i created a seperate component and want to call that component in the modal.html.So how can i achieve it .Can anyone please help me.

Posts: 1

Participants: 1

Read full topic

Plugin to search for images with certain text

$
0
0

@Rashadab wrote:

I am wondering if anyone can recommend some plugin that searches for texts in images.
I am trying the OCR, but honestly I see poor examples about it out there.
I would like to pass the URL of images in my firebase storage, and read texts from them.

Thanks in advance

Posts: 1

Participants: 1

Read full topic

Ionic 5 & Local Notification

$
0
0

@talhax wrote:

I am using Local Notification plugin …it is playing default sound not my custom sound how can I fix this ?
Where we have to place sound file in which folder?

Thanks

Posts: 1

Participants: 1

Read full topic

Slow list switching + ripple effect lag

$
0
0

@Mazus wrote:

Hello everyone,

I’ve been struggling for a (very long) while on performance issues on my app, that concern list switching with segment buttons.

I’m using virtual scroll to improve perfs, because a ngFor loop was insanely slow with only 200 elements.

In my template:

  <ng-container *ngIf="currentList$ | async as currentList" class="full-height">

  <card-game-list
    [gameList]="currentList"
    [isWishList]="currentList.settings.url === 'wishlist'"
  ></card-game-list>
  </ng-container>

</ion-content>
<ion-footer >
  <ion-toolbar>
  <!-- LIST BUTTONS-->
  <ion-segment  *ngIf="boardGames.gameLists$ | async as lists" (ionChange)="selectList($event)">
    <ion-segment-button class="menuSegmentButton menuSegment{{list.settings.name}}"
                        *ngFor="let list of lists; let i = index"
                      [value]="list.settings.name"
                        [class.segment-button-checked]="(currentList$ | async)?.settings.name === list.settings.name"
    >
      <ion-icon [name]="list.settings.iconUrl" class="ion-no-margin"></ion-icon>
      <ion-label class="small-margin-bottom">
        {{ list.settings.name }}
        <ion-badge>
          {{ list.filteredGamesCount$ | async }}
        </ion-badge>
      </ion-label>
    </ion-segment-button>
  </ion-segment>
  </ion-toolbar>
</ion-footer>

Which gives this:

The custom component ‘card-game-list’ is basically a virtual scroll with ion-cards.

The problems I have:
It take about half a second to swicth from a list to an other, when I click on a segment button, there’s a short lag, then everything happens at the same time : the other list is displayed and the ripple effect occurs but in a laggy way.

The profiling shows this:
profiling

The Animation Frame Fired Takes allthe processing time (0.5s),I don’t know iff that’s supposed to work that way.

What I’ve tryied:

  • Change Detection strategy to OnPush -> Improved the problem but still here
  • All virtual scroll I could fing on npm (+ cdk) -> they all had their own unacceptable issues :’(
  • Having much simplercomponent for the virtual scroll -> didn’t changeanything

To go deeper:
What I think is it all have to do with the way I switch lists,that is to say

  public selectList($event) {
    const selectedList = $event.target.value;
    console.log(selectedList);
    this.boardGames.gameLists$.subscribe(lists => {
      this.listSubject.next(
        lists.find(list => list.settings.name === selectedList)
      );
    });
  }

I’m using RxJs observable to next the new list to the component,and I have the feeling
that’s not the best option.

So questions are:
1 - Does it seems legit to use observable like this to switch lists ?
2 - Is there a way to call first the ripple animation (immediately) and then do the switching work?

Thanks for your help

Ionic infos

Ionic:

   Ionic CLI                     : 5.4.16 (C:\Users\Piwi\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

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

System:

   NodeJS : v12.16.1 (C:\DEV\tools\nodejs\node.exe)
   npm    : 6.13.4
   OS     : Windows 10

Posts: 1

Participants: 1

Read full topic

Problem with url reference using google places api on iOS

$
0
0

@Faraon wrote:

Hello, im using angular-material-extension/google-maps-autocomplete in order of use places.js API, i have my apiKey and everything is working fine on android allowing the url https://localhost/tabs/* on google console but on ios the url is ionic://localhost/tabs/* because the library throw that error. The problem is that i have that url allowed on google console but still throw the same error. This problems only happen on ios and is driving me crazy. I appreciatte any help, thanks

Posts: 1

Participants: 1

Read full topic


Ionic grid use with one fixed column and one scrollable

$
0
0

@Michael2779 wrote:

Hi,

I am creating something like a address book within my app using ionic grid. I wanted to have the main content of the page to have two columns. The left most columns would be a scrollable list of my address book and the right column would be fixed and display all the name, address, phone, etc of the selected person from the left column’s scrollable list.

It doesn’t appear there is a way to slot = “fixed” the second column that is non-scrollable. Is that right? At this point I am thinking the grid won’t work as I would ideally like.

Community’s feedback is greatly appreciated. Would love to stick to the ionic grid if possible.

Posts: 1

Participants: 1

Read full topic

React app loading lots of markdown/html fragments with images

$
0
0

@vicmortelmans wrote:

Hi,

I’m building my first app in Ionic with React and Capacitor. It consists of a single page with navigation based on accordion and carousel components. I’ve set up a skeleton app that looks very promising. The actual content is available as a set of 100+ markdown files (or if that would work out better, converted to html fragments). They contain images, also 100+ in number.

The problem has two levels: 1) importing the content files and 2) importing the images.

A component like react-markdown will render a markdown string, but how to load it from a local file? And what if there’s not one file, but a folder full of files, which I’d like to load dynamically based on a list of filenames? And if that works out, how to make sure the the images that it refers to can also be packaged as local files?

I did quite some reading, and so far it looks like this is not a real React use case. I did find a few solutions, but they all relied on webpack (and its require.context() feature), but that’s not coming with Ionic, if I’m right?

Maybe I should follow a completely different approach, but note that my site is 100% static, so starting with databases to store my content is overkill. Also, I like the fact that I have the content source as markdown, for if I need to edit it.

What direction should I follow? As a fallback, I was thinking of storing all markdown and images as strings (base64 for the images) in a big json container, but that’s quite silly and hard to maintain, not?

Best regards,
Vic

PS. the entry form guides me to an older post: https://forum.ionicframework.com/t/best-practice-for-pre-loading-an-all-offline-app-with-data-600-images/91765/9. Using the File plugin. Just to get my head around, if this works, how should I make sure that all my markdown and image files are packaged? Just putting them in src/ without an import or require in the code won’t work, will it? The post says ‘store them in your assets folder’, but is this public/assets or build/assets? Must I manually copy and maintain the files there? A bit of background info about the packaging process would be helpful and I didn’t find it so far…

Posts: 1

Participants: 1

Read full topic

Template icon in tags html

$
0
0

@heliomarpm wrote:

Hello, gentlemen
Is it possible to reproduce this designer from ionic 1 with ionic 5?
I’m having a lot of difficulty in building a template my way, I feel that I don’t have as much flexibility in working my html template, in this version :frowning:

<i class = "ion-android-arrow-up balanced">
        <span class = "small-text"> ({{sales.percentual | abs}}%) </span>
</i>

Posts: 1

Participants: 1

Read full topic

Apk not open. any devices

Cannot find module "."

$
0
0

@namaa wrote:

Hi,
When I run command “ionic cordova run android --prod”,
error is:
Uncaught Error: Cannot find module “.”

package.json:
{

“name”: “ionic-hello-world”,

“author”: “Ionic Framework”,

“homepage”: “http://ionicframework.com/”,

“private”: true,

“scripts”: {

"build": "ionic-app-scripts build --prod",

"watch": "ionic-app-scripts watch",

"serve:before": "watch",

"emulate:before": "build",

"deploy:before": "build",

"build:before": "build",

"run:before": "build"

},

“dependencies”: {

"@angular/common": "^5.2.11",

"@angular/compiler": "^7.2.16",

"@angular/compiler-cli": "^7.2.16",

"@angular/core": "^7.2.16",

"@angular/forms": "5.0.0",

"@angular/http": "5.0.0",

"@angular/platform-browser": "5.0.0",

"@angular/platform-browser-dynamic": "^7.2.16",

"@angular/tsc-wrapped": "^4.4.6",

"@ionic-native/app-version": "^5.23.0",

"@ionic-native/barcode-scanner": "^4.20.0",

"@ionic-native/camera": "^4.3.3",

"@ionic-native/core": "^4.3.3",

"@ionic-native/deeplinks": "^4.20.0",

"@ionic-native/device": "^4.20.0",

"@ionic-native/fcm": "^4.20.0",

"@ionic-native/file": "^4.11.0",

"@ionic-native/file-chooser": "^4.11.0",

"@ionic-native/file-path": "^4.11.0",

"@ionic-native/file-transfer": "^4.11.0",

"@ionic-native/http": "^4.6.0",

"@ionic-native/in-app-browser": "^4.20.0",

"@ionic-native/ionic-webview": "^5.2.0",

"@ionic-native/media": "^4.20.0",

"@ionic-native/social-sharing": "^4.20.0",

"@ionic-native/splash-screen": "^5.2.0",

"@ionic-native/sqlite": "^4.6.0",

"@ionic-native/status-bar": "^4.3.3",

"@ionic-native/streaming-media": "^4.20.0",

"@ionic/angular": "^5.0.7",

"@ionic/storage": "^2.1.3",

"@ngx-translate/core": "^11.0.1",

"@ngx-translate/http-loader": "^4.0.0",

"@types/jquery": "^3.3.33",

"autoprefixer": "^7.1.6",

"cordova": "^9.0.0",

"cordova-android": "8.1.0",

"cordova-browser": "^6.0.0",

"cordova-ios": "4.5.5",

"cordova-plugin-advanced-http": "^1.11.1",

"cordova-plugin-androidx": "1.0.2",

"cordova-plugin-androidx-adapter": "1.1.0",

"cordova-plugin-barcodescanner": "^0.7.4",

"cordova-plugin-compat": "^1.2.0",

"cordova-plugin-device": "^2.0.2",

"cordova-plugin-fcm-with-dependecy-updated": "2.4.0",

"cordova-plugin-file": "^6.0.1",

"cordova-plugin-inappbrowser": "^3.2.0",

"cordova-plugin-ionic-keyboard": "^2.1.3",

"cordova-plugin-ionic-webview": "^4.0.0",

"cordova-plugin-splashscreen": "^5.0.3",

"cordova-plugin-statusbar": "^2.4.2",

"cordova-plugin-streaming-media": "2.2.0",

"cordova-plugin-whitelist": "git+https://github.com/apache/cordova-plugin-whitelist.git",

"cordova-plugin-x-socialsharing": "5.6.5",

"es6-promise-plugin": "4.2.2",

"ionic-angular": "3.9.2",

"ionic-configuration-service": "^6.0.0",

"ionic-gallery-modal": "^0.2.7",

"ionic-plugin-deeplinks": "1.0.19",

"ionic-plugin-keyboard": "^2.2.1",

"ionicons": "3.0.0",

"jquery": "^3.4.1",

"ng-lazyload-image": "^3.4.2",

"phonegap-plugin-barcodescanner": "8.1.0",

"rxjs": "^5.5.12",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.18"

},

“devDependencies”: {

"@angular-devkit/build-angular": "^0.900.3",

"@angular/cli": "^9.1.3",

"@ionic/app-scripts": "^3.2.1",

"@types/node": "^13.13.2",

"ionic": "^5.4.16",

"typescript": "^3.1.1",

"ws": "3.3.2"

},

“description”: “My App”,

“cordovaPlugins”: ,

“cordovaPlatforms”: ,

“cordova”: {

"platforms": [

  "browser",

  "ios",

  "android"

],

"plugins": {

  "cordova-plugin-ionic-keyboard": {},

  "cordova-plugin-advanced-http": {},

  "cordova-plugin-whitelist": {},

  "cordova-plugin-device": {},

  "cordova-plugin-statusbar": {},

  "cordova-plugin-file": {},

  "cordova-plugin-inappbrowser": {},

  "cordova-plugin-ionic-webview": {

    "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"

  },

  "cordova-plugin-fcm-with-dependecy-updated": {},

  "ionic-plugin-deeplinks": {

    "URL_SCHEME": "App",

    "DEEPLINK_SCHEME": "https",

    "DEEPLINK_HOST": "secret.namaatests.com/",

    "ANDROID_PATH_PREFIX": "/"

  },

  "cordova-plugin-streaming-media": {},

  "cordova-plugin-barcodescanner": {},

  "cordova-plugin-splashscreen": {},

  "cordova-plugin-androidx": {},

  "cordova-plugin-androidx-adapter": {},

  "cordova-plugin-x-socialsharing": {

    "ANDROID_SUPPORT_V4_VERSION": "24.1.1+",

    "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."

  }

}

}

}

Posts: 1

Participants: 1

Read full topic

Viewing all 49305 articles
Browse latest View live