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

Ionic Native Badge breaks ionic serve

June 17, 2020, 1:39 pm
$
0
0

From the Ionic Native docs:

Ionic Native

Ionic Native has its own internal logic to detect if it is inside of a native environment. Instead of throwing a runtime error, it will print a warning if it is not a native environment and there are no Cordova plugins available. The app won’t break and it will continue to work, although without the native functionality.

But as soon as I add Ionic Native Badge, ionic serve gives a white screen.

The Chrome console gives this error:

Error: This constructor is not compatible with Angular Dependency Injection because its dependency at index 3 of the parameter list is invalid.
This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.

Please check that 1) the type for the parameter at index 3 is correct and 2) the correct Angular decorators are defined for this class and its ancestors.
    at ɵɵinvalidFactoryDep (core.js:974)
    at NodeInjectorFactory.AppComponent_Factory [as factory] (ɵfac.js? [sm]:1)
    at getNodeInjectable (core.js:5993)
    at instantiateRootComponent (core.js:12819)
    at createRootComponent (core.js:26475)
    at ComponentFactory$1.create (core.js:34097)
    at ApplicationRef.bootstrap (core.js:43095)
    at core.js:42683
    at Array.forEach (<anonymous>)
    at PlatformRef._moduleDoBootstrap (core.js:42679)

The app works fine on device, but it’s nice to have ionic serve for quick visual testing. Any solutions or workarounds to using Badge (or maybe other native plugins) and keep ionic serve working?

1 post - 1 participant

Read full topic

↧
Search

Need help , please

June 17, 2020, 2:26 pm
$
0
0

Hi guys can you help me? i want to build an app for android and ios (ionic5) , so the app is about catalog of products with a search-bar inside of the catalog, so i dont know what kind of database use and why is so important a db in this type of apps… my app is not about e-commerce/woocomerce is just a catalog , Thanks :smiley:

1 post - 1 participant

Read full topic

↧
↧

Ion-img sometimes loaded image smallest

June 17, 2020, 2:45 pm
$
0
0

Hello, it’s my first topic here. I hope solved my problem.

First of all, this error doesn’t happens all the time.
I have a ion-img component that load image from url (s3). Sometimes, when loaded the image, the ionic render a small image.

Screenshot at Jun 17 18-31-57

My html:

<div *ngIf="news" class="embla" id="track">
    <div class="embla__container">
        <div *ngFor="let new of news" class="embla__slide">
            <img  (click)="open(new)" disabled [src]="new.imagePath" class="thumb-img"/>
        </div>
    </div>
</div>

When i inspect by browser, the image path is correct, but the pixel provided by ion-slide is smallest:

Screenshot at Jun 17 18-42-40
Screenshot at Jun 17 18-42-40860×272 53.4 KB

1 post - 1 participant

Read full topic

↧

Can we overwrite or use specific 'color=' for light and dark themes?

June 17, 2020, 4:09 pm
$
0
0

For example,

We are using this:

<ion-segment color="secondary">

Yet, I would like to use a tint or a shade of secondary for when my theme = dark. Can I differentiate on element level and overwrite the ‘color’?

If so, how?

1 post - 1 participant

Read full topic

↧

Proper way to import a whole .js file

June 17, 2020, 5:52 pm
$
0
0

I need to use a .js script inside of one of my components. What is the proper way to use a whole .js file in StencilJS?

I tried using the Require() funtion but I get this error.

image

Then I tried to import is with import * as Foo from './foo.js but it didn’t work, the file was considered undefined.

I’m converting my app from Angular to Ionic, if that can help.

1 post - 1 participant

Read full topic

↧
↧

Hide fab when keyboard is shown

June 17, 2020, 7:57 pm
$
0
0

I have a fab button at the bottom of the page that I want to hide when the keyboard shows up. The default behavior moves the bottom up above the keyboard.

How can I do it, so that it doesn’t move and hides ‘behind’ the keyboard?

1 post - 1 participant

Read full topic

↧

Getting error when try to build production with ionic pwa

June 17, 2020, 9:52 pm
↧

How can we get android version in ionic

June 17, 2020, 10:05 pm
↧
Search

Storage data in scss file

June 17, 2020, 10:45 pm
$
0
0

Is that possible that I get value from localStorage and use it in page scss file?

Logic:

  1. I have saved name of background file in local storage and I can access it in my ts file as background
  2. Now this background variable is pointed to my local image file such as assets/bg/01.jpg
  3. I wish to use this background variable in my scss file in order to have dynamic background (in case in future i changed the value in my local storage)

Is that possible?

1 post - 1 participant

Read full topic

↧
↧

Playstore app Update notification[Without exposing new api ]

June 17, 2020, 11:22 pm
$
0
0

