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

Ionic + angular PWA freezes sometime and won't be able to navigate through pages

$
0
0

Well, not much to go from, and not a very nice bug to catch.

Are you sure there are no console.logs? Have you tried other devices? Maybe even iOS?

It is fairly important to catch some sort of message, otherwise, you need to strip down parts of the app until you found the part that may cause this…

Another thought could be is to put it in an android container using capacitor or even cordova. And then use ADB DEBUG to see if at OS level something happens…

In fact, maybe use ADB DEBUG at all with the PWA. ADB also catches browser issues.


Network error when axios call has parameters on IOS

$
0
0

Hi,

No I’m on macOS Big Sur 11.4 and Xcode 12.5.1

And yes all my endpoints are on https. All is ok when no parameters…

Ionic + angular PWA freezes sometime and won't be able to navigate through pages

$
0
0

On some level, virtually all bugs that present inconsistently (i.e., not “every single time I do X, the app does Y”, but “if I do X enough times, sometimes the app does Y”) represent race conditions, meaning you are relying on assumptions that don’t always hold about the order that your code is executing.

So, if you’ve got co-workers, I would ask one of them to review your code for race conditions. Sometimes they’re very hard to spot, especially by the eyes that made the mistake in the first place.

If you don’t have coworkers, and are willing to show the entire app repository (this sort of problem is notoriously ill-suited to posting individual snippets out of context, because one needs to see the entire code flow to spot many of the problems), that’s another option, and maybe somebody here will help with this.

