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

how to share a variable across multiple ts files in an Angular project

In the home.component.ts file, I have a variable named name that I want to access globally in all files. Can anyone please suggest how can I achieve this? Below is the code snippet: app.component.html <nav aria-label="breadcrumb"> <ol class= ...

Unable to activate parameter function until receiving "yes" confirmation from a confirmation service utilizing a Subject observable

Currently, I am working on unit tests for an Angular application using Jasmine and Karma. One of the unit tests involves opening a modal and removing an item from a tree node. Everything goes smoothly until the removeItem() function is called. This functi ...

Utilize an external JavaScript function within a React and TypeScript document

I have encountered an issue in my React/Next.js/TypeScript file where I am trying to load the YouTube iframe API in my useEffect hook. Here is the code snippet: useEffect(() => { const tag = document.createElement('script'); tag.src = ...

"Learn the process of integrating Javascript files from the Angular assets folder into a specific Angular component or module (such as Angular 2, 4,

I have custom1.js, custom2.js, and custom3.js JavaScript files that I need to load into Angular components component1, component2, and component3 respectively. Instead of adding these files to the index.html globally, I want to load them specifically for e ...

The element of type 'OverridableComponent<LinkTypeMap<{}, "a">>' cannot be assigned to a 'ReactNode'

I'm currently working on a project where there's a component named ListItemTextStyle. Within that component, the prop type is defined as follows: import { LinkProps, ListItemButtonProps, } from '@mui/material'; type IProps = LinkP ...

Video showcasing issue with updating Ionic2 view

I am encountering an issue where my View is not updating as expected. When a player makes a move, the triggers work (I did a console log on every update of the current game [1]), but the View does not update regularly. To investigate this problem, I added ...

Effortlessly transfer model data to a different component in Angular upon clicking a button

Component A displays a list of Products, each with an option to view the details. When this option is clicked, I want Component B to show a list of items associated with that specific Product. I am having trouble passing the selected Product from Componen ...

The NgRx Store encountered an error: Unable to freeze

I am currently developing a basic login application using Angular, NgRx Store, and Firebase. I have implemented a login action that is supposed to log in to Firebase and store the credentials in the store. However, it seems like there is an issue in my imp ...

I'm having trouble with the calculator, unable to identify the issue (Typescript)

I'm struggling with programming a calculator for my class. I followed the instructions from our lesson, but it's not functioning properly and I can't pinpoint the issue. I just need a hint on where the problem might be located. The calculat ...

Android Tutorial: Setting a Maximum Width for a LinearLayout

Currently, I am in the process of creating a layout for my Android application. I have successfully managed to make a LinearLayout within a ScrollView stretch by setting its layout_width to match_parent. However, I want to limit the stretching beyond 500d ...

What is the significance of parentheses when used in a type definition?

The index.d.ts file in React contains an interface definition that includes the following code snippet. Can you explain the significance of the third line shown below? (props: P & { children?: ReactNode }, context?: any): ReactElement<any> | nu ...

Angular 6: utilizing the input field value in the component

I am having trouble passing the input field value to the component class. The code I have is not working as expected. Take a look below: todoinput.component.html <mat-card> <form> <mat-form-field class="example-full-width"> ...

Angular 2 module that is loaded lazily - service does not follow singleton pattern

After successfully implementing lazy loading modules into my application, I have ensured that the app.module.ts is properly configured. @NgModule({ declarations: [ AppComponent, HeaderComponent, HomeComponent ], imports: [ BrowserMod ...

The module 'Express' does not have a public member named 'SessionData' available for export

I am encountering an issue while working on my TypeScript project. I am not sure where the error is originating from, especially since nothing has been changed since the last time I worked on it. node_modules/connect-mongo/src/types.d.ts:113:66 - error TS ...

Height transition animation in Angular 2 - maintaining state consistency

I am currently working with an animation code that is linked to my component. animations:[ trigger('slide', [ state('show', style({ height: '*' })), state('hide ...

Angular 10: Issue encountered while trying to instantiate an Object of an Object

export class School { constructor( public name: string, public address: Address, public district: string, public contactNumber: string, public gradeRange: string, public currentYear: number, ...

Intercepting HTTP requests in Angular, but not making any changes to the

Working on Angular 13, I am trying to attach a JWT token to the headers in order to access a restricted route on the backend. However, after inspecting the backend, it seems that the JwtInterceptor is not modifying the HTTP request headers. I have included ...

The ngx-translate/core is throwing an error message that says: "HttpClient provider not found!"

I recently downloaded the ngx-translate/core package and have been diligently following the provided documentation. However, I'm facing an issue with getting the translations to work. Here are the steps I've taken: 1] Definition in the AppModul ...

Are you facing a version issue when trying to install npm packages like [email protected] and [email protected]?

Previously, I encountered unmet dependencies in npm installation. To resolve this issue, I referred to this helpful discussion. However, now I am facing problems related to npm deprecated versions: [email protected] and [email protected] when try ...

Utilizing svgr in NextJS with TypeScript and Webpack

I have a collection of separate svg files that I want to load in React and use as React components. Here is an example of how I am trying to do this: import SampleIcon from '@/components/editor/icons/add-column-after.svg'; <SampleIcon classNam ...