Angular 4 + Cordova + 设备就绪答案

【问题标题】：Angular 4 + Cordova + Device ReadyAngular 4 + Cordova + 设备就绪
【发布时间】：2017-06-29 13:07:29
【问题描述】：

在 Cordova 上运行（或引导）基于 angular-cli 的应用程序的最佳方法是什么？

注意：这是针对使用多个 Cordova 插件的 Angular 4.x 应用程序。

选项 A：在您的 www/index.html（www 是 Cordova 文件夹）中发布 ng build，如果您执行以下操作：

<script src="cordova.js"></script>
<script>
document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
  console.log('onDeviceReady has been called. Lets start loading JS files.');
  var url = ['inline.bundle.js', 'polyfills.bundle.js', 'styles.bundle.js', 'vendor.bundle.js', 'main.bundle.js'];
  for(var i = 0; i < url.length; i++){
    loadJSFile(url[i]);
  }
}

function loadJSFile(url) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    head.appendChild(script);
}
</script>

或，

选项 B：onDeviceReady() 可以位于 main.ts 中的某个位置（在引导 AppModule 之前）或 app.component.ts。

我尝试了选项 A，但我的应用程序在 iPad 上加载的时间过长。所以我想知道我是否遵循了一个好的方法。提前感谢您的建议。

【问题讨论】：

标签： angular cordova angular-cli

【解决方案1】：

我不知道这是否是最好的方法，但在我的 main.ts 中，我添加了带有箭头函数的 deviceready 事件侦听器，该函数调用了角度引导程序。有用。

document.addEventListener("deviceready", () => platformBrowserDynamic().bootstrapModule(AppModule), false);

【讨论】：

我喜欢它！我改进它的唯一方法是首先检查是否分配了document，如果没有，则执行正常的引导。我知道 Angular Universal 目前似乎一无所获，但做好准备也无妨。
即使使用 ionic 4 和 angular 7，这也是一个有效的保护程序！谢谢！

【解决方案2】：

如果您还需要为 Cordova 添加检查，则需要更复杂的代码。否则 Angular 会抱怨“试图找到引导代码，但找不到。指定可静态分析的引导代码或将 entryModule 传递给插件选项。'

const bootstrap = () => {
  platformBrowserDynamic().bootstrapModule(AppModule);
};

if (typeof window['cordova'] !== 'undefined') {
  document.addEventListener('deviceready', () => {
    bootstrap();
  }, false);
} else {
  bootstrap();
}

【讨论】：

这个版本明显优于公认的版本：它保留了浏览器调试和 ng 服务功能，同时在 Cordova 下透明地工作。谢谢！

【解决方案3】：

在 main.ts 或 main-aot.ts 中取决于你如何调用你的 main.ts 文件

 document.addEventListener('deviceready', () => {
    console.log("bootstrap device");
    platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
  }, false);
}

【讨论】：