使用 --prod 和 --release 构建 Ionic 3 Angular 4 应用程序时出现空白屏幕

Posted 2023-05-06

【中文标题】使用 --prod 和 --release 构建 Ionic 3 Angular 4 应用程序时出现空白屏幕

【英文标题】：Blank screen when using --prod and --release to build Ionic 3 Angular 4 app

【发布时间】：2018-07-15 14:36:22

【问题描述】：

我见过很多人遇到与我类似的问题，但我在那里看到的解决方案都不能帮助我，所以我没有重复已经提出的问题。

我有这个环境： cli 包：(/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1

全局包：

cordova (Cordova CLI) : 7.1.0

本地包：

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 6.3.0 ios 4.4.0
Ionic Framework    : ionic-angular 3.9.2

系统：

ios-deploy : 1.9.1
ios-sim    : 5.0.12
Node       : v7.0.0
npm        : 5.3.0
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b

我有这些插件：

com.googlemaps.ios 2.5.0 "Google Maps SDK for iOS"
cordova-plugin-add-swift-support 1.7.0 "AddSwiftSupport"
cordova-plugin-android-permissions 1.0.0 "Permissions"
cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-crosswalk-webview 2.3.0 "Crosswalk WebView Engine"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-mauron85-background-geolocation 2.3.2 "CDVBackgroundGeolocation"
cordova-plugin-nativegeocoder 2.0.4 "NativeGeocoder"
cordova-plugin-network-information 1.3.4 "Network Information"
cordova-plugin-splashscreen 4.1.0 "Splashscreen"
cordova-plugin-statusbar 2.2.2 "StatusBar"
cordova-plugin-swift-support 3.1.1 "SwiftSupport"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova-sqlite-storage 0.7.14 "Cordova sqlite storage plugin"
ionic-plugin-keyboard 2.2.1 "Keyboard"
phonegap-plugin-barcodescanner 7.0.1 "BarcodeScanner"

当我检查时： % sudo 离子医生检查

✔ 检测问题：16 / 16 完成 - 完成！ [OK] 检测到 0 个问题。 哇是的！ ????

当我使用此命令运行应用程序时，它运行良好，我看到空白屏幕，但几秒钟后它进入我拥有的登录页面：

% sudo ionic cordova run android -l -c

但是，如果我尝试构建生产/发布版本，我会在使用微调器隐藏启动画面后立即看到一个空白屏幕：

% sudo ionic cordova run android --prod --release

我想知道是否会与白名单插件和权限相关，是吗？但是什么？

如您所见，我正在使用 Crosswalk，会与它相关吗？

这两个命令之间的真正区别是什么？当我使用 --prod 和 --release 时，我可以做些什么来了解实际发生的情况？

【问题讨论】：

由于您是为 android 构建的，您是否尝试连接到桌面 Chrome 浏览器？如果是这样，控制台中有任何消息吗？

一切都在 Chrome 上运行，在控制台上没有什么异常。这是这个项目的东西。我刚刚创建了一个入门项目，它使用 --prod 参数在 android 上运行正常。

我不是在谈论使用 ionic serve 的 Chrome。我说的是您在手机上构建的产品：当您将手机连接到桌面时，您可以使用 Chrome（桌面）来调试您的 android 视图。

我知道，您的意思是 chrome://inspect/#devices，但控制台或 Augury 选项卡上没有显示任何内容，什么也没有。不过谢谢你的回复。

【参考方案1】：

造成这个巨大问题的原因是我的 tsconfig.json 中有：

"target": "es6"

因为有人告诉我设置为 6 以使用 async 和 await，但我可以这样：

"target": "es5"

并使用 Typescript 2.7.1 - 我花了 5 天时间来解决这个问题，发现这个目标导致了这个烦人的空白屏幕。

我希望这可以帮助其他人。