AngularJS+Ionic应用打包APK后Bower资源加载失败问题求助

你遇到的这个问题我之前做Ionic+AngularJS项目时也碰到过，核心原因就是bower组件的资源没有被正确打包到APK的www目录中，或者路径解析在Android WebView里出了问题。下面给你几个针对性的解决方案：

• 确认bower资源已同步到www目录
  Cordova只会打包项目中www目录下的所有文件，如果你是在项目根目录安装的bower组件（默认是根目录的bower_components），这些文件不会自动被复制到www/bower_components里。你可以：

  • 手动复制根目录bower_components/angular-bootstrap-calendar到www/bower_components下；
  • 用自动化工具（比如Gulp/Grunt）配置同步任务，每次安装bower组件后自动复制需要的资源到www目录。比如用Gulp的话，可以写一个简单的copy任务：

    gulp.task('copy-bower', function() {
      gulp.src('bower_components/angular-bootstrap-calendar/**/*')
        .pipe(gulp.dest('www/bower_components/angular-bootstrap-calendar'));
    });
    

• 检查index.html中的资源引用路径
  浏览器里相对路径可能正常，但Android WebView对路径的解析更严格。确保你的CSS引用是相对于www目录的相对路径，比如：

  <link rel="stylesheet" href="bower_components/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.css">
  

  不要使用绝对路径（比如/bower_components/...）或者相对于项目根目录的路径。

• 清理Cordova缓存并重建项目
  有时候旧的缓存文件会导致打包异常，执行以下步骤彻底清理重建：

  1. 运行cordova clean android清理Android平台的缓存；
  2. 或者直接删除platforms/android目录，然后重新添加平台：cordova platform remove android && cordova platform add android；
  3. 最后重新打包：cordova build android。

• 检查config.xml的配置
  确保config.xml里没有排除bower_components目录，比如有没有类似这样的标签：

  <exclude name="bower_components" />
  

  如果有的话删掉它。另外，也可以尝试添加一个偏好设置来兼容路径解析：

  <preference name="AndroidPersistentFileLocation" value="Compatibility" />
  

• 重新安装bower组件
  有可能是组件安装不完整导致资源缺失，先卸载再重新安装：

  bower uninstall angular-bootstrap-calendar --save
  bower install angular-bootstrap-calendar --save
  

按照上面的步骤排查，应该就能解决这个文件找不到的问题了。

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