在Android设备上的Ionic 2中不显示Typescript源图

Question

我面对一种奇怪的Ionic2行为。 当我将我的应用程序部署到模拟器时，我可以在chrome检查调试器中看到.ts文件sourceMap。

在这两种情况下，我都使用：

ionic run android

另一方面，当我在真实设备上部署我的apk时，选项卡＆＃34;来源＆＃34;与其他目录组完全不同，并且没有引用我的.ts文件。

我的环境是：

• OS X 10.11
• Ionic 2 2.0.0-beta.35
• cordova 6.3.0

项目最初由以下方式生成：

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
  }
}

有什么想法吗？

Answer 1

对我来说问题是，当您在Android设备上进行远程调试时，Chrome调试器无法访问设备上的源地图文件。解决方案/修复是将源地图内联包含在内。要做到这一点我：

将以下内容添加到根项目目录中的package.json

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

这是为了让webpack添加内联更改的tsconfig.js行的源映射

"sourceMap": true,

到

"sourceMap": false

这是为了禁用typescript来创建源映射文件，因为这是由webpack完成的。

在这一改变之后，一切似乎都运转正常。请注意，这适用于离子2 RC_04