If neither of those options work for you, and you want to try to do this yourself, here’s a mini-checklist of rocks you can turn over to see if anything crawls out:

  • get rid of any use of async and await
  • give explicit, proper (not any) types to all parameters and return values of all methods
  • add strict options to tsconfig.json, like:
 "compilerOptions": {
...
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true
},
{
 "angularCompilerOptions": {
...
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
}
  • pay strict attention to any build-time complaints triggered by adding these compiler options, because failing to initialize something can often be covered up by code that “generally” executes fast enough
  • if you ever call a function that returns a future (Promise or Observable) (including the ones you write yourself, and knowing for certain which ones these are is a key part of why the first two steps on this list are there), think about how you are dealing with it. Generally, you would want to also be returning a future from the calling function that’s dependent on the one you got. If you’re not, think hard about whether people who are calling this function care about when it does its work. If they do, and you’re not returning a future, you’re toast. There’s no way that the caller can know when that work has completed.
  • the advice in the previous bit very much applies to calls to native plugins, which all return futures of some sort.

Good luck.

Components from different route paths loads in every route enter

$
0
0

It looks like you aren’t wrapping each page in the IonPage component which is required in order for Ionic to make page transitions properly. Without it, you will get very weird results. - Reference.

You may also want to take a look at the Vue Lifecycle when using Ionic as when using Ionic it is different - Vue Lifecycle in Ionic.

Network error when axios call has parameters on IOS

$
0
0

Shot in the dark, but could you do the same request with built-in fetch?

fetch(API_ENDPOINT, {
  method: 'POST',
  headers: new Headers({
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }),
  body: JSON.stringify({page: this.page})
})
.then((response) => response.json())
.then((res) => {
  console.log(res
})
.catch((error) => {
  console.error(error);
});

Copying Resources

$
0
0

Today i have generated my icon and my splash screen on https://apetools.webprofusion.com/#/ because cordova-res and ionic cordova resources made the icons look worse. From that website i get the correct naming and folder structure with resources/icon/filename. How can i get the splashes and logos into the android build?
Thanks for your Answers in Advance,
Benni

Angular 12: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'

$
0
0

After upgrading to Angular 12, I get the following error when running ionic serve:

[ng] Build at: 2021-08-30T19:51:32.148Z - Hash: 7a7351ce16a902a5c859 - Time: 1247ms
[ng] Error: node_modules/ionicons/dist/types/components.d.ts:66:15 - error TS2320: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'.
[ng]   Named property 'ariaHidden' of types 'IonIcon' and 'HTMLStencilElement' are not identical.
[ng] 66     interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
[ng]                  ~~~~~~~~~~~~~~~~~~
[ng] Error: node_modules/ionicons/dist/types/components.d.ts:66:15 - error TS2320: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'.
[ng]   Named property 'ariaLabel' of types 'IonIcon' and 'HTMLStencilElement' are not identical.
[ng] 66     interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
[ng]                  ~~~~~~~~~~~~~~~~~~
[ng] Error: node_modules/typescript/lib/lib.dom.d.ts:4632:101 - error TS2344: Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Element'.
[ng]   Type 'HTMLElement | HTMLMetaElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | ... 151 more ... | HTMLMarqueeElement' is not assignable to type 'Element'.
[ng]     Type 'HTMLIonIconElement' is not assignable to type 'Element'.
[ng]       Property 'ariaHidden' is optional in type 'HTMLIonIconElement' but required in type 'Element'.
[ng] 4632     getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
[ng]                                                                                                          ~~~~~~~~~~~~~~~~~~~~~~~~
[ng] Error: node_modules/typescript/lib/lib.dom.d.ts:4953:101 - error TS2344: Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Element'.
[ng]   Type 'HTMLElement | HTMLMetaElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | ... 151 more ... | HTMLMarqueeElement' is not assignable to type 'Element'.
[ng] 4953     getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
[ng]                                                                                                          ~~~~~~~~~~~~~~~~~~~~~~~~

Any ideas how to solve this?

Thank you very much! :heart:
Rafael

Implementing in-app oAuth flows with Ionic and Capacitor Browser

$
0
0

Are there any examples of Ionic apps that have implemented a “native” oAuth flow?

  • Click on login with X from the app
  • Open in-app browser
  • Login
  • Browser closes and user is logged in

I assumed this would be doable with the Capacitor Browser plugin, but it doesn’t seem possible to close the browser automatically once login has been completed which is a fairly important step.

I assume there must be a workaround that isn’t mentioned in the docs?

Is there a browser plugin that does allow closing the in-app browser from Android?

Any help would be greatly appreciated


Components from different route paths loads in every route enter

$
0
0

Thank you for your replay.
Well, I created some base component, which wrap my every page (base-layout) and there I have ion-page and ion-content in the slot. I changed standard Vue methods to Ionic lifecycle methods and it works perfectly, so my problem was thankfully solved.

To check that problem I created a new empty project, added two sites with similar structure and login to console functionality. It seams, that the problem exists there as well with the standard Vue lifecycle methods like mounted(), created() etc. Maybe it’s the way, how Ionic Framework works under the hood and standard methods should’nt be used.

Angular 12: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'

$
0
0

Angular 12 introduced support for TypeScript 4.2.
Angular 12.1 introduced support for TypeScript 4.3.
I do not believe any released version of Angular claims to support TypeScript 4.4.

Is there any chance you forced TS 4.4 onto your project despite warnings of incompatibility?

Not able to test Alert / Popover content

$
0
0

Can you make a quick sample project to look at?

Taking a picture using the ionic-native camera plugin sometime makes the app restart

$
0
0

I think this is pretty common with cordova-android and their camera API. They way it works is by pausing the App, starting the built-in camera app, and then returning the photo data from that. As unfortunate as it sounds, this is to be expected from Cordova-android.

Capacitor thought shouldn’t have this problem.

Angular 12: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'

$
0
0

Hey rapropos, thank you very much, you just saved me a lot of work! :slight_smile:

Somehow typescript 4.4 was installed in my project. After running npm install typescript@4.3.5 everything works fine again.

My package.json says "typescript": "^4.3.5", and I already tried deleting the node_modules folder, my package-lock und cleaning npm cache. When running npm install thereafter, typescript 4.4 got installed again.

It’s solved now, great, thanks again!

Angular 12: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'

$
0
0

This will keep happening, because:

That’s bad. I recommend never using ^ for typescript dependencies. You want ~ instead, which locks everything but patch level (A.B.*). ^ locks only major versions. Extensive details documented in the docs for node-semver, but the TL;DR:

^4.3.5 = 4.3.6 OK, 4.4.2 OK
~4.3.5 = 4.3.6 OK, 4.4.2 NG

In general, both Angular and Ionic are sensitive to minor version changes in TS specifically. rxjs and zone.js are two other packages that require extra care and caution when upgrading.

Angular 12: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'


Selecting text in ionic should trigger an event ? how?

$
0
0

Haven’t used this particular one, and since it was written for Angular 5, it may need some updating to work with current versions, but I find Ben Nadel to be generally a rockstar-level source of code building blocks, and once upon a time he made this text selection directive.

Taking a picture using the ionic-native camera plugin sometime makes the app restart

$
0
0

Is it possible to use capacitor plugins in our current cordova app (which is pretty huge, with quite a lot cordova plugins)? Or do we need to ‘rebuild’ the app from scratch to include Capacitor?

Also can you explain why the Capacitor camera plugin doesn’t have this issue?

Override icon urls

$
0
0

I need to override icon urls.

Currently it is using document.baseURI but I need it to be /my-path/ . I thought that ng build --deploy-url /my-path might handle this but it does not.

Is there somewhere that I can override this option?

Override icon urls

$
0
0

Can you provide some context for why you feel the need to do this?

I ask because ordinarily Ionicons are simply bundled up into your app, which would mean that if the Ionicons are in the “wrong place”, you’re likely to run into trouble “finding” other assets, including your app code.

I’m trying to make sure that the focus on icons isn’t too specific.

Ionic/angular Android Http not working

$
0
0

For what it’s worth at this point adding android:usesCleartextTraffic=“true” to the manifest file worked for me. I was having a similar problem where http worked from the browser but not the emulator in android studio or the android scanner itself. After adding the above line both places started working. I am using angular 12 with ionic beta 6 and capacitor. (and http from angular, not ionic)

Viewing all 228554 articles
Browse latest View live


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