Issue with the physical back button on Android devices

Whenever I press the physical Android Button I encounter the following error:

While executing, an unhandled exception java.lang.IndexOutOfBoundsException: setSpan (2..2) goes beyond length 0

Here is my app.routing.ts

import { LoginComponent } from "./pages/login/login.component";
import { CarwashComponent } from "./pages/carwash/carwash.component";
import { NewOrderComponent } from "./pages/new_order/new-order.component";
import { ProfileComponent } from "./pages/profile/profile.component";
import { OrderDetailComponent } from "./pages/order/order-detail/order-detail.component";

export const routes = [
  { path: "", component: LoginComponent },
  { path: "profile", component: ProfileComponent},
  { path: "carwash", component: CarwashComponent },
  { path: "order-detail/:order_id", component: OrderDetailComponent },
  { path: "new_order", component: NewOrderComponent}
];

export const navigatableComponents = [
  LoginComponent,
  CarwashComponent,
  ProfileComponent,
  OrderDetailComponent,
  NewOrderComponent
];

An example of the page:

import { Component, ElementRef, OnInit, ViewChild, OnChanges } from "@angular/core";
import { CarwashService } from "../../../shared/carwash/carwash.service";
import { OrderService } from "../../../shared/order/order.service";
import { Page } from "ui/page";
import { Color } from "color";
import { Router, ActivatedRoute, Params } from "@angular/router";
import { TimePicker } from "ui/time-picker";
import { DatePicker } from "ui/date-picker";
import { StoredData } from "../../../shared/config"
import * as application from "application";

@Component({
    selector: "order-detail",
    providers: [CarwashService, OrderService],
    templateUrl: "pages/order/order-detail/order-detail.html",
    styleUrls: ["pages/order/order-detail/order-detail-common.css", "pages/order/order-detail/order-detail.css"]
})    

export class OrderDetailComponent implements OnInit {
    constructor(
        private page: Page,
        private router: Router,
        private carwashService: CarwashService,
        private orderService: OrderService,
        private route: ActivatedRoute){}

    ngOnInit() {... }    
    checkStatus(){...}    
    addOrderTotalName(){...}    

    changeStatus(status){...}    
    closeOrder(){...}    
    cancelOrder(){...}
}

Any insights on what could be wrong?see image description here

Answer №1

Typically, the physical back button should take you to the previous page, but it seems like that's not working for you. You can try redefining the function for the back button in this way:

var app = require("application");
var topmostFrame = require("ui/frame").topmost;

var androidActivity = app.android.startActivity || app.android.foregroundActivity || topmostFrame().android.currentActivity || topmostFrame().android.activity;
var lastBackPressed;

