@AvkAvk wrote:
showTrips() {
let tripAlert = this.alertCtrl.create();
tripAlert.setTitle(‘Trips’);
for (const trip of this.trips) {
tripAlert.addInput({
type: ‘radio’,
label: trip,
value: trip
});
}
tripAlert.addButton(‘Cancel’);
tripAlert.addButton({
text: ‘Ok’,
handler: trip => {
this.drawTrip(trip);
return true;
}
});
tripAlert.present();
}
Posts: 1
Participants: 1
@deepaksharma15 wrote:
Trying to generate resources in ionic v3 using the command – ionic cordova resources but it failed with the HTTP error 503.
Tried on healthy network also but suddenly it’s not working for last 1 day. Before it was working properly.
Collecting resource configuration and source images - done!
Filtering out image resources that do not need regeneration - done!
Uploading source images to prepare for transformations - failed!
HTTP Error 503: POST https://res.ionic.io/api/v1/upload<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <title>Application Error</title> <style media="screen"> html,body,iframe { margin: 0; padding: 0; } html,body { height: 100%; overflow: hidden; } iframe { width: 100%; height: 100%; border: 0; } </style> </head> <body> <iframe src="//www.herokucdn.com/error-pages/application-error.html"></iframe> </body> </html>
Posts: 1
Participants: 1
@Pratikjaiswa15 wrote:
I am using firebase phone-authentication in my ionic 4 app. I have successfully implemented jwt authentication. If the token is available I redirect users to the main page else redirecting to the login page.
But here comes the problem on the login page. If the user is new(coming for the first time) then I want to redirect to the details page to get some other data like email, name, else (old user) redirect to the main page.
The problem is I don’t have different buttons for login and signup in my app. The same login is used for both login and register
What is the best solution to check if the user is new or old?
Here is my code
authentication.service.ts
authenticationState = new BehaviorSubject(false); constructor(private storage: StorageService, private plt: Platform, private router: Router) { this.plt.ready().then(() => { this.checkToken(); }); } checkToken() { this.storage.get(TOKEN_KEY).then(res => { if (res) { this.authenticationState.next(true); } }) } login() { return this.storage.set(TOKEN_KEY, 'Bearer 1234567').then(() => { this.authenticationState.next(true); }); } logout() { return this.storage.clear().then(() => { this.authenticationState.next(false); this.router.navigate(['home']) }); } isAuthenticated() { return this.authenticationState.value; }app.component.ts
constructor(private authenticationService: AuthenticationService){ this.authenticationService.authenticationState.subscribe(state => { if (state) { this.router.navigate(['menu/items']); } else { this.router.navigate(['home']); } }); }home.page.ts
if(old user) { // redirect to main page } else { redirect to details page }
Posts: 1
Participants: 1
@Ramji1980 wrote:
i am getting the below error how to resolve this
Access to XMLHttpRequest at ‘http://localhost/rmfdevmobile/public/api/getpodcasts’ from origin ‘http://localhost:8100’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.
Posts: 1
Participants: 1
@lhk wrote:
I would like to display dynamic HTML content in an ionic (react) app and enrich it with ionic components.
I know, this is highly discouraged. After browsing the forum, there are quite a few questions like this.
And the answer is always: Don’t have an API that returns HTML, have an API that returns data. Then use that data to inflate your components.Which makes a lot of sense. But I think in this case it’s really justified:
I would like to display an ebook in epub format. That format is basically a collection of static websites, and some special files with metadata.To display a chapter from the book, I can extract its body and use
dangerouslySetInnerHTMLto add it to one of my components. Or I can supply the entire html page assrcDocon aniframe.This works, my barebones ereader is up and running. But now I would like to enrich the text in the book with some custom components for markup. Here I would be really grateful for some feedback and discussion.
The first thing I realized is that this is near impossible with React. You can use dangerouslySetInnerHTML to embed dom nodes inside of the virtual dom. But then there is no going back, you can’t get components that need to live on the virtual dom in this dangerous inner HTML. That means that I can’t have my react components inside of the ebook markup.
Ok, but what about web components. They live in the dom, surely I can embed those in the ebook. It took me very long to realize that I can’t use the react components, like
<IonButton>for this. Instead it’s<ion-button>and an empty import statementimport "@ionic/core"to get the bundler to work. But now I can add Ionic components in the dangerous inner HTML. There are ionic styled buttons and badges in the ebook now.
This does not work for iframes, since they don’t share JS and CSS with the parent page. I have not yet figured out how to inject theimport "@ionic/core"into the iframe (in bundled code, no CDN).So it’s possible to get the ionic web components inside of dynamic markup. This is nice, but I need more functionality. The markup in the book needs to display popovers and make callbacks.
I could use jQuery, to wire up the custom logic with these ionic web components. This seems like a bad idea. Have jQuery in a React codebase, mix declarative and imperative programming, ew…
So how do I get this set up properly?
Is this a good usecase for a web component compiler like Stencil? I could mix react components and stencil components in my project. And embed the stencil components in the dynamic html markup, to still get consistent ionic styling.
Is there a good way to wire this up?
I mean, stencil could encapsulate some of the logic in these custom components.
But I still need to find them and hook up callbacks.At this point I’m very confused and would be really happy for some discussion.
By the way, my processing pipeline looks somewhat like this:
- load epub and parse manifest data -> list of html pages as text
- process html page -> still text, but maybe with embedded
<custom-tags>- reader component is loaded -> node in the virtual dom where custom html needs to be displayed
Posts: 1
Participants: 1
@NthabyMogoboya wrote:
I want to disable modal dismiss when you click outside the modal. I’ve tried many different examples but didn’t work.
async openExtras(){
let modal = await this.modalCtrl.create({
component: ExtrasPage,
cssClass: ‘extras’
});
modal.present();
}
Posts: 1
Participants: 1
@maracujaacademy wrote:
Hi,
Live update are not working on my side.
The core is developed with reactjs, built with webpack
What i did :
- Add the Appflow SDK, the strings.xml is now modified
- commit & push
- Build the native .apk from Appflow GUI
- Install the .apk on my device
- Change one string in the code
- Commit
- Build a Web Deploy and assign it to the Production Channel
- As the update method is “auto” i close the app, relaunch it, but the modified string is not updated
Any suggestion on what i could missed ?
Thanks
strings.xml
<resources> <string name="ionic_app_id">XXXXXXXXX</string> <string name="ionic_channel_name">Production</string> <string name="ionic_update_method">auto</string> </resources>ionic info
[11:35:24]: $ ionic info [11:35:25]: ▸ Ionic: [11:35:25]: ▸ Ionic CLI : 6.2.2 (/usr/local/nvm/versions/node/v10.19.0/lib/node_modules/@ionic/cli) [11:35:25]: ▸ Ionic Framework : @ionic/react 5.0.5 [11:35:25]: ▸ Capacitor: [11:35:25]: ▸ Capacitor CLI : 1.5.1 [11:35:25]: ▸ @capacitor/core : 1.5.1 [11:35:25]: ▸ Utility: [11:35:25]: ▸ cordova-res : 0.10.0 [11:35:25]: ▸ native-run : not installed [11:35:25]: ▸ System: [11:35:25]: ▸ NodeJS : v10.19.0 (/usr/local/nvm/versions/node/v10.19.0/bin/node) [11:35:25]: ▸ npm : 6.13.4 [11:35:25]: ▸ OS : Linux 4.14
Posts: 1
Participants: 1
@lhk wrote:
After stumbling over the lack of interop between react and web components, I’m now seriously considering to move to preact (or even vue, but there I have no experience yet).
As far as I understand, this should be pretty much seamless. Ionic components are web components and preact should be compatible.
After searching the forums, I found this thread : @ionic/react has issues with Preact + preact/compat, @ionic/preact?
Apparently when using more complicated components, like IonModal, there are problems.
But what surprises me is, why use the react components at all?
Won’t they try to set up specifically react virtual dom entries?
And the react system of virtual events is incompatible with the dom, and preact, right ?So I thought the right way to go would be to do
import "@ionic/core"and then to use elements like .After searching the web, I found this demo project https://github.com/elylucas/ionic-preact-app
It also uses the react components.Is ionic ready for usage with preact?
Basically I would only want to use the neat library of Ionic components and the ionic cli to bundle to capacitor.
Posts: 1
Participants: 1
@markodemo wrote:
Hi!
Please help if you have expirience with same thing.Problem: uploading images to server.
Thing i dont understand: images are taken on the same way with camera.
Error:FileTransferError {code: 3, source: “file:///storage/emulated/0/Pictures/day1_TH_233.png”, target: “http://xxx.xx.xx.xxx:xxxx/api/image_upload”, http_status: null, body: null, …}
code: 3
source: “file:///storage/emulated/0/Pictures/day1_TH_233.png”
target: “http://xxx.xx.xx.xxx:xxxx/api/image_upload”
http_status: null
body: null
exception: “Connection reset”Code for sending images:
fileTransfer.upload(item.put, test.my.API + 'image_upload', options).then((data) => { var res = JSON.parse(data.response); if (res.success === false) { } else { } }, (err) => { console.log(err); })Actually everything works fine, there is more code that is not need for description. The problem is that 4 images are sent but on 5-th i got that error code 3, pictures are taken on same way and upload is always the same.
Posts: 1
Participants: 1
@sh41n4 wrote:
Hi, I am making a IOS app using Ionic 4 and React. I want to animate my popover ( https://ionicframework.com/docs/api/popover ) using enterAnimation attribute, but couldn’t make it work. Can anyone please provide any example of popover animation with enterAnimation using Ionic 4 and React? There are some examples of the popover animation in Angular out there, but couldn’t find any React example.
Posts: 1
Participants: 1
@danielpt wrote:
Ionic 3.
Hello, im using , but i have a big problem.
When im scrolling horizontally, sometimes i can scroll vertical. And this is so ugly. Have a way to stop the scroll vertical while scrolling horizontal?
Posts: 1
Participants: 1
@jschwenk wrote:
I used the command
ngx cap open androidto open my Ionic 5 project in Android Studio like described here. This works fine.
In my app, i`m connecting to server which returns json data needed by my app. This connection does not seem to work, I only have the loading animation in my app.
How can I debug this? It is working in the PWA version and on my Ionic testserver, but the app has a problem connecting. I need an error message or something, to know what goes wrong.
What is a good way to fix such problems? Can I output or log something in android studio from the typescript code?
I created a stackoverflow entry, too, but did not get an answer yet:
Posts: 1
Participants: 1
@jschwenk wrote:
Hi,
my app connects to a server, which returns JSON. I have CORS headers active on my server, so that it can not be cross-origin requested by every domain.
When I output the HTTP_REFERER in my server, when the compiled capacitor app requests from the server, the referrer is http://localhost. So I would have to allow the REFERER “localhost” to access my server. I don`t really like the idea. Is it possible to change this somehow, so hat the REFERER is “my-unique-referrer”?
Thank you!
Posts: 1
Participants: 1
@ismaelsky wrote:
[ng] This likely means that the library (@ionic-native/device/ngx) which declares Device has not been processed correctly by ngcc, or is not compatible with Angular Ivy.
Posts: 1
Participants: 1
@zouelfikar wrote:
I don’t usually post on forums but i ran into an issue where I had to use an ion-range inside an ion-slide… My problem is when trying to change the value of the range bar (sliding the value) the page also slides producing unwanted behavior. Any thoughts on this?
Posts: 1
Participants: 1
@wwwguy wrote:
When trying to run the ionic example demo app on an android device I get the following error.
> cordova build android > native-run android --app platforms/android/app/build/outputs/apk/debug/app-debug.apk --forward 8100:8100 [native-run] Error: spawn /Users/mike/Library/Android/sdk/platform-tools/adb ENOENT [native-run] at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19) [native-run] at onErrorNT (internal/child_process.js:469:16) [native-run] at processTicksAndRejections (internal/process/task_queues.js:84:21) [ **ERROR** ] **An error occurred while running subprocess** **native-run** **.**It appears “platform-tools” is in a different location now? When I look in the android sdk folder there are now 2 nested folders like “platform-tools/platforms-tools/” which is where the adb file is now located. Where do I need to update the config in order to run ionic on android devices now?
Posts: 1
Participants: 1
@heardnetwork wrote:
I have some code in a legacy app that I can’t find anything about at all.
This appears on a few pages - if i uncomment it the whole page throws up errors. I’ve googled and can’t find anything at all about @param. I didn’t code the page so i don’t know what they are or if they’re needed.
If anyone could point me in the right direction as to what they are or if i can remove them. They’re not in all pages of the app, but quite a few. Removing them doesn’t seem to do anything, but i want to be sure.
The export class and contractor are all there and working as they should
thanks
/**
- This is the page where the user can add, view and search for groups.
- @param {App} app
- @param {DataProvider} dataProvider
- @param {LoadingProvider} loadingProvider
- @param {AngularFireDatabase} angularFireDatabase
- @param {AlertController} alertCtrl
- @param {Geolocation} geolocation
- @param {Events} events
- @param {OneSignal} oneSignal
*/
Posts: 1
Participants: 1
@keber wrote:
Hi all,
has anyone successfully integrated Braintree on his Ionic (preferably iOS) app?
I’m really confused what I need and how to setup everything correctly.My main goal is using PayPal with Braintree since the PayPal Cordova Plugin uses UiWebView which won’t be accepted by Apple starting from April.
What I have done so far:
- Install Braintree Ionic and Cordova plugin (https://ionicframework.com/docs/native/braintree)
- Setup Braintree account, setup Braintree sandbox account
- Insert PayPal Sandbox credentials in my Braintree account under “Processing Options”
- Insert and setup the sample code from https://ionicframework.com/docs/native/braintree
I can run the Ionic app and also process a sample checkout via credit card.
Although if I click on “PayPal” instead choosing the credit card option, I always get the error message: PayPal app switch is missing a returnURLScheme.I really don’t know how to fix that, I already checked Google, Stackoverflow but didn’t found the issue. Something seems to be missing in my config but I don’t know what.
Thank you in advance for any help!
Posts: 2
Participants: 2
@IonicProgramming wrote:
I am using Ionic React (version 5.0.4), and changed the “reorder-group.js” file in the following path, in order to add some features to the
<IonReorderGroup>tag:MyProject\node_modules@ionic\core\dist\collection\components\reorder-group\reorder-group.js
However, when I serve the app (
npm run start) or build it (npm run build) there is no change.Why is it happening and how can I solve it? (maybe it has something to do with cache files or anything similar?
)
Thanks in advance!
Posts: 3
Participants: 3
@ioclaudio wrote:
Hi,
on an Ionic4 app, I have a problem with the splash screen, that doesn’t close.
In debug mode I can see this error:vendor.js:77445 Native: tried calling SplashScreen.hide, but the SplashScreen plugin is not installed. pluginWarn @ vendor.js:77445 Install the SplashScreen plugin: 'ionic cordova plugin add cordova-plugin-splashscreen' pluginWarn @ vendor.js:77457The strange thing is that the splash screen is installed, and until yesterday the app was working.
What could be the problem according to you?Thank you very much
claudio
Posts: 2
Participants: 2
Collecting resource configuration and source images - done!
Uploading source images to prepare for transformations - failed!
)