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

IonTabs does not show at first render

$
0
0

The problem I have is that Tabs, element containing is not displayed the first time the component is rendered. If instead it is shown when I return the Elements component.

Consider that at the moment tabs does nothing because it is part of the design at the current stage

    return (
      <div id="container-principal-ExplorerContainer-Cliente">   
        <Tabs setShowModal={props.setShowModal} setTipoDeVistaEnModal={props.setTipoDeVistaEnModal} ></Tabs>
        <IonTitle id="explorerContainerCliente-titulo">PROVEEDORES DE SERVICIOS EN LA ZONA </IonTitle>             
        <Elements  arrangement={props.arreglo!} setVerEmail={setVerEmail} setItem={setItem}  />
      </div>
      );
const Tabs= (props:{setShowModal:any,setTipoDeVistaEnModal:any }) => {

  return(
    <>
    
    <IonReactRouter>

    <IonTabs>

        <IonRouterOutlet>
          <Route exact path="/">
          </Route>
          <Route exact path="/">
            <Tab2 />
          </Route>
          <Route path="/">
          </Route>
          <Route exact path="/">
            <Redirect to="/" />
          </Route>
        </IonRouterOutlet>

        <IonTabBar slot="top">

          <IonTabButton tab="tab1" href="/tab1">
            <IonIcon icon={triangle} />
            <IonLabel>CATEGORÍAS</IonLabel>
          </IonTabButton>
          
          <IonTabButton tab="tab2" href="/tab2">
            <img className="imagen-boton-principal" src={"./assets/icon/sirena.png"} />
            <IonLabel>EMERGENCIAS</IonLabel>
          </IonTabButton>

          <IonTabButton tab="tab3" href="/tab3">
          <img className="imagen-boton-principal" src={"./assets/icon/time.png"} />
            <IonLabel>PROGRAMAR</IonLabel>
          </IonTabButton>
       
        </IonTabBar>
      </IonTabs>
      </IonReactRouter>
      </>
  )
}

1 post - 1 participant

Read full topic


Debugging published android app whitescreen

$
0
0

I inherited an Ionic v5 angular project which was using build tools from 2018/2019. After upgrading everything I could (ionic, cordova, gradle, android studio, etc) and resolving errors, I am experiencing an app that fully works any way I try to run it except after it has been deployed.

The app gets stuck at the splash screen but only after it has been published to the play store. This app works on iOS store. From what I can tell it seems to be breaking when trying to ask for permissions but I don’t know how to find logs.

This occurs whether I build and deploy the app manually or using App Flow.

How do I go about debugging an issue that only appears on live?

1 post - 1 participant

Read full topic

Dependency injection in tabs

$
0
0

New to ionic, intermediate level on Angular. . .
Normally in Angular I have only one root module “app.module.ts” where I declare my providers which are nicely injected throughout all the components.

I am trying to inject one and only one instance of a data service throughout all the tabs so that I can share data across the tabs.
I included this DataService in app.module.ts providers, but not sure how to pass it on to the other tabs?

Each tab is loaded in app-routing.module.ts, for example:
{
path: ‘home’,
loadChildren: () => import(’./components/home/home.module’).then( m => m.HomePageModule)
},

How do I do dependency injection across modules in this case?

Thank you!

2 posts - 2 participants

Read full topic

Android 10 Camera Plugin Issues

$
0
0

My capacitor app uses the Camera plugin to take pictures and/or allow the user to select photos from the gallery. In Android 7, iOS, and on the web, the app works correctly. In Android 10, the gallery works, but the camera does not. There are two issues:

First, in Android 10, the camera does not save the image to the gallery, but in Android 7 it does. The code for launching the camera is:

import { Camera, CameraResultType, Photo, CameraSource } from '@capacitor/camera';
import { CameraHelper } from "./CameraHelper"; // This hooks into a custom webpack build rule for bundling PWA on web, but not including on Android/iOS

