Angular 4 + Cordova +设备就绪

Question

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

注意:这适用于使用多个Cordova插件的Angular 4.x应用程序.

选项A:post ng build,在你的www/index.html(www是Cordova文件夹)中你应该做以下的事情:

<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上加载时间过长.所以我想知道我是否遵循了良好的方法.提前感谢您的建议.

Answer 1

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

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

Answer 2

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

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

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