@larsblumberg wrote:

Screenshot 2020-05-06 at 11.53.112880×1442 627 KB

Hello! I’m using latest Ionic v5 and I don’t understand yet why the highlighted node (an ion-content element) has its padding css attribute ignored. As you can see in the styles inspector on the right, the padding attribute is being applied. But there’s no visual padding in the rendered DOM. Why is that?

Posts: 2

Participants: 1

Read full topic

@ccwukong wrote:

Hi guys, I’m trying to add Ionic React to an existing React PWA app written in ES6 by following this article https://dev.to/ionic/adding-ionic-react-to-an-existing-react-project-4kib and it worked when launching a localhost server. However, I got the following error during the unit testing:

app/containers/LoginPage/tests/index.test.js
● Test suite failed to run

TypeError: React__default.createContext is not a function

   8 | import PropTypes from 'prop-types';
   9 | import cx from 'classnames';
> 10 | import { IonPage } from '@ionic/react';
     | ^
  11 | import Head from 'components/Head';
  12 | import NavBar from 'components/NavBar';

  at Object.<anonymous> (node_modules/@ionic/react/src/contexts/IonLifeCycleContext.tsx:14:55)
  at Object.<anonymous> (app/components/MainLayout/index.js:10:1)
  at Object.<anonymous> (app/containers/LoginPage/index.js:14:1)
  at Object.<anonymous> (app/containers/LoginPage/tests/index.test.js:7:1)

My React packages

“react”: “^16.8.6”,
“react-dom”: “^16.8.6”,

I’m not a TypeScript expert but it seems like an issue of .tsx file transpiling by babel.

Please advice, thank you.

Posts: 1

Participants: 1

Read full topic

@ogebman wrote:

Hi, I just created a new ionic project with Starter template tabs, then i want to authenticate only in tab 3, but when I declare canActivate: [AuthGuardService] on routes tabs, I can’t access tabs 3 if auth value is false. because other tabs can be accessed without requiring authentication.
this is my code