export function takePicture(success: (image: string) => void, failure: (reason: any) => void) {
    let f = () => {
        Camera.getPhoto({
            quality: 90,
            allowEditing: false,
            direction: CameraDirection.Front, // Commenting this does not change the behavior
            resultType: CameraResultType.Uri,
            source: CameraSource.Camera,
            saveToGallery: true  // Commenting this does not change the behavior
        }).then((image: Photo) => {
            success(image.webPath!);
        }).catch((reason: any) => {
            failure(reason);
        });
    }
    // NB: on web/electron, need to load PWA support first
    if (platform === "web") {
        new CameraHelper().injectPwa(f);
    }
    else {
        f();
    }
}

Second, my Android 10 device stops the activity when it switches to the camera, but I don’t get an appRestoredResult when my app restarts. To be clear: I understand that the Android lifecycle allows for the app to stop and be restarted. That’s not my issue. My issue is that I make a checkpoint, but since I am not getting an appRestoredResult event, I can’t restore my checkpoint. The code for listening for restart runs immediately when the app begins (not called from an async/await function):

App.addListener('appRestoredResult', (event: RestoredListenerEvent) => {
    console.log('Restored state:', event.data);
    console.log('Restored state:', event.error);
    console.log('Restored state:', event.methodName);
    console.log('Restored state:', event.pluginId);
    console.log('Restored state:', event.success);
}).then((v: PluginListenerHandle) => {
    console.log("Handler installed");
});

While “Handler installed” does get printed to the log, the other messages do not… No event ever fires.

To chase this down, I started putting Log.d messages into CameraPlugin.java file, to see where things break. Things go badly right away:

    public void processCameraImage(PluginCall call, ActivityResult result) {
        if (imageFileSavePath == null) {
            // processCameraImage() is always returning here, because imageFileSavePath is null
            call.reject(IMAGE_PROCESS_NO_FILE_ERROR);
            return;
        }
        // ...
    }

In retrospect, it makes sense that when the imageFileSavePath is null, the app won’t get an appRestoredResult event, because there is nothing to use to restore. And if the camera plugin isn’t working correctly, then it would make sense for imageFileSavePath to be null. So my guess is that the second problem will go away if I can figure out why the camera isn’t saving its picture to the gallery, or anywhere else.

The only thing I can think of is that there is some kind of misconfiguration of permissions in my app, which is causing the Camera to fail. But I cannot find any advice online about configuration changes for Capacitor and/or the Camera plugin for Android 10. And as stated earlier, the code works on Android 7, iOS, and PWA/Web.

Here are the important parts of the app’s configuration. First, the manifest’s permissions:

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
    <uses-permission android:name="com.android.vending.BILLING" />

    <application
        android:allowBackup="true"
        android:fullBackupOnly="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        android:hardwareAccelerated="true"
        android:requestLegacyExternalStorage="true">
// ...

Next, variables.gradle:

ext {
    minSdkVersion = 21
    compileSdkVersion = 29
    targetSdkVersion = 29
    andridxActivityVersion = '1.2.0'
    androidxAppCompatVersion = '1.3.1'
    androidxCoreVersion =  '1.3.2'
    androidxMaterialVersion =  '1.1.0-rc02'
    androidxBrowserVersion =  '1.2.0'
    androidxLocalbroadcastmanagerVersion =  '1.0.0'
    androidxExifInterfaceVersion = '1.2.0'
    firebaseMessagingVersion =  '20.1.2'
    playServicesLocationVersion =  '17.0.0'
    junitVersion =  '4.12'
    androidxJunitVersion =  '1.1.3'
    androidxEspressoCoreVersion =  '3.4.0'
    cordovaAndroidVersion =  '7.0.0'
}

Finally: here is my npx cap doctor result:

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 3.2.0
  @capacitor/core: 3.2.0
  @capacitor/android: 3.2.0
  @capacitor/ios: 3.2.0

Installed Dependencies:

  @capacitor/ios: not installed
  @capacitor/cli: 3.2.0
  @capacitor/android: 3.2.0
  @capacitor/core: 3.2.0

[success] Android looking great! 👌
[error] Xcode is not installed

Any suggestions would be greatly appreciated!

1 post - 1 participant

Read full topic

Using the VueJS Composition API to Create Hooks for Supabase Database and Storage

