Seems to be a problem using ionic-cli with windows PowerShell. Everything worked with Ubuntu 20.04…
↧
ERROR in tsconfig.json with fresh project
↧
Problems with prerendering
Hello all,
I have several problems when trying to prerender to a www output target.
One thing is that I may get different results for every build I run.
Sometimes the HTML and CSS are rendered but with no JS, so whatever is supposed to happen dynamically on the client just isn’t working.
Other times I get this ugly flickering when the page loads and some components are not rendered, mainly icons and ion-slides.
Also I have an ion-textarea which is rendered with this in it: <!--t.33.2.2.0-->.
Every once in a while I get a properly working build…
This is my Stencil config:
export const config: Config = {
globalStyle: 'src/global/app.scss',
globalScript: 'src/global/app.ts',
outputTargets: [
{
type: 'www',
// comment the following line to disable service workers in production
serviceWorker: null,
baseUrl: 'https://myapp.local/', // this is the value from the stencil init command. Tried changing it but to no avail
prerenderConfig: './prerender.config.ts',
}
],
plugins: [
sass()
]
};
And this is my package.json:
{
"name": "porfolio",
"private": true,
"version": "0.0.1",
"description": "Stencil App Starter",
"scripts": {
"build": "stencil build",
"build:s": "stencil build --prerender --verbose",
"build:p": "stencil prerender dist/hydrate/index.js",
"start": "stencil build --dev --watch --serve",
"test": "stencil test --e2e test.e2e.ts",
"test.watch": "stencil test --spec --e2e --watchAll",
"generate": "stencil generate"
},
"devDependencies": {
"@stencil/core": "^2.6.0",
"@stencil/router": "^1.0.1",
"@stencil/sass": "^1.4.1",
"@types/jest": "^26.0.24",
"@types/puppeteer": "1.19.0",
"jest": "^26.6.3",
"jest-cli": "^26.6.3",
"puppeteer": "1.19.0"
},
"license": "MIT",
"dependencies": {
"@ionic/core": "^5.6.13"
}
}
The entire repo can be found here.
Let me know if I can provide any more info to help solve this.
Thanks a lot! 
↧
↧
Stripe Terminal: Invalid `onFetchConnectionToken` handler given
@Dunny: please post your relevant code, because OP’s has at least two different bugs, neither of which fits in the self-reported diagnosis of “race condition”.
↧
Building Custom UI with Capacitor
Yes, with a Capacitor plugin you can also use native UI elements. The dialog plugin is an example of this.
↧
Popover interfering with my data bindings?
I’ve created a component that I can use as a pseudo-dialog using ion-popover. It seems to work great, but I’m running into a weird problem where data binding with v-model is just completely broken when I use components inside it.
I put together a minimal repro case in this repository:
This project contains just two vue files besides the blank ionic template:
- ClickerButton (a button that keeps track of how many times you’ve clicked it)
- BaseDialog (my aforementioned dialog component)
When I use ClickerButton on the home screen, it works perfectly.
However, when I open my dialog and try to click the button inside, it registers one click only (which is reflected on the data visible on the home screen) – and then no more until I close the dialog and re-open it. Additionally, the component itself doesn’t update to reflect the changes to its model.
Here’s a gif that demonstrates the problem:
All I can imagine is that the popover itself is interfering with my events somehow? I’m honestly totally lost with regard to how to debug this.
↧
↧
Ion-button element with fill attribute does not render correctly on iOS in light mode
My team is experiencing a very specific bug with Ionic that we cannot figure out. We have a simple ion-button implementation as follows:
<ion-button
fill="clear"
size="small"
color="primary"
(click)="forgotPassword()"
>
Forgot your Password?
</ion-button>
We have set the primary color as follows (code edited down for conciseness):
@mixin main-colors {
--ion-color-primary: #ffab00;
}
:root {
@include main-colors;
}
@media (prefers-color-scheme: dark) {
body,
.md body,
.ios body {
@include main-colors;
}
}
The button (and every other button that is implemented the same way) displays correctly on every browser and every device that we have tested with one exception: iOS light mode (Safari and native). The button text displays a noticeably lighter color with a small border (see comparison screenshots below). And even then, it is only on our iPhone XR and iPhone 12 models. We tested on an older iPhone 5 SE and could not reproduce it.
Dark mode (correct color):
Light mode (incorrect color):
After extensive testing, we have found that adding expand="block" to the button will resolve the issue, but that is obviously not ideal. In addition, we have another button in the app with fill set to outline instead of clear, and the block workaround does not work for it.
iOS version: 14.7.1
Ionic version: 5.0.0
Any assistance would be much appreciated. Thanks in advance!
↧
Commit from GitHub does not display on Ionic dashboard
I guess new commits display well but the old commits I had pushed on GitHub before do not show up on the Ionic dashboard. Looking forward to getting help!
↧
Problem in facebook and google login
const FACEBOOK_PERMISSIONS = ['email', 'user_birthday', 'user_photos', 'user_gender'];
const result = await FacebookLogin.login({ permissions: FACEBOOK_PERMISSIONS }) as FacebookLoginResponse;
const token = await FacebookLogin.getCurrentAccessToken() as FacebookLoginResponse;
const email = await FacebookLogin.getProfile<{
email: string;
}>({ fields: ['email'] });
if (result.accessToken) {
// Login successful.
this.socialLogin(token.accessToken.token, 'facebook');
}↧
Jerky CSS animation on Android
Thanks for the response.
For the one mentioned above I actually resolved the issue by using the ion-modal in ios mode. Works great. Obviously the Ionic team had resolved the problem somehow.
With Swiperjs I am not going to have a lot of control over the animation but I will take a look in with the browser tools. I think this may become a common issue now that ion-slides is being deprecated.
Here is my stackoverflow. It appears fine with just HTML so I think it is due to the conditional *ngIfs or similar.
↧
↧
Jerky CSS animation on Android
ion-slides uses Swiper.js under the hood, so if you are having issues when using Swiper.js directly then ion-slides is likely going to have the same issue.
Swiper.js handles gesture interactions by calculating each slide’s transform value during every rendering frame. This gives the maintainers the ability to add a lot of cool features, but the downside is it comes with a performance overhead that is more noticeable on mid/lower range devices. Depending on your use case, you might want to consider using CSS Scroll Snapping instead: Practical CSS Scroll Snapping | CSS-Tricks
↧
ERROR in tsconfig.json with fresh project
This is not the exact issue you are running into, but it looks like Vue 3 has some issues with WSL2 at the moment: hot reload not working on WSL2 · Issue #4421 · vuejs/vue-cli · GitHub The issue you are running into may be related.
You could try creating a Vue 3 starter app without Ionic Vue and see if you can reproduce the issue there: https://v3.vuejs.org/
↧
Jerky CSS animation on Android
Interesting I will look into that.
I have improved it somewhat by tuning my code so I will see how much better I can get it.
At least devices are getting faster.
Although it seems to be a limitation of the Android webview.
Thanks for the help.
↧
ERROR in tsconfig.json with fresh project
I changed the directory name to all lower case and it seemed to progress on Windows. I will test with a pure Vue JS project too.
↧
↧
Timer across multiple pages
Thank you for your reply,
This is how the page and timer looked when the countdown function was in the component.
This is how the page looked when the countdown function was in the service.
I was thinking about elevating the countdown from the component like you said, but I didn’t know where to start. Would I have to import the component to the service and work with it there? Or is there a better way to do it?
↧
Timer across multiple pages
My apologies for poor English. When I said “what things looked like”, I meant “what the code was”. I didn’t mean “looked like” in a visual sense.
↧
Timer across multiple pages
Oh, my mistake.
I put the countdown in the service ‘full-paper-service.service.ts’. This is the code for that:
full-paper-service.service.ts
import { Injectable } from '@angular/core';
import { interval, Subject } from 'rxjs';
import { map, takeUntil, takeWhile } from 'rxjs/operators';
import { addSeconds, format } from 'date-fns';
@Injectable({
providedIn: 'root'
})
export class FullPaperServiceService {
testStarted: boolean = false;
timerStarted: boolean = false;
starter$ = new Subject<void>();
secs = 10;
countdownDisplay: string;
constructor() { }
startTest() {
this.testStarted = true;
}
startTimer() {
this.timerStarted = true;
}
endTest() {
this.testStarted = false;
}
startCountdown(): void {
this.starter$.next();
let nsecs = this.secs;
interval(1000)
.pipe(
takeUntil(this.starter$),
takeWhile(countup => countup <= nsecs),
map(countup => {
let countdown = nsecs - countup;
let d = new Date();
d.setHours(0,0,0,0);
d = addSeconds(d, countdown);
let fmt = format(d, "HH:mm:ss");
return fmt;
})
)
.subscribe(cd => this.countdownDisplay = cd,
(err) => console.log(err),
() => this.endTest());
}
}
As you can see, I have not used any of the parts of the components in the service because I am not exactly sure how to do it. I did try making the function in the service use parameters that I could use in the component, but that didn’t seem to work either.
↧
Timer across multiple pages
That would be impossible. It only works the other way around - you can access service things from inside a component, but not component things from within a service.
I generally find myself having to redesign any situation in which I am tempted to subscribe to an Observable in the same place as it is created, as you are doing in startCountdown.
What I would do instead is look at this from the POV of the timer display component. The easiest thing for it to consume would be an Observable<string> whose payload is the exact thing it is supposed to display. So let’s rearchitect TimerService to expose that.
You have a thing that you call starter$ that looks to me more like a stopper than a starter, because it aborts the countdown. I’m taking that out for simplicity, but you could readd it if it’s used elsewhere.
timer.service.ts
@Injectable()
export class TimerService {
// this is a second-order Observable to make things look seamless from the outside
private countdowns$ = new BehaviorSubject<Observable<number>>(EMPTY);
watchDisplay(): Observable<string> {
return this.countdowns$.pipe(
switchMap(cd$ => cd$),
map(secs => this.secsToDisplay(secs)));
}
// the priming with concat is because interval doesn't emit immediately
// the +1s and -1s deal with the fenceposting caused by that
startCountdown(totalSecs: number): void {
this.countdowns$.next(concat(of(-1), interval(1000)).pipe(
take(totalSecs+1),
map(n => totalSecs - (n+1)),
));
}
// leaving this bit intact from your original code, but split out to get it out of the way
// of the new structure
private secsToDisplay(secs: number): string {
let d = new Date();
d.setHours(0, 0, 0, 0);
d = addSeconds(d, secs);
let fmt = format(d, "HH:mm:ss");
return fmt;
}
}
timer.component.ts
// this directive comes from @ngneat/until-destroy and prevents subscription leaks
@UntilDestroy()
@Component({
selector: "app-timer",
template: "<div>countdown: {{countdownDisplay}}</div>",
})
export class TimerComponent {
countdownDisplay = "";
constructor(private timer: TimerService) {
timer.watchDisplay()
.pipe(untilDestroyed(this))
.subscribe(cd => this.countdownDisplay = cd);
}
}
home.page.ts
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
nsecs = 10; // just a default
constructor(private timerer: TimerService) {}
startCountdown(): void {
this.timerer.startCountdown(this.nsecs);
}
}
home.component.html
<ion-content [fullscreen]="true">
<div>
<app-timer></app-timer>
</div>
<div>
<ion-item>
<ion-label>seconds to count down:</ion-label>
</ion-item>
<ion-item>
<ion-input type="number" [(ngModel)]="nsecs"></ion-input>
</ion-item>
<ion-item button color="primary" (click)="startCountdown()">start countdown</ion-item>
</div>
</ion-content>
You should be able to freely add an <app-timer> to any page you want, and it should do what you’re expecting. I hope this gives you some ideas you can use in your app. I verified that it at least runs, but it hasn’t been tested extensively.
↧
↧
Deviceready not fired after 5 seconds
I am having the same issue, did you find a solution?
↧
App not loading in iOS
I am working with Ionic React to build a project out with Firebase. Currently, the app is working completely fine and as expected, but when I try to load it up in iOS, it never loads; just get a white loading screen. When I launch it in XCode, this is the output:
2021-08-16 19:28:44.905497-0500 App[44733:7842304] DiskCookieStorage changing policy from 2 to 0, cookie file: file:///Users/dgreen/Library/Developer/CoreSimulator/Devices/641C1A08-41C7-4EDA-BD68-74AF426169FE/data/Containers/Data/Application/B82C2A8D-8207-457B-B670-E57BABA62883/Library/Cookies/com.sevensandfifteens.binarycookies
2021-08-16 19:28:44.991592-0500 App[44733:7842304] screen parameters are unexpected: MGScreenClass1125x2436x3x495 SCREEN_TYPE(1125,2436,3,495)
2021-08-16 19:28:44.992487-0500 App[44733:7842304] screen parameters are unexpected: MGScreenClass1125x2436x3x495 SCREEN_TYPE(1125,2436,3,495)
2021-08-16 19:28:44.992677-0500 App[44733:7842304] screen parameters are unexpected: MGScreenClass1125x2436x3x495 SCREEN_TYPE(1125,2436,3,495)
2021-08-16 19:28:45.260235-0500 App[44733:7842304] KeyboardPlugin: resize mode - native
⚡️ Loading app at capacitor://localhost...
2021-08-16 19:28:45.396724-0500 App[44733:7842304] WF: === Starting WebFilter logging for process App
2021-08-16 19:28:45.396891-0500 App[44733:7842304] WF: _userSettingsForUser : (null)
2021-08-16 19:28:45.397035-0500 App[44733:7842304] WF: _WebFilterIsActive returning: NO
⚡️ WebView loaded
2021-08-16 19:29:15.390122-0500 App[44733:7844002] [] nw_protocol_get_quic_image_block_invoke dlopen libquic failed
↧
@capacitor/network + React
Hello Ionic Framework Community,
I have used the @capacitor/network plugin with React, like in this link: https://capacitorjs.com/docs/apis/network
but it seems is not working properly, does any one knows how to do it to make it work properly ?
Thanks in advance.
↧