If you are seeing the incorrect icon on your Android, you should delete the app on your device and then reboot it. I have found that icons seem to be cached by the OS.
↧
Cant change app icon
↧
Ionic v1 - Build failed
- When we run ionic cordova run android --debug on a ionic v1 project, it fails with following build exception
Execution failed for task ‘:processDebugGoogleServices’ . No matching client found for the package name
I have checked the code and the package name is correct. Any pointers on what could be the issue ?
↧
↧
Detect Screen Orientation
Unless your mobile application allows for only portrait or only landscape views, there’s a good chance you will need to adjust a few things. Even if you’ve built your layouts in a fluid fashion, you may need to programmatically make some changes.
↧
How to select the browser in the ionic 4 build for android
We tried to use the following in the xml config:we tried to use the following in the config.xml:
<preference name="OverrideUserAgent" value="SamsungInternet/5.0 My Browser">
<preference name="AppendUserAgent" value="My Browser">
But it doesn’t work.
I needed it to call the samsung browser in my tablet.
I believe, you are using the wrong syntax.
↧
routerLink not updating url value when changed
The following behaves as I think you’re expecting for me:
export class HomePage {
link$ = new BehaviorSubject<string>("nowhere");
link = this.link$.value;
destination = "";
constructor() {
this.link$.subscribe(link => this.link = link);
}
moveRoad(): void {
this.link$.next(this.destination);
}
}
<ion-content>
<a [routerLink]="link">road to nowhere</a>
<ion-item>
<ion-label>where to go?</ion-label>
<ion-input [(ngModel)]="destination"></ion-input>
</ion-item>
<ion-item button (click)="moveRoad()">move road</ion-item>
</ion-content>
When I type something in the input box and click the “move road” button, the routerLink updates.
↧
↧
Help us test the Ionic 5 Release Candidate!
Thanks for letting us know! Liam is responding on the issue, we’ll continue to add more to it as we debug. 
↧
Ionic v4: Import Angularfire in lazy loaded module
Hi all,
I’ve got the following question:
Technical Setup: Landing Page (does not need firebase) + Lazy Loaded Page (does need firebase)
I have a project with two pages. Let’s call them LandingPage and FirebasePage.
My app thus consists of the AppModule, the AppRoutingModule and the two lazy loaded modules LandingPageModule and FirebasePageModule.
The routings do look as follows:
{ path: '', loadChildren: () => import('./landing-page.module').then(m => m.LandingPageModule)},
{ path: 'firebase', loadChildren: () => import('./firebase.module').then(m => m.FirebasePageModule)}.
Preloading: The preloadingStrategy is NoPreloading.
How it works at the moment
At the moment I import Angularfire in my AppModule, so Angularfire gehts downloaded even if people just navigate to the LandingPage, where no firebase functionalities are required.
My imports are:
imports: [<other modules>
AngularFireModule.initializeApp(environment.firebaseConfig, 'my-app-name'),
AngularFirestoreModule,
AngularFireAuthModule]
So when anybody routes to the FirebasePage, Angularfire is ready to be used.
However, Angularfire ist also available in the LandingPage and ads almost 500kb to the main package size, even if people just navigate to the LandingPage, where no firebase functionalities are required.
Objective: Import Angularfire only in the lazy loaded module
To reduce the bundle size that people need to download when visiting only the landing page, I would like to move the Angularfire imports to the lazy loaded FirebasePageModule. However, when just moving the three imports from the AppModule to the FirebasePageModule, I get the following error when routing to the LandingPage as well as when routing to the FirebasePage:
NullInjectorError: StaticInjectorError(AppModule)[AngularFirestore]
Does anybody know, how to import Angularfire directly in the lazy loaded module, where I need it, instead of importing it in the AppModule where it becomes available to all lazy loaded modules (but increases bundle size even when visiting pages that do not need Angularfire)?
Thanks a lot, your help is highly appreciated! 
↧
HELP :: Navigation triggered outside Angular zone
I also have the problem suddenly when I click a link of my ion-menu, then my target page crashes suddenly.
It all worked before.
this is the error message:
it can not read the valid-property of my form-field.
Also see the warning before.
Ionic:
Ionic CLI : 5.4.6 (/Users/oliverwaterkamp/node_modules/ionic)
Ionic Framework : @ionic/angular 4.11.10
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.3.25
@ionic/angular-toolkit : 2.1.2
Capacitor:
Capacitor CLI : 1.4.0
@capacitor/core : 1.4.0
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v12.13.0 (/usr/local/bin/node)
npm : 6.13.6
OS : macOS Catalina
↧
HELP :: Navigation triggered outside Angular zone
I think it’s going to be tough for anybody to say much constructive without having access to an MCVE, but you did mention one thing:
This is where version control really comes in handy. If you make changes only on branches, it’s easy to revert to “before” and compare in (relatively) leisurely detail what triggered the problem.
↧
↧
Navigation triggered outside Angular zone, did you forget to call ‘ngZone.run()’?
My app crashes (not always that’s strange) suddenly after I click on an link on my sliding ion-menu.
Everything worked before. I think it has to do with my latest update.
I could not find out what causes this error. Once the error is there it’s always there.
The next page after the click on the ion-menu link crashes, because the form-controls of the form are not available anymore. But everything is there and it worked before.
Ionic:
Ionic CLI : 5.4.6 (/Users/oliverwaterkamp/node_modules/ionic)
Ionic Framework : @ionic/angular 4.11.10
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.3.25
@ionic/angular-toolkit : 2.1.2
Capacitor:
Capacitor CLI : 1.4.0
@capacitor/core : 1.4.0
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v12.13.0 (/usr/local/bin/node)
npm : 6.13.6
OS : macOS Catalina
↧
useIonViewWillLeave has stale state data
React lifecycle hooks documentation: https://ionicframework.com/docs/react/lifecycle#lifecycle-methods-in-functional-components
↧
HELP :: Navigation triggered outside Angular zone
Thx for your quick feedback…
and yeah your’re abolutely right…
I will further investigate it and come back as soon I have more detail or the solution…
I also saw following threat:
But I could not figure out whether it was solved or not.
↧
HELP :: Navigation triggered outside Angular zone
I think I found the problem of the warning (still not the cause of the error)…
Within my global error handler I tried to write redirect to a special error-page.
router.navigate(['/error']);
I removed this now and the warning ‘Navigation triggered outside of Angular zone’ seems to be disappeared.
So this means for me this is not the problem, which causes my error…
As soon I know more I let you know…
↧
↧
Close an alert with keyboard AND retrieve its input value
Hi
I made an alert with the alert controller.
It display an input field for text, and 2 buttons (cancel and okay).
The purpose is to type a command and execute it.
-> it’s working. But i would like to to press “enter” on keyboard instead of pressing the “okay” button.
-> i’m able to close my alert by pressing the expected key, but then i’m unable to retrieve the content of the input key.
alert_window: any;
@HostListener('document:keydown.enter', ['$event'])
onKeydownHandler(event: KeyboardEvent) {
this.alert_window.dismiss();
}
async presentAlert_Exec(containerName: string) {
const alert = await this.alertController.create({
header: 'Execute a command in ' + containerName + ' container',
inputs: [
{
name: 'CMD',
type: 'text',
placeholder: 'Cmd'
}
],
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: () => {
console.log('Confirm Cancel');
}
}, {
text: 'Exec',
role: 'send_command',
handler: () => {
console.log('Confirm Okay');
}
}
]
});
this.alert_window = alert;
await alert.present();
let result = await alert.onDidDismiss();
console.log(result);
if ((result.role != 'backdrop') && (result.role != 'cancel')) {
this.simConfig.Exec(containerName, result.data.values.CMD).then((result) => {
console.log(result);
});
}
}
-> Closing the alert with the “okay” button return the expected data
-> Canceling with ‘escape’ key or ‘cancel’ button work as expected
-> Pressing ‘enter’ does close the alert but returns undefined data
How can i dismiss the alert from code and retrieve the input value ?
Thank you
↧
HELP :: Navigation triggered outside Angular zone
One of the trickiest parts about writing apps for MacOS back in the pre-Darwin days was trap patching. It was sort of like the prototype shenanigans people do in JavaScript to modify the behavior of built-in objects, but even more powerful and dangerous. Apple basically used illegal instructions (from the CPU’s POV) to implement the OS. The illegal instruction would suspend whatever the CPU was ordinarily doing and jump to a fixed place, where the OS would do its thing, and then return control to normal.
When you patched these OS routines, you had to be super-careful about what other parts of the OS you called, because much of it wasn’t reentrant and you could crash the entire computer, frequently in intermittent and hard-to-reproduce fashion. The safest thing to do in a trap patch was simply to set a flag and wait for a more predictable time to respond to it.
Maybe a page from that book would help you here. Instead of doing anything heavy in a “global error handler” (which sounds like something that can get called from all sorts of sketchy situations), just throw up a flare in there and react to it in a safer environment:
class ErrorService {
private errors$ = new Subject<string>();
watchErrors(): Observable<string> { return this.errors$; }
globalErrorHandler() {
this.errors$.next("ruh roh");
}
}
// could be anywhere, really, but I know there's an AppComponent
class AppComponent {
constructor(router: Router, errorer: ErrorService) {
errorer.watchErrors().subscribe(err => router.navigate(["/error"]);
}
}
Promise.resolve can be used to similar effect: both RxJS and Promise are zone-aware, so by the time the Observable's emission is seen by the subscribe block (or a then block in the Promise case), you are going to be back in the Angular zone, even if the globalErrorHandler happened to be called from outside it.
One thing I would definitely not do (although you’ll likely see others who disagree) is to inject NgZone and call its run method. I feel zones are an internal implementation detail of Angular, and shouldn’t be in app code.
↧
Ion-range not working within Vue's keep-alive component
I have an ion-range component within Vue’s keep-alive component so that when I change views via Vue Router I don’t lose the range setting. I can drag the slider’s handle upon the component’s first load but after leaving that view and then returning to it, the slider value is retained (thanks to keep-alive) but the handle no longer slides. Any idea why not?
I’m using Vue Router 3.1.5, Vue 2.6.10, and @ionic/vue 0.0.4
↧
routerLink not updating url value when changed
Yes the code works in the other components but not in the AppComponent where the ion-menu is located, that’s the problem I have.
I have another menu for the desktop version which is loaded outside of the AppComponent and there is no problem with that.
// app.component.ts
export class AppComponent implements OnInit {
appPages: Page[] = [...];
constructor() {
}
}
// app.component.html
<ion-app>
<ion-split-pane contentId="main-content">
<ion-menu contentId="main-content" type="overlay">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list lines="none">
<ion-menu-toggle auto-hide="false" *ngFor="let page of appPages">
<ion-item [routerLinkActive]="'active'"
[routerLink]="page.url"
[routerDirection]="'root'">
<ion-icon slot="start" [name]="page.icon"></ion-icon>
<ion-label>
{{page.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</ion-split-pane>
</ion-app>
↧
↧
HELP :: Navigation triggered outside Angular zone
Thank you for the amazing support and for giving me all those tips.
It’s very valuable for me.
I wasn’t aware of that, that this routing within the global error handler is not right…
But I was aware of that the global error handler needs to be treated carefully
Thank you also for you code snippet. I will try to used it like this.
The other error did not appear again until now.
So I think we can close this threat.
Really sorry for my little panic-mode, but I learn fast and I will take up all of your suggestions.
Thx,
Oliver
↧
Send Email in ionic 4 without using email_composer
Hi,
i want to send automatic email in ionic 4 without using email composer. Please help…
Thanks in advance…
↧
Navigation triggered outside Angular zone, did you forget to call ‘ngZone.run()’?
In my case I could solve it with the solution you will find here:
↧