Ionic 5: lazy-loaded modals
There are various optimization techniques provided and implemented by the Ionic team to ensure best application performance and functionality. Although, few things may be missing from the developer’s perspective, therefore it is our responsibility to provide our custom functionality that must meet certain expectations. One of them is lazy-loaded modals.
We’ll start off with creating a modal. If you have an existing modal, skip this step.
$ ionic generate page my-modalAfter you implement your modal, create a service that will help encapsulate logic related with the modal.
As you can see, with the aid of static typing, providing modal data is no longer error prone. Generally speaking, type enforcement is a good practice and should be used every time it’s possible. Later on, import the generated module into your desired component’s module, in which you want to use this modal. For instance, if you want to use the modal in HomePage, import the modal’s module as presented below.
Next, go to HomePage and create a method that invokes our modal on specific action.
Lastly, go to app-routing.module.ts and shift your attention to the imports array. You’ll notice the preloading strategy is set to PreloadAllModules. This means that Angular preloads all lazy-loaded modules, thus we lose the ability to load modules on demand. In addition, each module will be included in the main bundle after application build. Assuming your application will constantly grow, the final size of the bundle can slightly overwhelm you. Personally, I think the default strategy should be removed or at least switched for a custom strategy that preloads chosen modules and lazy loads the rest. For the sake of this article, I will remove this option.
Let’s run our application, open the Network tab in DevTools and invoke the openModal() method.
What exactly happened? After navigating to home route, Angular downloaded and loaded the HomePageModule in which HomePage is declared. Afterwards, it rendered this component. From this component, I invoked our implemented method and displayed the modal. However, the result is far from what we’ve intended. As you can see, our modal component code is included in the home module bundle. This is because we imported our modal’s module in home module. We want to lazy load our modal, meaning- to isolate our modal component code from the home module bundle. To do this, we have some changes to do.
Asynchronous Modules import
Ivy engine has brought a huge amount of new features. One of them is possibility to load non-routable modules and components asynchronously using the import keyword. There are only two steps you have to go through in order to accomplish lazy-loaded modals.
- Remove modal from module imports
Go to home.module.ts and remove MyModalPageModule from the imports array.
2. Import our module asynchronously.
Using import is not enough, because we’ll still have MyModalPage imported as value and injected in the create({ … }) method, thereby it won’t be tree-shakeable. In order to make it work correctly, we need to give the responsibility to return our component as value to our lazy loaded module. Doing the following, Angular will download and load our module and then we can get our component from the module and import it as value.
Let’s update our service method.
Let’s visit our application again and check the Network tab.
Nice! We managed to lazy load our modal on demand. We can now use this approach for different components in our application.
Conclusion
In this article, I showed you how to lazy load modals in Ionic applications. Moreover, the presented snippets can enlighten you how to organize and encapsulate your code and most importantly use the power of TypeScript for making types checks at compile time stronger.