androidActivity.onBackPressed = function() {
   topmostFrame().goBack();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a method to make changes to files on a deployed Angular application without the need to rebuild?

After deploying my Angular application on a production environment using the command npm run build --prod --base -href, I now need to make changes to some static HTML and TypeScript files. However, since the app is already bundled and deployed, I'm un ...

What is the process for automatically initiating a service when importing a module in Angular?

I am curious about how I can automatically run a service within a module upon importing it, without the need for manual service injection and execution. This functionality is similar to how the RouterModule operates. @NgModule({ imports: [ Browser ...

Utilize a personalized npm script to change the name of a file

I need some help with creating a script for my angular2 project that will rename README.md to README_2.md. After installing "renamer" : "0.6.1", I tried making this script: "renameMd": "renamer --find js/README.md --replace js/README_2.md" in my package.j ...

Event listener for scrolling in Angular Dart component

I am looking to implement a functionality where a "back to top" button appears once the user has scrolled the page by 500px. I have been trying to capture the scroll event in the main Div of my AppComponent. <div class="container" scrollable&g ...

The CORS policy is causing a blockage for the front-end application due to the Spring Boot backend

Currently working with Spring Boot and Angular. I have included the cross-origin annotation in my code to allow access from my Angular localhost port, but unfortunately, I am still encountering the following error: Here is a snippet of my Spring Boot code ...

The inclusion of HttpClient is causing issues with the functionality of my component

Currently, I am facing an issue with my Angular service called ConnexionService. The problem arises when I try to incorporate CSV files into this service using HttpClient. Strangely, the component associated with this service fails to display once HttpClie ...

A guide on retrieving bytecode from a specific PDF using Angular

Can anyone help me with extracting the bytecode from a selected PDF file to save it in my database? I keep encountering an error stating that my byte is undefined. Could someone please review my code and identify what might be causing this issue? I attemp ...

button listener event

Is there a way to verify if a button has been selected? <ul> <li *ngFor="let p of arrray; let i = index" > <button class="btn btn-success" (click)="onLoveIt(i)" >Love it!</button> &nbsp; </li> </ul> ...

Chart.js Axis Labels Orientation Guidelines

I am currently utilizing chart.js within an Angular 8 environment using Primeng. I am looking to customize the options for my chart as follows: For the y-axis ticks, set textDirection to 'ltr' For the x-axis ticks, set textDirection to 'rtl ...

Creating an object type that includes boolean values, ensuring that at least one of them is true

To ensure both AgeDivisions and EventStyles have at least one true value, I need to create a unique type for each. These are the types: type AgeDivisions = { youth: boolean; middleSchool: boolean; highSchool: boolean; college: boolean; open: bo ...

Is there a workaround for utilizing reducer dispatch outside of a React component without relying on the store?

Recently, I implemented a reducer in my project that involves using react, typescript and nextJS. I am wondering if there is a method to trigger the reducer outside of a react component, such as from an API service. While searching for solutions, most re ...

Remove the color options from the Material UI theme

Can certain color types be excluded from the MUI palette in MUI v5? For example, can background and error colors be removed, allowing only colors defined in a custom theme file to be used? I attempted using 'never' but it did not provide a solut ...

Resolving route data in Angular 2 and above

When retrieving data from an API in an Angular route resolver, I encountered a problem where if there was an error due to a stale token, I needed to refresh the token and then retry the API call. Below is the code snippet illustrating this scenario: impor ...

The ordering of my styles and Material-UI styles is causing conflicts and overrides

Greetings fellow developers! I'm currently facing an issue with my custom styles created using makeStyles(...). The problem arises when I import my styles constant from another module, and the order of the style block is causing my styles to be overr ...

Incorporate personalized No Data Available message in ngx-datatable

How can I customize the no data message for ngx-datatable? I want to avoid displaying the default message that comes with it. Here is what I have attempted so far: <div *ngIf="showTable"> <ngx-datatable [rows]="rows"> ...

The error message "Webpack is not applying the style from leaflet.css"

Currently utilizing the ngX-Rocket angular 8 starter, I am looking to integrate the leaflet map library into my project from this source: https://github.com/Asymmetrik/ngx-leaflet After including the file in my index.html document, I encountered the follo ...

Problem with Angular's command line interface

I'm facing an unusual issue with angular/cli on my Windows machine. A year back, I installed Angular and created a new project successfully. I've been updating Angular whenever a new version is released (currently on v7). Today, when trying to cr ...

Is there a way to seamlessly transition between different Angular components without having to refresh the entire webpage?

I'm currently working on implementing a navigation bar that allows users to switch between three components without having the navbar reload. The goal is for only the new component to load when the user clicks on a different section of the navbar, kee ...

Enhancing a prototype instance in TypeScript while activating strict mode

When working with an instance named remote from a factory in a vendor script, I encountered the need to add my own methods and members to that instance. While seeking a solution, I came across an insightful response on extending this in a Typescript class ...

What is the correct way to close an ngx-contextmenu in an Angular application?

In my angular project, I implemented an ngx-contextmenu. Within one of my components, the template includes the following code: <div... [contextMenu]="basicMenu"> <context-menu>..... </div> After some time, the component with the conte ...