Hello guys, as I have mentioned above, When I push a new version of the app to play store I need to send notification to the user telling that new version of app is available please update. Is there any ways that I can inform my customer about the app update?
Thanks in advance!

1 post - 1 participant

Read full topic

↧

Firebase issue in iOS 5.1

June 18, 2020, 12:25 am
$
0
0

Update FCM plugin using cordova-plugin-fcm-with-dependecy-updated for ios-5.1
Getting error in firbase import as ‘Firebase.h’ file not found on build.

1 post - 1 participant

Read full topic

↧

Guide to safely making modifications to plugins

June 18, 2020, 5:58 am
$
0
0

Does anyone know of, or have a guide on how to make changes to a plugin.

I’ve made two changes to the native audio plugin (fix the asset director from www to public and a change to make my app audio mix in with music the user may have playing) that are just code changes I have made in the NativeAudio.m file and so will be overwritten on any plugin reinstalls etc.

I’m guessing I need to checkout the native audio repo, make the changes and the publish to npm? This seems pretty over the top for 15 character changes so any other suggestions would be great.

1 post - 1 participant

Read full topic

↧

Screens splitting vertically unintentionally

June 18, 2020, 6:23 am
$
0
0

I’m using @angular/router in an Ionic 5 project. It has both tabbed and side menu navigation. Recently navigating through the screens has resulted in vertical split loading. This is happening intermittently but regularly on both iOS 13.4.1 and multiple Android devices.

I’m suspect that it might have something to do with the move from UIWebView to WKWebView.

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { FeedGuard } from './services/feed-guard.service';
import { AuthGuardService } from './services/auth-guard.service';

const routes: Routes = [
  { path: '', loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule),
                                canActivate: [AuthGuardService], canDeactivate: [FeedGuard] },
  { path: 'account', loadChildren: () => import('./pages/account/account.module').then(m => m.AccountPageModule) },
  { path: 'onboarding', loadChildren: () => import('./pages/onboarding/onboarding.module').then(m => m.OnboardingPageModule) },
  { path: 'settings', loadChildren: () => import('./pages/settings/settings.module').then(m => m.SettingsPageModule) },
  { path: 'tabs', loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule),
                                canActivate: [AuthGuardService], canDeactivate: [FeedGuard] },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

The menu is pretty boilerplate:

        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item routerDirection="root" [routerLink]="[p.url]" class="coro-menu-item">
            <ion-icon class="coro-menu-icon" name="{{p.icon}}"></ion-icon>
            <div>
            <label class="ion-text-wrap coro-menu-title">{{p.title}}</label>
            <p class="ion-text-wrap coro-menu-subtitle">{{p.subTitle}}</p>
            </div>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>

But switching between screens with the side menu leads to the screen splitting as in the images. I’m inclined to think it’s taking it’s width from the side menu as it closes rather than the screen it’s replacing.

Screenshot_20200618_123318_com.coroflo.companion
Screenshot_20200618_123318_com.coroflo.companion1080×2240 289 KB
Screenshot_20200618_123326_com.coroflo.companion
Screenshot_20200618_123326_com.coroflo.companion1080×2240 290 KB

2 posts - 2 participants

Read full topic

↧
↧

How to correctly use deeplinks?

June 18, 2020, 6:23 am
$
0
0

Hi,
I wish that a third-party app was able to open my app using Deeplinks.
I’m passing to this third-party app the url_scheme to open: myapp://myapp.com/payments

My app is an Ionic4 app with Cordova plugins and this plugin to manage Deeplinks.

The problem is that, when the redirect should take place, nothing happens.

I’ve defined the Deeplink routing in this way:

import { Deeplinks } from '@ionic-native/deeplinks/ngx';

constructor(private deeplinks: Deeplinks) { }

this.deeplinks.route({
    '/payments': {'payments': true}
   }).subscribe(match => {
     console.log('Successfully matched route', match);
     alert(JSON.stringify(match));
   }, nomatch => {
     alert(JSON.stringify(nomatch ));
     console.error('Got a deeplink that didn\'t match', nomatch);
   });

If I open a web page from the mobile with this content and I click on the link:

<HTML>
  <a href="myapp://myapp.com/payments">CLICK ME</a>
</HTML>

My Ionic app opens correctly.
From the third-party app, my app doesn’t open.

So the question is, am I missing some steps in setting up Deeplinks?
Should I do something on the domain “myapp.com” ?

Thank you very much

Claudio

1 post - 1 participant

Read full topic

↧

Ionic 5 router direction

June 18, 2020, 7:04 am
$
0
0

Hi

I’m using Ionic 5 and router navigation from the controller as it’s even driven so can’t be on a routerLink.

this.router.navigate(['/user-profile']);

