How to solve the problem of a large number of components on a page in Angular?

Question

JavaScript

Good afternoon. When writing an application in angular, at some point there was a problem of having too many components that are not used all at once, but are loaded and located on the page. Basically, these are modal windows for editing a card of properties of certain entities or windows for selecting a certain entity from the list. At the same time, there is a certain level of nesting, that is, in the property editing card component there are components for selecting values ​​for these properties, and there may be several such selection components. As a result, all this leads to the fact that there are a large number of components on the page that are not necessarily used, but in any case are loaded, initialized and consume resources, somewhere this has already begun to lead to cyclic dependencies. All this looks rather crooked and wrong. So far I have the following ideas:
1 Load components dynamically, that is, open the window - the component is loaded, close it - it is unloaded.
2 Remove nesting - place all window components at the route level, bind a service to each of them and call if necessary, while dynamically loading or unloading.
Actually, the question is: am I looking for a solution in the right direction, if so, how best to implement it? If not, perhaps there are more traditional ways to solve the problem?

Answer 1

2 is not necessary)))))))) I think this is superfluous.
I didn't understand about the first one. How is that?)
Angular 2+ has a nice thing called lazy Module. If you want to unload the project with stuffed modals, it's better to divide the content into large pages into modules, and the modals in them will no longer be as noticeable as you think https://angular.io/guide/lazy-loading-ngmodules