Angular 4 + Cordoba + The device is ready

Question

What is the best approach to launch (or download) an angular-cli application in Cordoba?

Note. This is for an Angular 4.x application that uses several Cordoba plugins.

Option A: Publish ng build , in your www / index.html (www is the Cordova folder) you should do something like:

<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>

OR,

Option B: OnDeviceReady () can go somewhere inside main.ts (before loading the AppModule) or app.component.ts.

I tried option A, but my application has been loading too long on the iPad. So I wanted to know if a good approach suits me or not. Thanks in advance for your suggestions.

Answer 1

, , main.ts deviceready , angular. .

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

Answer 2

, . Angular " , . , entryModule . '

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

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

Answer 3

In main.ts or main-aot.ts it depends on how you call the main.ts file

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