Quantcast
Channel: Ionic Forum - Latest posts
Viewing all 228514 articles
Browse latest View live

Run capacitor without react-scripts

$
0
0

Hello. It’s blocker for me. I have an existing project and would like to use ionic, but I have my own build pipeline, incompatible with react-scripts. So I have to rewrite the whole project to fit CRA requirements to use ionic.

By the way, while angular-cli is a rich and powerful tool and de-facto the standard in angular world, react-scripts is just a bunch of non-configurable build scripts with tons of narrow limitations.

Is it possible to unbind scripts with react-scripts and (for example) bind it with some npm scripts? (when I have to provide some scripts in package.json scripts section)

It would be a fat lot of good if you could remove this blocker


Should we stop using Ionic ? No way to perform end to end testing of native functionality

$
0
0

I’m posting this question after not getting any proper way to execute end to end testing of native functionalities in Ionic. I have been on it since a week.
I have referred this official link: https://ionicframework.com/docs/building/testing It just speaks about testing Ionic app in browser. There are no explanation for testing the Ionic native functionalities.
I have also read this link : https://ionicframework.com/integrations/appium which does nothing other than redirecting to official Appium page.
I posted a question asking best approach to end to end testing in Ionic, almost 6 days ago and I haven’t received any reply for that. (Best approach for E2E testing)
Let me know is there any preferred way to perform end to end testing Ionic app with native functionality or not. Thanks in advance.

Can Capacitor be run in Ionic v3 PWA

$
0
0

Is it possible to include Capacitor particularly it’s push notification plugin in Ionic v3 and build it as PWA?

Any sample example of Ionic v3 and Capacitor?

Use Script to connect with web api after build

$
0
0

thank you for the answer, but it’s not what I’m looking for, i want that the application be configurable when the client put it on his server (iis), so he can change the URL whenever he wants from a config file.

Ionic 3 How to display a toast on modal?

$
0
0

Thank you for your answer. I will change it to be ionic/user friendly way in a future. For know I left it without sending Toast to parent components. Surprisingly it works okay.

RemoveEventListener inside a ionViewWillLeave

$
0
0

ionViewDidLoad() {
window.addEventListener(‘click’, eventClick);
}

eventClick ( e: any){
console.log(e.target);
}

ionViewWillLeave(){
window.removeEventListener(‘click’, eventClick);
}

Where is maxLength on ion-input?

$
0
0

you can set type as string and use pattern to show keypad as number:


<ion-input type="text" pattern="[0-9]*" maxlength="3"></ion-input>

Ionic 5 and Oauth2 integration

$
0
0

Hello everyone,
I want to integrate my ionic 5 application with my custom Oauth2 which uses internally google auth
these are steps need to be done to achieve this
1.my users will redirect to my custom OAuth login page
2.from that screen they can log in using google, google returns token to my custom OAuth
3.using that token my custom OAuth authenticate a user
4.return that to my ionic application
on the last step, I am stuck
I am using an in-app browser plugin to achieve this, I won’t able to get any response of any request.
in-app browser events are not firing if in


How to avoid breaking of text into two lines

$
0
0

My text is breaking due date into two lines.How to avoid that


<ion-header>
  <ion-toolbar>
    <ion-title>Fees</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid fixed="true">

  <ion-row><h1>Grand Total</h1></ion-row>
  <ion-row>
    <ion-col>
    Amount 
    </ion-col>
    <ion-col>
     Discount
    </ion-col>
    <ion-col>
     Fine 
       </ion-col>
       <ion-col>
         Paid
       </ion-col>
       <ion-col>
        Balance
      </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
    $22946 
    </ion-col>
    <ion-col>
$0
    </ion-col>
    <ion-col>
     $0 
       </ion-col>
       <ion-col>
         $39734
       </ion-col>
       <ion-col>
      $-16788
      </ion-col>
  </ion-row>

</ion-grid>
<ion-grid fixed="true">
<ion-row><h1>Overheads /operating costs</h1></ion-row>
<ion-row>
<ion-col>
  Due Date
</ion-col>
<ion-col>
 Amount
</ion-col>
<ion-col>
Paid
</ion-col>
<ion-col>
 Balance
</ion-col>
<ion-col>
  status
</ion-col>
</ion-row>
<ion-row>
  <ion-col>
    2020-01-01
  </ion-col>
  <ion-col>
$1619
  </ion-col>
  <ion-col>
   $6518
  </ion-col>
  <ion-col>
    $-4899
   </ion-col>
   <ion-col>
     <ion-button color="danger" class="round">unpaid</ion-button>
   </ion-col>
  
</ion-row>

</ion-grid>
<hr>

 
  
</ion-content>

Sqlite and windows on ionic3

$
0
0

I want to run sqlite on windows using ionic3
I have created a blank ionic project and everything is working fine when I run the command
ionic cordova build windows

After I add the sqlite plugins
ionic-native/sqlite
ionic-native/sqlite-porter

It is giving error

C:\Program Files (x86)\MSBuild\14.0\bin\Microsoft.Common.CurrentVersion.targets(724,5): error : The OutputPath property
 is not set for project 'SQLite3.UWP.vcxproj'.  Please check to make sure that you have specified a valid combination o
f Configuration and Platform for this project.  Configuration='debug'  Platform='Win32'.  You may be seeing this messag
e because you are trying to build a project without a solution file, and have specified a non-default Configuration or
Platform that doesn't exist for this project. [C:\CC\NativeApps\Sample-Windows\sample-windows\plugins\cordova-sqlite-st
orage\src\windows\SQLite3-WinRT-sync\SQLite3\SQLite3.UWP.vcxproj]
Error: C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe: Command failed with exit code 1
[ERROR] An error occurred while running subprocess cordova