$
0
0

Using the VueJS Composition API to Create Hooks for Supabase Database and Storage

video walkthrough and source code available in video comments.

1 post - 1 participant

Read full topic

How to write the perfect Marketing CV?

$
0
0

Today the world of business is run by marketers. Every company invests in a good marketer to promote their brand better and win customers. Therefore, if you are looking to become a marketer or are in the marketing profession, it is necessary that you have an impeccable CV.
Resume Writer India

It comes as a shock that many marketers who can promote products and achieve promotional goals, struggle to put together an impressive CV. Thus, missing out on some of the opportunities that they could do well at.

Your CV is your elevator pitch, so if you cannot sell yourself then it reflects poorly on your abilities. Besides a good profile presentation is important. Therefore, it is essential that you get your CV professionally designed to be ahead of the lot.

For your CV to attract attention, you need to know your target audience. In this case, the company that is offering the job? What techniques do they use? How you can improve their products and gain better results?

Once you know what the hiring company needs, tailor your resume to fit their requirements. You should also highlight your strengths in the industry. Like, are you good at online marketing or offline? When displaying your strengths, ensure they all are relevant to the position you are applying into.

What goes into the CV?

1. Personal Information

At the top of your CV, provide your full name, nationality, address, email address, and phone number. The information will make it easier for potential employers to reach you for an interview.

2. CV Profile

Next, add a summary highlighting your attributes and experiences that are relevant to the job. This speaks to the recruiter as to why they should consider you for the position.

3. Educational Background

Provide a breakdown of your educational history from the highest level to the lowest. Since, it is a competitive space, adding a professional course or conference can make a difference. Besides, these additional certifications showcase your passion and commitment to succeed in the field.

4. Work Experience

When giving your employment history, refrain from listing your roles. Instead, state how you made a difference. You should also use standard industry terms to highlight your knowledge in the field.

5. Skills

List down the core and soft skills you have that are in line with the position that you are applying for. At times even if you have no experience, include attributes you acquired in college. Elaborate on your specialised marketing abilities and personal traits that will be relevant to the job you are seeking.

6. Personal Interest

It is an optional section where you mention your hobbies and your passions. The hobbies will give the impression that you are a whole-rounded person. However, do not lie about your hobbies.

With the basics right, there is no stopping to your career growth. Remember when you send your CV to a recruiter you are promoting yourself. And when it’s your career on the line, make sure to brand yourself and your abilities to the fullest.

Click here for marketing CV

1 post - 1 participant

Read full topic

Google Universal Analytics + Google Analytics 4: what plugin should I use?

$
0
0

It seems that for the moment you need to add support to both Google Universal Analytics and Google Analytics V4 because the V4 is not fully implemented (it still does not have the same set of features as the old Universal Analytics).

To add support to the V4 you “just” need to integrate Firebase Analytics and I’ve used this plugin: GitHub - capacitor-community/firebase-analytics: Enable Firebase Analytics for Capacitor Apps</tit

But should I use for Google Universal Analytics? I can’t find anything useful searching the internet. Could you please give me a hand?

1 post - 1 participant

Read full topic

Not able to test Alert / Popover content

$
0
0

The test renderer not able to find Alert / Popover content

Here is my component

const ExploreContainer: React.FC<ContainerProps> = () => {
  const [ showAlert ] = useIonAlert();
  return (
    <div className="container">
      <IonButton expand="block" onClick={ () =>
          showAlert({ header: 'Alert', message: 'alert from hook', buttons: [ 'Ok' ] })
        }
      >Show Alert
      </IonButton>
    </div>
  );
};

This is my test case

describe("Test component", () => {
    beforeEach(()=>{
        render(
            <IonApp>
                <ExploreContainer />
            </IonApp>
        );
    });

    test("Alert test", async () => {
        fireEvent.click(screen.getByText("Show Alert"));
		await waitFor(()=>{
			expect(screen.getByText("alert from hook")).toBeVisible();
		});
    })
});

This is the error

