Debugging is not possible for applications running on an Android device with Ionic 2

Instructions to replicate the issue: 1. Begin by creating a new project from the following repository: https://github.com/driftyco/ionic-starter-super 2. Execute the command `ionic run android` 3. Utilize chrome://inspect for debugging purposes

The problem lies in the absence of ts and debugging functionality is not working - please refer to the attached screenshot https://i.sstatic.net/8Cq76.jpg

Current setup being used: Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.4 Ionic CLI Version: 2.1.18 Ionic App Lib Version: 2.1.9 Ionic App Scripts Version: 0.0.48 ios-deploy version: 1.9.0 ios-sim version: 5.0.13 OS: macOS Sierra Node Version: v6.9.2 Xcode version: Xcode 8.2.1 Build version 8C1002

cordovatypescriptionic2

Answer №1

I successfully identified the root cause of the issue and implemented a solution. The problem stemmed from Chrome debugger's inability to access the source map file on an android device during remote debugging. The workaround involved including the source map inline. Here's how I tackled it:

I appended the following snippet to package.json in the project's main directory

"config": {
"ionic_bundler": "webpack",
"ionic_source_map_type": "#inline-source-map"
},

This modification instructs webpack to incorporate source maps directly into the code. I edited the tsconfig.js file by changing the line

"sourceMap": true,

to

"sourceMap": false

This adjustment prevents typescript from generating a separate source map file as webpack now handles this task.

Following these updates, everything appears to be functioning correctly.

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

Avoiding caching of GET requests in Angular 2 for Internet Explorer 11

My rest endpoint successfully returns a list when calling GET, and I can also use POST to add new items or DELETE to remove them. This functionality is working perfectly in Firefox and Chrome, with the additional note that POST and DELETE also work in IE ...

javascriptangulartypescriptinternet-explorer-11http-caching

Switch up a button counter

Is there a way to make the like count increment and decrement with the same button click? Currently, the code I have only increments the like count. How can I modify it to also allow for decrements after increments? <button (click)="toggleLike()"> ...

typescript

The element within the iterator is lacking a "key" prop, as indicated by the linter error message in a React component

Encountering an error stating Missing "key" prop for element in iteratoreslintreact/jsx-key {[...Array(10)].map((_) => ( <Skeleton variant="rectangular" sx={{ my: 4, mx: 1 }} /> ))} An attempt to resolve this issue was made ...

reactjstypescriptmaterial-uinext.js

Divide MUI theme into individual files

I have encountered an issue in my Next.js project. I currently have an index.ts file residing in the src/theme directory. 'use client'; // necessary for MUI to work with nextjs (SSR) import { createTheme } from '@mui/material/styles'; i ...

reactjstypescriptnext.jsmaterial-ui

Unsure about module loading with system.js and navigating Typescript

I am currently in the process of transitioning an ASP.Net MVC application to Angular2, and I've encountered some perplexing behavior that I can't seem to grasp. Within my Angular2 app, I have a separate Layoutview that allows me to switch betwee ...

typescriptangularsystemjs

Updating state in React without providing a key prop is a common issue, especially when

Currently, I am working on implementing a Radio Group where I want the radio button's checked value to update when another button is clicked. In the example provided below, it seems that the desired effect can only be achieved using the "key" prop. Is ...

reactjstypescript

Scanning for devices on Ionic 2/3 made simple: How to easily exclude unwanted application and Android directories

I'm currently working on a gallery application that enables users to choose images from their phone and transfer them to a kiosk. Upon loading the application, it searches the entire device for folders containing images and organizes them into an albu ...

androidangulartypescriptionic2ionic3

Inquiring about Vue 3 with TypeScript and Enhancing Types for Compatibility with Plugins

I've been struggling to find a working example of how to implement type augmentation with Vue3 and TypeScript. I have searched for hours without success, trying to adapt the Vue2 documentation for Vue3. It appears that the Vue object in the vue-class ...

typescriptvue.jsvuejs3

Is there a way to create a type interface that points to the structure of another type?

I am focused on developing a type interface that includes properties defined in another interface. Below is the schema definition for a model object in TypeScript: export interface ModelSchema { idAttribute: string; name: string; attributes: { ...

typescripttypescript2.0

Firestore - Insert new entries into an array in an existing document using Typescript

After retrieving data from Firestore using Firebase and implementing pagination function, I encounter an issue when attempting to add the new values to an array. Specifically, TypeScript raises an error message when I try to invoke the setState hook. int ...

reactjstypescriptgoogle-cloud-firestore

Using TypeScript to assign string array values to object properties

I am working with a string array: values: string['myName', 'myLastname', 'myAge'] and my goal is to assign each value to a property of an object like this: myModel={name:'', lastname:'', age:''} o ...

angulartypescript

TypeScript creates a .d.ts file that contains declaration statements rather than export declarations

When compiling my code using the command tsc --p typescript/tsconfig.json --outFile "dist/umd/index.d.ts", I encountered an issue. The contents of my tsconfig.json file are as follows: { "include": ["../src/**/*"], "exclude": ["../**/*.test.ts"], ...

javascripttypescript

Delete an essential attribute from an entity

I am trying to remove a required property called hash from an object, but I keep encountering TypeScript or ESLint errors. All the properties of the interface are mandatory, and I do not want to make all properties optional using Partial. Here is the inte ...

typescript

When converting to TypeScript, the error 'express.Router() is not defined' may

Currently, I am in the process of converting my express nodejs project from JavaScript to TypeScript. One of the changes I've made is renaming the file extension and updating 'var' to 'import' for "require()". However, there seems ...

javascriptnode.jsexpresstypescriptmean-stack

JSX is restricted in files using the '.tsx' extension according to eslint rules (react/jsx-filename-extension)

When working in a .tsx file, why does eslint flag the following issue: The use of JSX is not permitted in files with the extension '.tsx' (eslint react/jsx-filename-extension) What steps can I take to adjust the eslint configuration and addres ...

typescripteslint

What is the best way to transform private variables in ReactJS into TypeScript?

During my conversion of ReactJS code to TypeScript, I encountered a scenario where private variables were being declared in the React code. However, when I converted the .jsx file to .tsx, I started receiving errors like: Property '_element' d ...

reactjstypescript

What's the deal with the Zod getter function?

Is it possible to create a getter function within a Zod object? For instance, in ES5 you can achieve the following: const person = { firstName: "John", lastName: "Doe", get fullName() {return `${this.firstName} ${this.lastName}`} } person.fullNam ...

typescriptzod

Steps for performing a runtime cast

When working on a web application written in TypeScript, there is a feature where users can add additional JavaScript functions that will be parsed at runtime (new function(Function as String)) for execution. These functions should return an object defined ...

javascripttypescriptcasting

Angular Error: Unable to access the 'title' property of an undefined value

Error Message Showing on Console for post-create.component.html ERROR Message: TypeError: Cannot read property 'title' of undefined at PostCreateComponent_Template (template.html:13) I suspect the issue is related to this line - console.log(for ...

node.jsangulartypescriptangular-material

Is there a way to utilize an AXIOS GET response from one component in a different component?

I'm having trouble getting my answer from App.tsx, as I keep getting an error saying data.map is not a function. Can anyone offer some assistance? App.tsx import React, {useState} from 'react'; import axios from "axios"; import {g ...

javascriptreactjstypescriptexpressaxios