I can’t find any references to how I make the page move from right to left rather than then default left to right as I believe was possible with routerDirection in earlier versions of Ionic.

Does anyone know how to specify the direction the page swipes when navigating like this please?

Thanks!

1 post - 1 participant

Read full topic

↧
Search

Seeking experienced Ionic/Cordova Developer

June 18, 2020, 7:05 am
$
0
0

We have an Ionic/Cordova/Angular mobile application which needs to have all remaining instances of UIWebView removed in place of WKWebView. This may result in a myriad of upgrades to plugins, Ionic, Cordova, and perhaps the Angular versions.
Knowledge of Azure DevOps (for version control), MVC and C# is an asset as the backend is hosted on an Azure MVC web application. You would work directly with our companies developers and our consultant team to provide a solution.
Applicants based in Canada will be given preference as our company is located in Ontario, Canada.

3 posts - 3 participants

Read full topic

↧

How to hide play symbol of video autoplay of ionic app?

June 18, 2020, 7:13 am
$
0
0

So, I have a video playing on the background of an Ionic app. However, when it starts playing, the play symbol appears. Click here to see a video of what happens

As you can see, before playing the video, this symbol pops up and I want to hide it.

Html:

<ion-header [translucent]="true">
  <ion-toolbar color="dark">
    <ion-title style="text-align: center;">
      mDL
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <video class="video" autoplay muted loop>
    <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
  </video>
</ion-content>

CSS:

.video {
  position: fixed;
  z-index: 2;
  object-fit: fill;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}

1 post - 1 participant

Read full topic

↧
↧

"PushNotifications does not have web implementation" + no cordova + runtime syntax err :(

June 18, 2020, 7:22 am
$
0
0

I’m trying to port an ionic app and have it building and running, however in android emulator AND on device:

  • PushNotifications thinks it’s running in a browser - why could this be? This is the only code I’ve ported to use something from capacitor and I get “PushNotifications does not have web implementation”

  • various ionic native/cordova plugins are complaining that cordova doesn’t exist/is not available. I thought they were supposed to work but this could be the same issue as above?

  • I see an error early on: 'E/Capacitor/Console: File: capacitor-runtime.js - Line 24140 - Msg: Uncaught SyntaxError: Unexpected token :" - could this be the source of all the issues? I haven’t been able to find out anything more about this error

I’m using capacitor 2.2.0 - I don’t see these issues in a new basic app but I don’t know how best to go about fixing my existing one…

Appreciate any help!

Crawford.

1 post - 1 participant

Read full topic

↧

Popover is always on center

June 18, 2020, 7:34 am
$
0
0

Hi, I’m using ionic 5 with react. I’m trying to make a component with a popover but the popover is always in the center (sorry for my English)

Here is my code

import React, { useState } from "react";
import { IonButton, IonIcon, IonPopover, IonContent, IonList, IonItem } from '@ionic/react'
import { ellipsisVertical } from 'ionicons/icons';
import "./ProductItem.css";

type props = {
  img: string;
  name: string;
  id: string;
  buyPrice: number;
  sellPrice: number;
  stock: number;
  category: string;
};

export const ProductItem = ({
  img,
  name,
  id,
  buyPrice,
  sellPrice,
  stock,
  category,
}: props) => {

  const [showPopover, setShowPopover] = useState(false);

  return (
    <div className="product-container">
      <div className="product">
        <div className="prod-data">
          <div className="prod-data-info">
            <div className="prod-photo" id="prod-photo">
              <span className="photo">{img}</span>
            </div>
            <div className="prod-name">{name}</div>
            <div className="prod-id">{id}</div>
            <div className="prod-bp">{buyPrice}</div>
            <div className="prod-sp">{sellPrice}</div>
            <div className="prod-stock">{stock}</div>
            <div className="prod-category">{category}</div>
          </div>
          <div className="prod-actions">
            <IonButton className="prod-action-button" size="small" color="primary">
              Add to Cart
            </IonButton>
            <IonPopover
              isOpen={showPopover}
              showBackdrop={false}
              keyboardClose={true}
              animated={true}
              mode="ios"
              onDidDismiss={e => setShowPopover(false)}
            >
              <IonContent>
                <IonList>
                  <IonItem>
                    lorem
                  </IonItem>
                  <IonItem>
                    ipsum
                  </IonItem>
                </IonList>
              </IonContent>
            </IonPopover>
            <IonIcon ios={ellipsisVertical} size="small" className="prod-extra-actions"
            onClick={() => setShowPopover(true)} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProductItem;

Thanks!!

1 post - 1 participant

Read full topic

↧

When I add FCM plugin Getting this error

June 18, 2020, 9:38 am
↧
Viewing all 71531 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>