tabs-routing.module.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab1/tab1.module').then(m => m.Tab1PageModule)
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab2/tab2.module').then(m => m.Tab2PageModule)
          }
        ]
      },
      {
        path: 'tab3',
        canActivate: [AuthGuardService],  /* <-- check auth */
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab3/tab3.module').then(m => m.Tab3PageModule)
          }
        ]
      },
      {
        path: 'tab4',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab4/tab4.module').then(m => m.Tab4PageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

auth-guard.service.ts

export class AuthGuardService implements CanActivate{

  constructor(
    private authService: AuthenticationService,
  ) { }

  canActivate(): boolean{
    return this.authService.isAuthenticated();
  }
}

Posts: 1

Participants: 1

Read full topic

@Sweg wrote:

I am trying to add Firebase Authentication to my Ionic / Angular app.

I am able to sign users in with Firebase, now I want to add a canLoad guard to some components. These components should only be accessible to logged in users.

To do this, I have tried to add Capacitor’s Storage plugin to my app to store the user’s credentials.

Then use the stored data to allow or deny user access (i.e. allow logged in users access to the components).

Below is my code, but the guard is not working currently as I’m still able to navigate to the components even though I am not logged in.

Can someone please tell me what changes are required so that the login & guard works as expected:

Login Component:

onLogin() {
    let authObs: Observable<any>;

    authObs = this.authService.login(this.form.value.email, this.form.value.password);

    authObs.subscribe(
        resData => {
            this.router.navigateByUrl('/home');
    );
}

Auth Service:

import { Plugins } from '@capacitor/core';

login(email: string, password: string) {

    const userCredential = from(firebase.auth().signInWithEmailAndPassword(email, password));

    Plugins.Storage.set({
        key: 'userCredential',
        value: JSON.stringify(userCredential)
        });

    return userCredential;
}

Auth Guard:

export class AuthGuard implements CanLoad {

  constructor() { }

  canLoad(
    route: Route,
    segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {

    const userCredential = Plugins.Storage.get({ key: 'userCredential' });

    if (!userCredential) {
      return false;
    } else {
      return true;
    }
  }
}

Posts: 1

Participants: 1

Read full topic

@ArshiElahi wrote:

unable to implement createNotificationChannelAndroid of cordova-plugin-fcm-with-dependecy-updated

by using @ionic-native/fcm no such methods found,
Any Idea?

Posts: 1

Participants: 1

Read full topic

@sabahang wrote:

Hi,

According to this blog post UIWebView references in CapacitorCordova pod shouldn’t trigger the warning (now rejection) from app store however since this week apple store is not letting me submit my ionic 5 with Capacitor and all packages with latest updates anymore.

You may notice “UIWebView” references within your Capacitor-based iOS project. Files within the “CapacitorCordova” pod, for example, relate to Cordova compatibility. These will not trigger the warning.

Taken from: https://ionicframework.com/blog/understanding-itms-90809-uiwebview-api-deprecation/

See the response of Apple on the screenshot below. I’m only using two Capacitor plugins which to my knowledge aren’t referencing UIWebView (see the second screenshot). These are the plugins I use:

    "capacitor-fcm": "^2.0.0",
    "capacitor-firebase-auth": "^0.3.1",

Is this the fault of Ionic or am I doing something wrong?

Here is my package.json file:

{
  "name": "xx",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@capacitor/android": "^2.0.2",
    "@capacitor/core": "^2.0.2",
    "@capacitor/ios": "^2.0.2",
    "@ionic/core": "^5.1.0",
    "@ionic/pwa-elements": "^1.5.2",
    "@ionic/react": "^5.1.0",
    "@ionic/react-router": "^5.1.0",
    "@types/node": "^12.12.38",
    "@types/react-dom": "^16.9.7",
    "@types/react-router": "^5.1.7",
    "@types/react-router-dom": "^5.1.5",
    "axios": "^0.19.2",
    "capacitor-fcm": "^2.0.0",
    "capacitor-firebase-auth": "^0.3.1",
    "countries-code": "^1.0.8",
    "date-fns": "^2.12.0",
    "firebase": "^7.14.2",
    "ionicons": "^5.0.1",
    "jetifier": "^1.6.5",
    "libphonenumber-js": "^1.7.51",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-hook-form": "^5.6.1",
    "react-router": "^5.1.0",
    "react-router-dom": "^5.1.0",
    "react-scripts": "^3.3.1",
    "typescript": "^3.7.5"
  },
  "scripts": {
    "start": "npm-run-all -p start:css start:js",
    "build": "npm-run-all build:css build:js",
    "start:js": "react-scripts start",
    "build:js": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "ionic:build": "npm run build && npx cap copy android && npx cap copy ios",
    "ionic:serve": "npm run start",
    "start:css": "postcss src/styles/styles.src.css -o src/styles/index.css -w",
    "build:css": "postcss src/styles/styles.src.css -o src/styles/index.css --env production"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "plugin:@ionic/recommended",
      "plugin:prettier/recommended",
      "prettier",
      "prettier/@typescript-eslint"
    ],
    "plugins": [
      "prettier"
    ],
    "env": {
      "browser": true,
      "node": true,
      "es6": true
    },
    "rules": {
      "prettier/prettier": [
        "error",
        {
          "endOfLine": "auto",
          "trailingComma": "none"
        }
      ],
      "@typescript-eslint/no-var-requires": "off"
    },
    "settings": {
      "react": {
        "pragma": "React",
        "version": "detect"
      }
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "project": "./tsconfig.json",
      "ecmaFeatures": {
        "jsx": true
      }
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@capacitor/cli": "^2.0.2",
    "@fullhuman/postcss-purgecss": "^2.2.0",
    "@ionic/eslint-plugin": "0.0.1",
    "@types/jest": "^24.9.1",
    "autoprefixer": "^9.7.6",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.3",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^7.1.1",
    "prettier": "^2.0.5",
    "tailwindcss": "^1.4.4",
    "tailwindcss-pseudo-elements": "^1.1.2"
  },
  "description": "An Ionic project"
}

capacitor.config.json

{
  "appId": "xxx",
  "appName": "xxx",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "build",
  "cordova": {},
  "android": {
    "webContentsDebuggingEnabled": true
  },
  "server": {
  },
  "plugins": {
    "CapacitorFirebaseAuth": {
      "providers": [
        "phone"
      ],
      "languageCode": "en",
      "nativeAuth": false
    }
  }
}

Screenshots of error and references:

Screenshot 2020-05-06 at 17.38.151548×888 83.3 KB

Screenshot 2020-05-06 at 17.39.371080×1872 587 KB

Posts: 1

Participants: 1

Read full topic

@CodeKazuko2 wrote:

I get this error despite having react-native in my package.json.

Module not found: Can't resolve 'react-native' in 'C:\Users\hille\Desktop\virusattack\src\components'

image392×905 16.2 KB

Although when I run react-native info , it show me these.

Is it because of npm global package causeing this error? How to fix?

Posts: 1

Participants: 1

Read full topic

@nikhilkumarbehera wrote:

I’m getting a blank side menu screen on iOS simulator although options are clickable. This issue does not occur while running the app on browser OR android phone. I’m using the lastest of ionic and Xcode. Please let me know how to fix this. Thanks in advance. I have added type=“overlay” and ion-split-pane but nothings work

Screenshot 2020-05-07 at 11.43.48 AM334×734 23.4 KB

Please refer https://stackoverflow.com/questions/61629937/ionic-getting-blank-sidemenu-on-ios-simulator for code

Posts: 1

Participants: 1

Read full topic

@asalvatore wrote:

The issue

I try to build my Android app, build with Capacitor, for production. But whatever I do, the application which appears on my phone and which is compiled as a release always points to 192.168.0.41:8101, like if it was a livereload dev app.

What I’ve tried

Ionic build --prod
Ionic cap sync

npx ng build --aot=true --configuration="production"
npx cap sync

npx cap sync --prod

I also tries to suppress the current Android folder the run capacitor add again.

My configuration

Mac Mojave 10.14.1
Android Studio 3.6.2
Ionic 5.0.0
Capacitor 2.0.0
Node 13.10.1
My capacitor.config.json

{
 "appId": "space.filex.mobile",
 "appName": "FileX",
 "bundledWebRuntime": false,
 "npmClient": "npm",
 "webDir": "www",
 "cordova": {},
 "server": {
   "url": "http://192.168.0.41:8101",
   "cleartext": true
 }
}

Thanks for you help.
Alex

Posts: 1

Participants: 1

Read full topic

@kleyfat26 wrote:

Hola muy buenas ,. disculpen esta pregunta pero soy muy nuevo con ionic
queria saber si es posible instalar una version especifica de ionic ??

por ejemplo quiero utilizar la 5 pero al ejecutar el comando de consola me instala la 6.7.0…
yo quiero usar la 5 …

es posible instalar solo la 5 ???

Posts: 1

Participants: 1

Read full topic

@rahulchouksey_123 wrote:

Issue belongs to IOS.

1. pushNotificationReceived
2. pushNotificationActionPerformed

Above 2 events not getting fired in IOS when notification recieved, eventually Android is fine with all events of Push.
Do anyone have idea why its not being call in IOS.

Posts: 1

Participants: 1

Read full topic

@monkeytronics wrote:

Ionic brains! Help me out with this…

I need to use push notifications in my mobile app. My case is this - data comes from a thing and arrives at AWS IoT. The data triggers a rule that to generate a push notification. The push should go to the user’s phone, i.e. the person who owns that specific thing. What is the best practise for joining the dots between the IoT rule and the identifier used to direct the push notification to that specific phone.

I haven’t chosen a plugin or even the push notification solution. So open to any effective solutions. How would you architect this? Keen to hear some options! Thanks all.

Posts: 1

Participants: 1

Read full topic

@dragoon000320 wrote:

I am developing an angular/ionic5 app to work with map data. I am using ArcGIS JS API. Overall structure of my home page looks like that

<ion-header>
    <app-header></app-header>
</ion-header>
<ion-content>
    <app-map></app-map>
</ion-content>

where app-map is a component with div which is populated by ArcGIS JS API, and is structured as follows:

<div class="map" #mapView></div>

.map {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

the resulting generated map component DOM looks like that:

<div class="map">
   <div>
      <div role="application" tabindex="0">
         <canvas style="width: 411px; height: 613px; display: block;" width="1079" height="1609"></canvas>
      </div>
   </div>
</div>

The issue i’m facing is that swiping in vertical direction on Android doesn’t move the map… On IOS it works perfectly. On Android moving map is only possible by dragging it but only in horizontal direction. Is it possible to move the map similarly on android as on IOS.

IOS:

Android:

Please help, I spent almost 3 days on the issue, and couldn’t find any solution…
Thank you in advance.

Posts: 1

Participants: 1

Read full topic

@Shivendra-Parmar wrote:

Hi,
I have used ion-input with type=“file” but when I click on that to upload a file It does not open the file dialog and following warning comes:
File chooser dialog can only be shown with user activation.
I looked around and found out some solutions that show using the button to trigger the click for dialog
but It didn’t work possibly I am doing something wrong,
Here is my code:

<ion-input type="file" accept="jpg, png, jpeg" [(ngModel)] = "file" (change) = "addImage($event, 'card')" required #cardPicker></ion-input>
<ion-button fill="clear" (click)="cardPicker.click()" class="dialog">Add card Image</ion-button>

I have also tried native input element with following code but that also did not help

<input type="file" #card>
<button class="dialog" (click)="card.click()">Add card Image</button>

What I am doing wrong?

Posts: 1

Participants: 1

Read full topic

@med50 wrote:

Hello every one ,
I am looking to make an application that produce messages or data into kafka broker is that possible and thanks .

Posts: 1

Participants: 1

Read full topic

@Chinthu wrote:

Is there any way to clear ionic views cache on logout ?

Posts: 1

Participants: 1

Read full topic

@perrymsb wrote:

Hey all,

I have had an issue recently where the page swipe navigation just stops working. I have tested on several browsers and it’s the same on all of them. Sometimes it just starts working again. I have downloaded some demo builds from a course that I am doing and I seem to get the same behaviour, which makes me believe something is wrong with my Ionic install, not my actual build?

Is there something wrong with my ionic installations or could there be something know that I am doing that would cause this?

I am passing lint tests and have reinstalled Ionic but nothing seems to fix it it until it randomly starts working again.

Any help would be much appreciated!

Posts: 1

Participants: 1

Read full topic

@arielhasidim wrote:

I have Cordova-Angular project (not Ionic), with ionic-webview. I’m trying to use cordova-geolocation plugin to get current-location and device-orientation (compass heading) with a “location.service” I created.
Im using:

• @angular/cli 7.3.9
• cordova-lib@9.0.1
  • platforms:
    • android 8.1.0
    • ios 5.1.1
  • plugins (shorten):
    • cordova-plugin-ionic-webview 4.1.1 “cordova-plugin-ionic-webview”
    • cordova-plugin-geolocation 4.0.2 “Geolocation”

It used to work both on android and ios, now on ios, I get the location, but with an error for device orientation.

[blocked] Access to geolocation was blocked over insecure connection to ionic://localhost.

Geolocation PositionError {code: 1, message: “Origin does not have permission to use GeolocThis text will be blurredation service”

in my *.plist file:

VLNcR1538×412 42.2 KB

My location.service:

import {Injectable} from '@angular/core';
import {BehaviorSubject, combineLatest, fromEvent, Observable, of, timer} from 'rxjs';
import {HttpClient} from '@angular/common/http';
import {map, switchMap} from 'rxjs/operators';
import { Globals } from '../globals';

export interface DefiLocation {
  accuracy: number;
  altitude: number;
  altitudeAccuracy: number;
  heading: number;
  latitude: number;
  longitude: number;
  speed: number;
  compass: number;
}

@Injectable({
  providedIn: 'root'
})
export class LocationService {
  errorMessage$: string;
  currentLocation$: BehaviorSubject<{
    accuracy?: number,
    altitude: number,
    altitudeAccuracy: number,
    heading: number,
    latitude: number,
    longitude: number,
    speed: number
  }> = new BehaviorSubject({
    accuracy: 0,
    altitude: 0,
    altitudeAccuracy: 0,
    heading: 0,
    latitude: 32.5,
    longitude: 35,
    speed: 0,
  });

  currentCompass$: BehaviorSubject<number> = new BehaviorSubject(0);
  currentCompass: number = 0;
  currentPosition: {
    accuracy: 0,
    altitude: 0,
    altitudeAccuracy: 0,
    heading: 0,
    latitude: 32.5,
    longitude: 35,
    speed: 0,
  };
  locationTimer;
  sendLocationError: boolean = true;

  constructor(public globals: Globals) {
    this.isCurrentPosition$.next(true);
    this.trackMe();
  }

  private trackMe() {
    if (this.globals.iphone) {
        window.addEventListener('deviceorientation', (event) => {
          this.currentCompass$.next(Math.round(event['webkitCompassHeading']));
        });
      // }
    } else {
      window.addEventListener('deviceorientationabsolute', (event) => {
        this.currentCompass$.next(360 - Math.round(event['alpha']));
      }, true);
    }


    if (navigator.geolocation) {
      this.locationTimer = timer(0, 100).subscribe(tick => {
        navigator.geolocation.getCurrentPosition((position) => {
          this.currentLocation$.next(position.coords);
          this.isCurrentPosition$.next(true);
          this.sendLocationError = true;
        }, (err) => {
          this.isCurrentPosition$.next(false);
          this.sendError(err.message);
          console.log(err);
          this.errorMessage$ = err.message;
          console.log(this.errorMessage$);
        }, {
          enableHighAccuracy: true
        });
      });

    } else {
      alert('Geolocation is not supported by this browser.');
      this.sendError('navigator.geolocation = null ("Geolocation is not supported by this browser.")');
    }
  }

  getCurrentLocation$(): Observable<DefiLocation> {
    return combineLatest(this.currentCompass$.asObservable(), this.currentLocation$.asObservable())
      .pipe(
        map(([compass, location]) => {
            return {
              longitude: location.longitude,
              latitude: location.latitude,
              accuracy: location.accuracy,
              altitude: location.altitude,
              altitudeAccuracy: location.altitudeAccuracy,
              heading: location.heading,
              speed: location.speed,
              compass
            };
          }
        ));
  }

  sendError(error) {
    if (this.sendLocationError) {
      this.sendLocationError = false;
      window['cordova'].plugins.firebase.analytics.logEvent('user_location_failed', {param1: error});
      setTimeout(function() { this.sendLocationError = true; }, 5000);
    }
  }
}

### Detailed logs:

When I run cordova build ios , and then run it from Xcode on my iPhone (ios 13.4.1) and check Safari’s develop console:

qi8Fj1986×1278 448 KB

mxqf22574×1058 362 KB

Posts: 1

Participants: 1

Read full topic

@YXUN wrote:

Hi guys, I face a very common issue but I am struggling to solve it even after doing my homework and research. It’s the UIwebview and WKwebview issue. I hope you can take your time and read my post because I really want to solve this issue.

One of the most useful blogs is this https://ionicframework.com/blog/understanding-itms-90809-uiwebview-api-deprecation/ posted by one of the ionic team member itself BUT I tried, it’s not working.

My condition:

I used capacitor to wrap my Ionic 4 project (which shouldn’t be a problem because cap uses WKwebview) HOWEVER, I use two Cordova plugins in my project which are the inappbrowser and sqlite storage. I know that this maybe the reason of why my app was rejected by appstore BUT, I checked, they are the latest versions and shouldn’t be the issue too. (In the blog link, they suggest to update to the latest version, which I did). BUT, app still got rejected by appstore.

Hence, is there any advice or suggestion any good samaritan can give me? I have been struggling for a long time and will be super appreciative if anyone gives me a quick idea.

Thank you so much for your time reading and thanks in advance for helping.

FIRST PIC: Email of appstore rejecting my app

SECOND PIC: They said in the blog to update to the latest versions of plugins. (which I already have)

THIRD PIC: Version of my both Cordova plugins

Like

Comment

Share

Posts: 1

Participants: 1

Read full topic

@kresogalic wrote:

Hi guys, does anyone have an idea how this can be developed?

Screenshot 2020-05-07 at 14.37.38898×972 782 KB

Posts: 1

Participants: 1

Read full topic