Test component › Alert test

    Unable to find an element with the text: alert from hook. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    <body>
      <div>
        <ion-app>
          <div
            class="container"
          >
            <ion-button
              expand="block"
            >
              Show Alert
            </ion-button>
          </div>
        </ion-app>
      </div>
    </body>

      15 |     test("Alert test", async () => {
      16 |         fireEvent.click(screen.getByText("Show Alert"));
    > 17 |              await waitFor(()=>{
         |                    ^
      18 |                      expect(screen.getByText("alert from hook")).toBeVisible();
      19 |              });
      20 |     })

      at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:173:27)
      at Object.test (src/components/ExploreContainer.test.tsx:17:9)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        9.408 s

1 post - 1 participant

Read full topic


IONIC bytes array to binary base64

$
0
0

Hello Team,

I am facing conversion bytes to binary we don’t have a any solution please post it in same here

Adv Thanks

1 post - 1 participant

Read full topic

Ionic 5 and nested array

$
0
0

Hi everybody,

I have a problem using a nested array in Ionic 5, I have to create it after retrieving data from my backend service.

I can correctly display the data, the hide/show works, but I have several problems:

  • when I change segment or hide the item divider, my value is reset to 1.
  • when I’m using “ngModel”, changing the value [0][0] change the value [1][0] too.
  • when I’m using “value” my array doesn’t change when I try to save it.

Here is the code

this.nestService.getMultiples(listParam)
  .subscribe((data) => {
       this.arrayOne = _.orderBy(data[0], ['Name'], ['asc']);
        this.arrayTwo = _.orderBy(data[1], ['Name'], ['asc']);

        this.arrayTwoModified = this.arrayTwo;
        this.arrayTwoModified.forEach(item => item.numberSelect = 1);

        this.arrayOneModified = this.arrayOne;
        this.arrayOneModified.map(i => {
          i.show = true;
          i.arrayTwoModified = this.arrayTwoModified;
        });     
  });

And this is the template

 <div *ngSwitchCase="'One'">
  <ion-item-group *ngFor="let arrayOne of arrayOneModified; let i= index">
    <ion-item-divider tappable (click)="arrayOne.show = !arrayOne.show" color="medium">
      <ion-label>{{arrayOne.Name}}</ion-label>
      <ion-icon slot="end" *ngIf="arrayOne.show" name="arrow-down-outline"></ion-icon>
      <ion-icon slot="end" *ngIf="!arrayOne.show" name="arrow-up-outline"></ion-icon>
    </ion-item-divider>
    <ion-list *ngIf="arrayOne.show" lines="full">
      <ion-item *ngFor="let arrayTwo of arrayOne.arrayTwoModified ; let j= index">
        <ion-label>{{arrayTwo.Name}} - {{i}} - {{j}}</ion-label>
        <ion-input class="right" type="number" min="0" [(ngModel)]="arrayTwo.numberSelect"></ion-input>
        <!-- <ion-input class="right" type="number" min="0" [(ngModel)]="arrayOneModified[i].arrayTwoModified[j].numberSelect"></ion-input> -->
        <!-- <ion-input class="right" type="number" min="0" [(value)]="arrayOneModified[i].arrayTwoModified[j].numberSelect"></ion-input> -->
      </ion-item>         
    </ion-list>
  </ion-item-group>
</div>

If anybody have an idea, it will be nice!
Thanks

1 post - 1 participant

Read full topic

Power consumption

$
0
0

Hello folks,

do you know how much energy ionic (hybrid apps in ionic-angular) typically takes (especially in comparison to native apps)?

In my case:

  • my app takes 100mAh (by downloading music content and playing it by 20 minutes). Phone’s temperature is about 35C
  • spotify takes 8.5mAh (by downloading music content and playing it by 20 minutes as well).Phone’s temperature is about 26C.

any recommendations or suggestions which makes my app more efficient are highly appreciated!

1 post - 1 participant

Read full topic

Integrating square.js ends up with a strange error

$
0
0

I’m currently developing an application in Ionic 5. One of the only things left to do is integrate Square Payments into the app. Currently I load the script using a script service and then run the code to generate the payment form etc:

