Ionic4+Capacitor安卓构建无TypeScript SourceMap问题求助

我看到你在Ionic 4 + Capacitor项目里遇到了TypeScript source map生成的问题——能拿到SCSS和HTML的源码，但TS文件就是出不来。结合你提供的环境配置（Angular 7.x + Ionic 4.7.x），问题大概率出在构建配置的适配性上，因为Ionic 4已经切换到Angular CLI的构建链，不再依赖旧的@ionic/app-scripts了，你之前的webpack配置用错了依赖。下面是一步步的解决办法：

1. 先确认Angular核心配置（angular.json） #

Angular 7的构建配置都在angular.json里，直接在这里开启TypeScript的source map更靠谱：
找到你的项目对应的architect -> build -> options，确保sourceMap配置包含脚本（即TypeScript文件）的生成：

"architect": {
  "build": {
    "options": {
      // 其他配置...
      "sourceMap": {
        "scripts": true,
        "styles": true,
        "hidden": false,
        "vendor": false,
        "scriptsContent": true,
        "stylesContent": true
      }
    },
    "configurations": {
      "production": {
        // 如果你需要生产环境也生成source map，同样配置上述sourceMap参数
      }
    }
  }
}

这个配置会明确告诉Angular CLI为TS脚本生成source map，而不是只处理样式和HTML文件。

2. 修正Webpack配置（如果需要自定义） #

你之前用了@ionic/app-scripts/config/webpack.config.js，但Ionic 4已经不再依赖这个包，所以这个配置根本不会生效。正确的做法是用Angular CLI的自定义webpack配置方式：

• 先安装适配Angular 7版本的自定义webpack构建器：

npm install @angular-builders/custom-webpack@7.x --save-dev

• 修改angular.json里的builder配置，替换为自定义webpack的构建器：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 保留你原有的其他配置...
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server"
  }
}

• 编写你的webpack.config.js，针对开发环境设置devtool：

module.exports = {
  devtool: 'inline-source-map' // 也可以根据需求换成'eval-source-map'等类型
};

这样配置才会被Angular的构建链正确读取并应用。

3. 调整构建命令 #

用Angular CLI的命令来构建，确保source map参数正确传递：
修改package.json的scripts为更明确的命令：

{
  "scripts": {
    "build:dev": "ng build --configuration development --source-map",
    "sync:android": "npx cap copy && npx cap open android",
    "android:dev": "npm run build:dev && npm run sync:android"
  }
}

这里明确指定development配置，确保构建处于开发模式，source map不会被压缩或移除。

4. 调试时的注意事项 #

在Chrome调试时，还要注意这些细节：

• 打开Chrome DevTools的Sources面板，找到webpack://目录，你的TS文件应该在这里面
• 如果还是看不到，检查Network面板里的main.js（或对应chunk文件），查看响应头是否包含SourceMap，确认source map文件已被正确加载
• 确保Android Studio里的WebView启用了调试模式，Capacitor默认会在debug构建中开启；如果是release构建，需要手动在代码中开启调试权限

最后执行npm run android:dev重新构建同步，再用Chrome调试应该就能看到TS源码了。

内容的提问来源于stack exchange，提问作者Maxime