Meteor Cordova构建Android应用出现白屏问题的原因排查

首先，你的问题核心线索非常明确：日志里反复出现的 WARNING: Tried to load AngularJS more than once，这几乎肯定是导致Android构建包白屏的原因——Angular重复加载会破坏其初始化流程，导致页面无法正常渲染，而浏览器环境可能因为缓存或加载机制的差异避开了这个问题。

先回顾下你的场景：

• 技术栈：Meteor 1.6.1.1 + Angular 1.5.3_1
• 应用在开发浏览器、部署服务器、移动浏览器均正常，仅Android构建包启动白屏
• 控制台关键错误：WARNING: Tried to load AngularJS more than once.

你的环境信息参考 #

控制台错误日志

=> Started proxy.
=> Started MongoDB.
WARNING: You are testing your app on a remote device. For the mobile app to be able to connect to the local server, make sure your device is on the same network, and that the network configuration allows clients to talk to each other (no client isolation).
=> Started your app.
=> App running at: http://localhost:3000/
=> Started app on Android Device.
I20180530-14:46:50.104(1)? 05-30 14:46:44.712 31175 31175 I chromium: [INFO:library_loader_hooks.cc(36)] Chromium logging enabled: level = 0, default verbosity = 0
I20180530-14:46:50.150(1)? 05-30 14:46:45.219 31320 31320 I CordovaLog: Changing log level to DEBUG(3)
I20180530-14:46:50.151(1)? 05-30 14:46:45.457 31320 31320 I chromium: [INFO:library_loader_hooks.cc(36)] Chromium logging enabled: level = 0, default verbosity = 0
I20180530-14:46:50.151(1)? 05-30 14:46:45.579 31320 31387 E chromium: [ERROR:devtools_http_handler.cc(292)] Cannot start http server for devtools. Stop devtools.
I20180530-14:46:50.152(1)? 05-30 14:46:46.560 31320 31320 I MeteorWebApp: Serving asset bundle with version: 7990da69bb2fd9d114781c4ced3482f74c30885b
I20180530-14:46:50.152(1)? 05-30 14:46:46.785 31350 31401 I chromium: [INFO:library_loader_hooks.cc(36)] Chromium logging enabled: level = 0, default verbosity = 0
I20180530-14:46:50.153(1)? 05-30 14:46:47.285 31350 31401 E chromium: [ERROR:BudgetService.cpp(160)] Unable to connect to the Mojo BudgetService.
I20180530-14:46:50.153(1)? 05-30 14:46:47.781 31320 31320 I chromium: [INFO:CONSOLE(44922)] "WARNING: Tried to load AngularJS more than once.", source: http://localhost:12880/packages/modules.js?hash=b66baa905179fb6487e6ccaa81cbb12b2e53c95c (44922)

使用的Packages

meteor-base@1.3.0 # Packages every Meteor app needs to have
mobile-experience@1.0.5 # Packages for a great mobile UX
mongo@1.4.2 # The database Meteor supports right now
reactive-var@1.0.11 # Reactive variable for tracker
tracker@1.1.3 # Meteor's client-side reactive programming library
standard-minifier-css@1.4.0 # CSS minifier run for production mode
standard-minifier-js@2.3.1 # JS minifier run for production mode
es5-shim@4.7.0 # ECMAScript 5 compatibility for older browsers
ecmascript@0.10.6 # Enable ECMAScript2015+ syntax in app code
shell-server@0.3.1 # Server-side component of the `meteor shell` command
autopublish@1.0.7 # Publish all data to the clients (for prototyping)
insecure@1.0.7 # Allow all DB writes from clients (for prototyping)
angular:angular@1.3.0
jquery
angular:angular-route
angular:angular-sanitize
angular:angular-animate
d3js:d3
urigo:static-templates
fourseven:scss
twbs:bootstrap
browser-policy

Cordova插件

cordova-plugin-meteor-webapp@1.4.1
cordova-plugin-splashscreen@4.1.0
cordova-plugin-statusbar@2.3.0
cordova-plugin-wkwebview-engine@https://github.com/apache/cordova-plugin-wkwebview-engine.git#815ed0741b9ae30b343d6429bd8ff2ad37ec5790
cordova-plugin-wkwebviewxhrfix@https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix.git#593eb98a155bd1f970276222be8c6bfa757568f4

问题根源分析 #

从你的依赖列表和日志来看，可能的触发点有几个：

1. Angular版本冲突/重复安装：你提到使用的是angular:angular@1.5.3_1，但package列表里却显示angular:angular@1.3.0，版本不一致且可能存在重复依赖
2. WKWebView插件导致的资源加载异常：你使用了cordova-plugin-wkwebview-engine和cordova-plugin-wkwebviewxhrfix，WKWebView的路径处理有时会导致脚本重复加载
3. 静态模板或第三方依赖重复引入Angular：比如urigo:static-templates中的静态文件可能手动引入了Angular脚本，和Meteor打包的版本重复

分步解决方案 #

1. 清理并统一Angular依赖 #

这是最优先要做的步骤，因为版本冲突是最常见的重复加载原因：

# 移除旧版本Angular
meteor remove angular:angular@1.3.0
# 添加你预期的版本
meteor add angular:angular@1.5.3_1
# 清理Meteor本地缓存，避免残留依赖
meteor reset
rm -rf .meteor/local

2. 排查WKWebView相关配置 #

WKWebView虽然性能更好，但在Meteor+Angular组合中偶尔会出现资源加载问题：

• 先尝试暂时禁用WKWebView，改用默认WebView测试：

meteor remove cordova-plugin-wkwebview-engine cordova-plugin-wkwebviewxhrfix
meteor run android-device

如果白屏消失，说明是WKWebView的配置问题，可以尝试：

• 更新cordova-plugin-meteor-webapp到兼容Meteor 1.6.x的最新版本
• 检查mobile-config.js中的资源路径配置，确保没有重复指向Angular脚本

3. 检查静态模板和第三方依赖 #

• 打开urigo:static-templates对应的静态HTML文件，查看是否有手动引入<script src="angular.js">这类标签，如果有，删除它们——Meteor会自动打包Angular依赖
• 检查d3js:d3、twbs:bootstrap等第三方包，确认它们没有间接引入Angular的副本（可以通过meteor list查看依赖树，或者在Chrome调试器的Sources标签下搜索angular定位加载源）

4. 用Chrome调试器确认修复效果 #

继续使用Chrome开发者工具调试：

1. 连接Android设备到电脑，打开Chrome输入chrome://inspect
2. 找到你的应用并点击inspect，切换到Sources标签
3. 搜索angular，确认只有一个版本的Angular脚本被加载
4. 查看控制台是否还有重复加载的警告

验证修复 #

完成上述步骤后，重新构建并测试：

# 直接运行测试
meteor run android-device
# 或者构建生产包
meteor build ../android-build --server=https://your-production-server-url.com

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