/// within ngOnInit
this.scriptService.load('square-sandbox').then(async data => {
        const payments = await Square.payments(this.applicationId, this.locationId);

        //Card payments
        let card;
        const cardButton = document.getElementById(
          'card-button'
        );
        const backBtn = document.getElementById('toggle-drawer');

        try {
          card = await this.initializeCard(payments);
        } catch (e) {
          console.error('Initializing Card failed', e);
          return;
        }

        //googlepayments
        let googlePay;
        try {
          googlePay = await this.initializeGooglePay(payments);
        } catch (e) {
          console.error('Initializing Google Pay failed', e);
        }

        async function handlePaymentMethodSubmission(event, paymentMethod) {
          event.preventDefault();
          try {   
            const token = await this.tokenize(paymentMethod);
            const paymentResults = await this.createPayment(token);
            console.log("SUCCESS")
            setTimeout(()=>{
              window.location.href = "/payment-success";
            },250);
            console.debug('Payment Success', paymentResults);
          } catch (e) {
            cardButton.setAttribute("disabled ", "false");
            backBtn.setAttribute("disabled ", "false");
            console.log('FAILURE');
            console.error(e.message);
          }
        }

        if (googlePay !== undefined) {
          const googlePayButton = document.getElementById('google-pay-button');
          googlePayButton.addEventListener('click', async function (event) {
            await handlePaymentMethodSubmission(event, googlePay);
          });
        } 
    }).catch(error => console.log(error));

this part all works fine. However after the loading of square.js it seems to take over the application? All console.logs will come from square.js and all routing seems to also go through square.js with angular throwing an error.


As you can see the first console log is thrown out by page.ts, then the rest are by square despite them actually being called from a function within page.ts. The navigation is also now apparently triggered outside the Angular zone. I’m not sure what is going on and hoping someone can point me in the right direction. Redirecting the page using “window.location.href” instead of angular routing makes everything work fine again if this helps. But it isn’t ideal as it fully refreshes the page. Thanks

1 post - 1 participant

Read full topic

IOS Emulator - An iPhone App Testing Program

$
0
0

Purchasing the latest iPhone Mobile, is considered to be the most expensive as well as the most premium Phone. Many people believe that this phone has the ability to do everything which an Android phone is unable to perform or the functionality or features of any app or phone introduced first to this Premium Phone.

Let’s jump on to our Topic and click on this link i.e., IOS Emulator for PC. Before introducing or listing down the best Emulator Software for IOS, we should be aware of the Definition of Emulator, What an Emulator does and How Emulators acts Like?

1 post - 1 participant

Read full topic

Build Failed for build.gradle

$
0
0

Hi All,
I built my new ionic5 app but I receive build.gradle error in my log.

Command failed with exit code 1: C:\projects\mgdlab\ionic\oto-app\platforms\android\gradlew cdvBuildRelease -b C:\projects\mgdlab\ionic\oto-app\platforms\android\build.gradle