Here is my package.json

{
  "name": "samplewindows",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "4.20.0",
    "@ionic-native/splash-screen": "4.20.0",
    "@ionic-native/sqlite": "^5.20.0",
    "@ionic-native/sqlite-porter": "^5.20.0",
    "@ionic-native/status-bar": "4.20.0",
    "@ionic/storage": "2.2.0",
    "cordova-android": "6.3.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.1.3",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^4.0.0",
    "cordova-windows": "5.0.0",
    "ionic-angular": "3.9.9",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "uk.co.workingedge.cordova.plugin.sqliteporter": "^1.1.1",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.4",
    "typescript": "2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-sqlite-storage": {},
      "uk.co.workingedge.cordova.plugin.sqliteporter": {}
    },
    "platforms": [
      "android",
      "windows"
    ]
  }
}

IonInfiniteScroll does not trigger event if search bar is enabled

$
0
0

I have a page where i am displaying the list of data using the load more functionality(i.e, IonInfiniteScroll).
IonInfiniteScroll works fine. But the problem is when i try to search data using element, IonInfiniteScroll will not work. Its not triggering any event when i reach the bottom of screen.
Can anyone tell me what could be the issue.

Thanks in advance!

Spotify Auth Plugin down due to discontinued spotify repo: Any other possibilities?

Video recording issue in ionic media capture plugin

$
0
0

Hi,

I’m trying to record video with low size in android platform using “cordova-plugin-media-capture” plugin. Able to record video, but video size is too high. I used “cordova-plugin-video-editor” to compress video but its taking too much of time to compress.

For Eg: To compress 1min of video, it takes almost 50 sec to compress, which i don’t want.

previously i used “https://android-arsenal.com/details/1/719” CWAC-Cam2 android library. where i created custom plugin to record video and to meet my requirement. But now this library got deprecated. Please suggest me if any 3rd party android libraries or any ionic cordova plugins available, which satisfy my below requirements.

Video Requirement:

  1. Control to access flash light
  2. Should compress captured video with less amount of time
  3. Should convert video format to “.mp4” always

CUSTOM SLIDER ionic 4

$
0
0

We have temporarily found a solution to look similar with this scss lines:

 .swiper-slide {
        transform: scale(1);

        &-active {
          overflow-x: visible;
          transform: scale(1.5);
          z-index: 10000;
        
        }
      }

and options:

public slideOpts = {
    slidesPerView: 3,
    initialSlide: 1,
    centeredSlides: true
  };

Using ModalController inside a service

$
0
0

For A)
Thanks to nikolapeevski, i think he shares with us the answer ands it’s working so nice ( so cool )

For B) https://ionicframework.com/docs/api/modal do the job

For mine issue, i found a solution, with your two answers:
Instead of declare ModalPage in @NgModule MainPage,
I Create the global @NgModule SharedModule (import in app.module) and inside declare the ModalPage.

It’s like to declare up to hill that the ModalPage exists.

For information MainPage is not the basic homePage, it will be called later.

======== BEFORE (failed) ========

@Module MainPage => import and declare { ModalPage }
|
- modals | - ModalPage
|
- services | - modal.service => ( ouch ! where is ModalPage ? )

======== AFTER (work) ========

@Module Shared => import and declare { ModalPage }

@Module MainPage
|
- modals | - ModalPage
|
- services | - modal.service => ( ModalPage is alive ! )

I try to applied SOLID concept ( https://en.wikipedia.org/wiki/SOLID ),
espacially S : Single responsibility principle : A class should only have a single responsibility.
and i think it is not the goal of MainPage to manage its modals perhaps i’m wrong,
that’s why i try to transform sentence:
“MainPage open ModalPage” to “MainPage use ModalService to open ModalPage”.

I’m not sure to keep this solution because declare ModalPage outer its functionnal module, it’s confused, i would probably keep basic sentence “MainPage open ModalPage”

Many thanks for your time, and hope could help one time.

Late Frenchy answer ( because as French DJ Laurent Garnier said “Go to Sleep”, i prefer “Wake up” )

Best regards


How to avoid breaking of text into two lines

$
0
0

You have to use grid view. And usage will be like <ion-col col-3> Due Date </ion-col> OR <ion-col size="3"> Due Date </ion-col>

Ionic ios header not same size

iOS 13.2 kill() returned unexpected error 1

$
0
0

Is this error a spam or could it lead to app crash ?
I have the same error and also my app is stuck on the splash screen after i use the cordova-plugin-ionic-webview plugin v2.3.1 in an ionic 3 app.

Problem with external link [net::Err_FAILED]

How to use capacitor-udp plugin

$
0
0

HI,

testing the plugin https://github.com/unitree-czk/capacitor-udp, but getting the following error when running in android simulator:

TypeError: Cannot read property ‘create’ of undefined

My code is the following:

async process() {
        try {
            // await UdpPlugin.closeAllSockets();

            const info = await UdpPlugin.create();
            await UdpPlugin.bind({socketId: info.socketId, address: '0.0.0.0', port: 5500});

            await UdpPlugin.addListener('receive', data => {
                console.log('receive:', data);
            });

            await UdpPlugin.addListener('receiveError', error => {
                console.log('receiveError:', error);
            });

            await UdpPlugin.send({
                socketId: info.socketId,
                address: '226.1.1.1',
                port: 3140,
                buffer: 'hello'
            });
        } catch (e) {
            console.log('error:', e);
        }
    }

Someone have a hint, what is the problem?

Viewing all 228514 articles
Browse latest View live


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