Angular+Capacitor打包Android仅显示index.html内容问题排查

核心错误为Capacitor配置中的资源路径配置错误：

• 你在capacitor.config.ts中将webDir参数设置为源码目录src，但Capacitor的运行逻辑是将webDir指向的完整静态编译产物打包进APK，供原生端WebView加载，它不会主动编译Angular源码。
• 浏览器开发模式下ng serve可以正常运行，是因为Angular CLI会在开发服务启动时实时编译TS、模板、依赖文件，动态注入启动逻辑，不需要读取预编译的静态文件；但打包到Android端时，src目录下只有未经过编译的原始源码：TypeScript文件无法被WebView直接执行，Angular应用启动逻辑（main.ts中引导AppModule的代码）没有被打包注入，自然无法识别<app-root>根节点完成渲染，只能显示index.html中硬编码的"XXXX"静态文本。

按照以下步骤调整配置即可解决：

1. 执行Angular生产构建命令，生成可独立运行的编译后静态资源：

   ng build --configuration=production
   

   构建完成后，angular.json中配置的outputPath对应路径dist/our_thing下，会生成完整的静态资源包，包含注入了启动脚本的index.html、打包压缩后的JS/CSS文件、所有资源文件。
2. 修改capacitor.config.ts中的webDir配置，替换原来错误的src路径：

   import { CapacitorConfig } from '@capacitor/cli';
   
   const config: CapacitorConfig = {
     appId: '你自己的应用包名',
     appName: '你自己的应用名称',
     webDir: 'dist/our_thing', // 和angular.json中outputPath配置保持一致
     android: {
       allowMixedContent: true
     }
   };
   
   export default config;
   

3. 执行同步命令，将正确的静态资源复制到Android原生工程中：

   npx cap sync android
   

   该命令会清空之前错误复制到Android工程assets目录下的src源码文件，将新的dist/our_thing下的编译产物复制到对应位置。
4. 重新打包运行Android应用：
   执行npx cap open android唤起Android Studio，连接设备后重新构建安装APK，此时Angular应用会正常启动，app-root节点下的所有模板内容（YYYY、ZZZZ、<app-login>组件）都会正常渲染。

补充说明：后续每次修改Angular业务代码后，需要先重新执行ng build，再执行npx cap sync android同步改动，新的代码效果才会在原生应用中生效；开发调试阶段可以配置livereload模式，省去重复构建同步的步骤。

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