Issue with displaying Typescript sourcemaps on Android device in Ionic 2

Encountering a strange behavior with Ionic2. After deploying my app to a simulator, I am able to view the .ts file sourceMap in the Chrome inspect debugger.

In both scenarios, I use:

ionic run android

However, when deploying my APK on a real device, the "Sources" tab displays a completely different set of directories without any reference to my .ts files.

My current environment:

  • Running OS X 10.11
  • Using Ionic 2 version 2.0.0-beta.35
  • Cordova version 6.3.0

The project was initially generated using:

ionic start biblio tutorial --v2

ionic.config.json

{
  "name": "biblio",
  "app_id": "",
  "v2": true,
  "typescript": true
}

tsconfig.json

 {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "filesGlob": [
    "**/*.ts",
    "!node_modules/**/*"
  ],
  "exclude": [
    "node_modules",
    "typings/global",
    "typings/global.d.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Any thoughts?

androidgoogle-chrometypescriptionic2source-maps

Answer №1

During remote debugging on an android device, I encountered an issue where the Chrome debugger could not access the source map file on the device. The solution was to include the source map inline by making some changes:

I added the following code snippet to the package.json in the main project directory:

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

This modification instructed webpack to add source maps inline. Additionally, I made a change in the tsconfig.js file by adjusting the line:

"sourceMap": true,

to

"sourceMap": false

This change disabled typescript from creating a source map file since webpack now handled this task.

After implementing these changes, everything started working smoothly. It's important to note that this solution is specifically for ionic 2 RC_04.

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

When compiling to ES5, TypeScript fails to remove imports

I am working on a TypeScript file that utilizes the moment library, and I need to import moment for it to compile properly. However, after compilation, the import line is still present in the compiled file, which is causing issues on my web page. Here is ...

typescript

Steps for importing a CommonJS module with module.exports in Typescript

When working with ES5 code, I encountered an error that I cannot seem to resolve. Despite following the language spec and checking my TypeScript version 1.7.5, I still can't figure out why this error is occurring. Error TS2349: Cannot invoke an expre ...

typescriptecmascript-6typescript1.7

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

Can I retrieve the return type of useFetch in Nuxt3?

I am running into an issue while trying to specify the APIBody type in the following manner: Property 'test' does not exist on type 'NonNullable<PickFrom<_ResT, KeysOf>>'. It seems like there is no straightforward way to def ...

typescriptvuejs3nuxtjs3

Ditch the if-else ladder approach and instead, opt for implementing a strategic design

I am currently working on implementing a strategic design pattern. Here is a simple if-else ladder that I have: if(dataKeyinresponse === 'year') { bsd = new Date(moment(new Date(item['key'])).startOf('year&apos ...

javascriptjavadesign-patternstypescriptstrategy-pattern

Angular Appreciation Meter

Looking to create a rating system using Angular. The square should turn green if there are more likes than dislikes, and red vice versa (check out the stackblitz link for reference). Check it out here: View demo I've tried debugging my code with con ...

htmlangulartypescript

Using the watch flag in TypeScript across multiple projects - A comprehensive guide

In my project, I have the following scripts section in the package.json: "watch": "?", "build": "npm run build:compactor && npm run build:generator && npm run build:cleaner", "build:lambda": ...

typescriptnpmtsconfig

How to use multiple template urls in Angular 6

Currently, I am creating a front-end using Angular 6 and facing the challenge of having components with varying html structures based on the user who is logged in. The number of templates required can range from 2 to over 20, so my preference would be to ...

javascriptangulartypescript

Create a new project using Firebase Functions along with a Node.js backend and a React.js frontend

In the process of developing my application, I have chosen to utilize node.js, express.js, and Firebase with firebase functions, all coded in TypeScript. For the client side framework, I am interested in incorporating react.js. Currently, I have set up nod ...

node.jsreactjstypescriptfirebaseexpress

Patiently waiting for the component variable to be assigned through subscription

I am facing an issue with two calls in my component. The second call depends on the result from the first call. In the first call, I set the value for my component variable "locked". The second call should only be executed when the result is true, meaning ...

javascriptangulartypescripthttpasync-await

Despite setting the necessary Access-Control-Allow-* headers, the CORS ajax call still encounters a failure

My ajax call from a third-party-hosted script to my endpoint is encountering some issues. In Chrome, the preflight call appears as follows: GENERAL Request URL: https://my_endpoints_url Request Method: OPTIONS Status Code: 200 Remote Address: 21.188.37.1 ...

javascriptajaxgoogle-chromerequest-cancelling

Transfer my testing utilities from React Router version 5 to version 6

I am currently transitioning my project to React V6 router and encountering an issue with my test utility function. Every time I run the test, all my expectations fail because jest cannot locate the object. Has anyone faced this error during a similar migr ...

reactjstypescriptjestjsreact-routerreact-router-dom

Angular-4: Exploring Component Reference on Click Event

One of my challenges involves dynamically adding different components when the user clicks, allowing them to add and remove any component. However, I am struggling to figure out how to reference the component where the user clicked in Angular-4. here are s ...

angulartypescriptangular-components

Customize the element of the root node of a MUI component using the styled()

I am trying to implement the "component" prop with a MUI component (such as ListItem) using the styled() API. However, I am facing an issue where it says that "component" is not a valid prop. Can someone guide me on how to correctly achieve this? I have se ...

javascriptreactjstypescriptmaterial-ui

Utilizing the Loess npm module in conjunction with Angular 4

I am attempting to incorporate the Loess package into my project. The package can be found on NPM and offers various regression models for data fitting. I successfully installed it using npm install loess --save, and it now resides in the node_modules dire ...

javascriptangulartypescriptnpmtypescript-typings

Does the router navigate function instantly update the router URL?

I'm testing whether the navigate function will immediately alter the router URL upon execution. this.router.navigate(['/home/products']); if (this.router.url.includes('/home/products')) console.log('URL has been changed&apos ...

angulartypescript

Declaring module public type definitions for NPM in Typescript: A comprehensive guide

I have recently developed a npm package called observe-object-path, which can be found on GitHub at https://github.com/d6u/observe-object-path. This package is written in Typescript and has a build step that compiles it down to ES5 for compatibility with ...

javascripttypescriptnpm

Utilize an enum to serve as a blueprint for generating a fresh object?

I've defined an enum as shown below: export enum TableViewTypes { user = 'users', pitching = 'pitching', milestones = 'milestones', mediaList = 'mediaList', contacts = 'contacts' } ...

typescript

The index.ngfactory.ts file threw an unexpected token error, indicating that an appropriate loader may be necessary to handle this specific file

I've spent several hours trying to troubleshoot this persistent error, exhausting all online resources for solutions. The issue arises consistently with every module of Angular Material only during the build process using --env.prod. The webpack confi ...

jsonangulartypescriptwebpackangular-universal

Encountered an error while trying to access an undefined property in Angular

Trying to perform a basic import, but encountering a significant stack trace issue. Extensive search efforts have been made to address this problem, yet the stack trace lacks sufficient information for resolution. UPDATE: When setting a variable not sour ...

angularjstypescriptangular