How to prefetch (+preload) a specific module in ionic 4?

Question

When preloadingStrategy is set to PreloadAllModules, my app is fetching all modules/components that I have created. But I am not sure if the app is also fetching all modules/components of Ionic.

Actually, I need to show an error Modal, when the user is performing some action, while the app is offline. But in offline mode, none of the Ionic components work (since they are not preloaded), though my own components and routes are working fine.

So I need to know how to preload a specific module/component of Ionic? In my case ModalController

The errors are as follows:

"GET http://localhost:8100/40.js net::ERR_INTERNET_DISCONNECTED"
core-ca0488fc.js:63 ChunkLoadError: Loading chunk 40 failed. (error: http://localhost:8100/40.js) at requireEnsure (http://localhost:8100/runtime.js:127:26) at Array.map () at webpackAsyncContext (http://localhost:8100/main.js:425:34) at loadModule (http://localhost:8100/vendor.js:167829:166) at initializeComponent (http://localhost:8100/vendor.js:169460:20) at http://localhost:8100/vendor.js:169601:32 at ZoneDelegate.invoke (http://localhost:8100/polyfills.js:3594:26) at Zone.run (http://localhost:8100/polyfills.js:3359:43) at http://localhost:8100/polyfills.js:4090:36 at ZoneDelegate.invokeTask (http://localhost:8100/polyfills.js:3626:31)

It will be much better if you can provide code samples of your page, module, app.module code to better check and help you — Muhammad Omar ElShourbagy
Hi I am trying to do a login page with the following code public loginWithGoogle() { let condition = this.auth.connectionCheck(); if(condition === false) { this.dialog.showToast('Please check your internet connection'); return; } this.auth.signinWithGoogle().then(res => { this.storeUserAndNavigate(res); }, (err) => { console.log(err); this.showErrors(err); }) } This is happening in the login page when the app is loaded, using the lazy loading in project — Sai Sundeep
similarly, I couldn't show the modal controller as well tried with the toast and modal controller but no luck so can you help me out how to prefetch the ionic page when the app is loading to access so that I can show the modal if not how can I show the toast message — Sai Sundeep

North Halcyon North Halcyon · Accepted Answer · 2020-08-28T18:34:32

I've used custom PreloadService which initiate fake modal directly in it constructor:

@Component({
  template: '<div></div>'
})
class StubComponent {}

@Injectable({
  provideIn: 'root'
})
export class PreloadIonicComponentService {
  constructor(private modalCtrl: ModalController) {
    modalCtrl.create({
     component: StubComponent
    }).then(m => m.dismiss());
  }
}

Then I've used this service in my app.component.ts's constructor arguments. As a result build system will pack modal controller and related stuff into the main bundle.

PS: Also, I put there AlertController and ActionSheetController.

How to prefetch (+preload) a specific module in ionic 4?

1 Answers