How to lazy load modals in Angular 7 module setup

Question

in my previous project we were using one big "app module" that imported everything (components, pipes, directives, pages) at the start of the app.

This is obviously not the best structure because as the app grows it gets slower.

We recently switched to Angular 7 using Ionic 4, and have lazy loading set up on the routes with a module for each page now. The Page Modules imports the Components Module

This works great...

The problem is when we get into modals that pop up over the page.

Note: I'm going to bold the word "modal" so as not to get confused with "module".

A button on a component may pop open a modal. So the component needs to import the modal module. The modal needs access to components so it imports the Components module. This causes a circular dependency.

What is the proper way for importing modals in a modular setup with lazy loading?

Answer 1

I guess there are multiple ways to avoid that circular dependency issue depending on your specific project, but one way could be the following: instead of being the component the one who opens the modal, that component could tell the parent page to actually open the modal (by emitting an event to the parent page when the button is clicked). That way the parent page would import the modal module (which could make sense as well in the context of your app for example, if the parent page is a list of pets and the modal shows the details of each pet).

I’m debating between going with that solution or just giving every component it’s own module and only importing the components I’m actually using into each other component/page/modal to kill the circular dependency. Maybe having a “core” components module for all the basic things that don’t have many dependencies

I'm glad that you mentioned that approach because that's exactly what I like to do in the projects I work on. I usually prefer each component to have its own module to have control over which components are imported on each page.

It usually happens that there's a "core" components module that is imported everywhere, but the problem is that some other developers may add components there because they are used in more than one page, but that results in those components being imported in ten or more pages even if those pages only use one or two components from that module.

It depends on how big your project is, how many components are there and how often they are imported by some other pages, but when talking about mobile apps (specially hybrid mobile apps) I think the most important thing is to be able to load pages as fast as possible, so importing only the components that each page actually needs sounds like the right way to go.