I solved an equal problem by modifying the file build.gradle but I don’t remember how.

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext.kotlin_version = '1.3.50'
    apply from: 'repositories.gradle'
    repositories repos

    dependencies {
        classpath 'com.android.tools.build:gradle:4.0.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    apply from: 'repositories.gradle'
    repositories repos

    //This replaces project.properties w.r.t. build settings
    project.ext {
      defaultBuildToolsVersion="29.0.2" //String
      defaultMinSdkVersion=22 //Integer - Minimum requirement is Android 5.1
      defaultTargetSdkVersion=29 //Integer - We ALWAYS target the latest by default
      defaultCompileSdkVersion=29 //Integer - We ALWAYS compile with the latest by default
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

1 post - 1 participant

Read full topic

Ionic-capacitor v3.1.2 unknown option ‘–npm-client’

$
0
0

I get the error message error: unknown option ‘–npm-client’
when I try to run the following command ionic capacitor run ios.
I think that I use the latest version of Ionic
Can you help me here. Thanks a lot
My versions:
onic:

Ionic CLI : 6.13.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.6.12
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics : 12.1.4
@angular/cli : 12.1.4
@ionic/angular-toolkit : 2.3.3

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : not available
Cordova Plugins : not available

Utility:

cordova-res (update available: 0.15.3) : 0.10.0
native-run : 1.4.0

System:

NodeJS : v15.2.1 (/usr/local/Cellar/node/15.2.1/bin/node)
npm : 7.20.3

1 post - 1 participant

Read full topic


Ionic v3 angular2-signaturepad not working in prod build but working in release

$
0
0

i did every possible solution in this thread but nothing works

1 post - 1 participant

Read full topic

Installing the LESS CSS Preprocessor

$
0
0

Is there an easy way to integrate the LESS CSS Preprocessor with my Component development?

When I tried to install LESS, I got this:

imaginativeone@Dougs-MacBook-2 vue-paradeto % npm install less less-loader --save-dev

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: **vue-paradeto** @ **0.0.1**
npm ERR! Found: **webpack** @ **4.46.0**
npm ERR! node_modules/webpack
npm ERR! peer **webpack** @" **^4.0.0** " from **@intervolga/optimize-cssnano-plugin** @ **1.0.6**
npm ERR! node_modules/@intervolga/optimize-cssnano-plugin
npm ERR! **@intervolga/optimize-cssnano-plugin** @" **^1.0.5** " from **@vue/cli-service** @ **4.5.13**
npm ERR! node_modules/@vue/cli-service
npm ERR! peer **@vue/cli-service** @" **^3.0.0 || ^4.0.0-0** " from **@vue/cli-plugin-babel** @ **4.5.13**
npm ERR! node_modules/@vue/cli-plugin-babel
npm ERR! dev **@vue/cli-plugin-babel** @" **~4.5.0** " from the root project
npm ERR! 7 more (@vue/cli-plugin-e2e-cypress, @vue/cli-plugin-eslint, ...)
npm ERR! peer **webpack** @" **^4.0.0 || ^5.0.0** " from **@soda/friendly-errors-webpack-plugin** @ **1.8.0**
npm ERR! node_modules/@soda/friendly-errors-webpack-plugin
npm ERR! **@soda/friendly-errors-webpack-plugin** @" **^1.7.1** " from **@vue/cli-service** @ **4.5.13**
npm ERR! node_modules/@vue/cli-service
npm ERR! peer **@vue/cli-service** @" **^3.0.0 || ^4.0.0-0** " from **@vue/cli-plugin-babel** @ **4.5.13**
npm ERR! node_modules/@vue/cli-plugin-babel
npm ERR! dev **@vue/cli-plugin-babel** @" **~4.5.0** " from the root project
npm ERR! 7 more (@vue/cli-plugin-e2e-cypress, @vue/cli-plugin-eslint, ...)
npm ERR! 20 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev **less-loader** @" ***** " from the root project
npm ERR!
npm ERR! Conflicting peer dependency: **webpack** @ **5.51.1**
npm ERR! node_modules/webpack
npm ERR! peer **webpack** @" **^5.0.0** " from **less-loader** @ **10.0.1**
npm ERR! node_modules/less-loader
npm ERR! dev **less-loader** @" ***** " 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/imaginativeone/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/imaginativeone/.npm/_logs/2021-08-27T15_17_11_089Z-debug.log

1 post - 1 participant

Read full topic

Angular ngFor not iterating through array on Android

$
0
0

Hello all,
First post, and pretty new user of ionic. So far I love it! My web app is working just dandy, but I’m running into an issue with android (haven’t gotten to iOS yet). I scoured the internet from corner to corner and couldn’t figure it out.

Here’s the rundown:
Retrieving an array of objects from my data api. The logs show everything to be returning as it should. I begin to have issues when trying to use an ngFor on either an ion-col (this is what I’m using for web) and even an ion-list. Basically android debugging is saying Error trying to diff, and that my array isn’t iterable. Here’s some code to see what’s going on.

page.ts file:

selection: Array<SelectionModel>=[];

getSelection() {
    if (this.platform.is('ios') || this.platform.is('android') || this.platform.is('mobile')) {
      this.httpMobile.get('https://www.asdf.com/' + this.config.endpoints.getSelection, {}, {})
        .then(data => {
          this.selection = data.data;
          console.log('selection: ' + this.selection);
          console.log(data.status);
          console.log(data.data); // data received by server
          console.log(data.headers);

        })
        .catch(error => {
          console.log(error.status);
          console.log(error.error); // error message as string
          console.log(error.headers);

        });
    } else {
      this.selectionService.getSelections('web').subscribe(
        x => {
          this.selection = x;
        },
        error => {
          console.log(error);
        },
        () => {
          // this.loadingScreen = false;
        }
      );
    }

html file:

<div *ngIf="ios || android">
        <ion-list *ngFor="let item of selection; index as i">
          test
          {{item.name}}
        </ion-list>

data returned from api:

[
	{
		"name": "Grey Goose",
		"description": "This is a description but short.",
		"size": "750ml",
		"price": 29.99,
		"content": 40,
		"brand": "Grey Goose",
		"country": "France",
		"state": null,
		"region": null,
		"inStock": true,
		"imageURL": "assets/spirits/vodka/greygoose.png",
		"typeId": 2,
		"categoryId": 1,
		"id": 1,
		"created": "2021-08-10T02:29:20.59",
		"lastModified": "0001-01-01T00:00:00"
	},
	{
		"name": "Absolut",
		"description": "This is a description but long. This is a description but long. This is a description but long.",
		"size": "750ml",
		"price": 19.99,
		"content": 40,
		"brand": "Absolut Vodka",
		"country": "Unites States",
		"state": "California",
		"region": null,
		"inStock": true,
		"imageURL": "assets/spirits/vodka/absolut.png",
		"typeId": 2,
		"categoryId": 1,
		"id": 2,
		"created": "2021-08-10T02:29:20.593",
		"lastModified": "0001-01-01T00:00:00"
	}
]

error in android studio:

Msg: ERROR Error: Error trying to diff '[{"name":"Grey Goose", ..<refer above for actual data>... }] Only arrays and iterables are allowed

My understanding is that the array returned is iterable. Am I just missing something here? Any help is appreciated!

7 posts - 2 participants

Read full topic

GeoLocation returns "Location Unavailable" for Android 11

$
0
0

I have an application Ionic Capacitor Angular that is simply getting the GeoLocation and displaying the lat lng on screen

async ngOnInit(){
    await Geolocation.getCurrentPosition({
      enableHighAccuracy: true
    }).then((resp) => {
      this.latitude = resp.coords.latitude;
      this.longitude = resp.coords.longitude;

      this.options = {
        center: { lat: this.latitude, lng: this.longitude},
        zoom: 17
      };  
    }).catch((error) => {
      console.log('Error getting location', error);
    });      
  }

This runs perfectly fine in the browser with Ionic Serve. I have also successfully launched it on a device(Samsung S9) which is Android V9 (knox api level 27). However when I run it on a (Samsung S21 Ultra) which is Android V11 (knox api level 33)

I have the following within the AndroidManfiest.xml of the app

<uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
    <uses-feature android:name="android.hardware.location.gps" />

I see this in the documentation

Caution: If your app targets Android 11 (API level 30) or higher, the system enforces this best practice [ *asking for foreground and background access in separate requests* ]. If you request a foreground location permission and the background location permission at the same time, the system ignores the request and doesn’t grant your app either permission

I have not been able to find a resolution to this issue. Can someone please help provide some insight. Again this is actual hardware and not an emulator.

2 posts - 2 participants

Read full topic

Building Android App with Capacitor 3

$
0
0

It appears that a few things have changed when building a production app with Capacitor 3. Previously you were able to use the CLI to sign and build your release version of the APK, but now it appears that you need to use the Android Studio IDE to do so.

I am unable to figure out how to build my app within Android Studio.

It does not appear that I have any options available under my Build menu once the IDE launches after running the build command.

Does anyone have any suggestions on where to begin when trying to use Android Studio for the first time for a production build?

1 post - 1 participant

Read full topic

Viewing all 71125 articles
Browse latest View live


Latest Images

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