I find myself in a situation where I need to load numerous components on a specific route within my application. These components are controlled by a logic with *ngIf directives that allow me to show or hide them dynamically.
For instance:
<div *ngIf="active_slot_one"> <component-one></component-one> </div>
<div *ngIf="active_slot_two"> <component-two></component-two> </div>
<div *ngIf="active_slot_three"> <component-three></component-three> </div>
<div *ngIf="active_slot_four"> <component-four></component-four> </div>
These components are imported from different libraries that I have created. Therefore, in the module of the parent page, I must import all modules that declare and export these components from my libraries.
I want to import this module lazily, so I attempt to import the required module only when the corresponding variable active_slot_x becomes true using the following function:
loadModule(value: boolean, module: string) {
switch(module) {
case 'one':
!!value && (await import('lib-one').then(m => m.LibOneModule)); // line for lazy loading module
this.active_slot_one = value;
case other_case:
// same as above
}
}
By utilizing this function, I activate and deactivate the correct components. By removing all imports from my parent page module and inserting the line mentioned above before activating the ngIf, I anticipate the components will load correctly.
Upon compiling my app, the main.js file is smaller than before and Module One appears in the Lazy Chunk Files.
https://i.sstatic.net/WnV59.png
Furthermore, the modules are imported precisely when needed.
https://i.sstatic.net/3BqOP.png
However, upon activating the ngIf, the component does not display on the page.
What could be the issue here?
----- ADDITIONAL INFORMATION -----
When statically importing Module One into the parent page module, activating the ngIf shows the slot with the component inside, along with the indicator arrow signaling content within the component:
https://i.sstatic.net/Z0HWv.png
Conversely, with lazy loading implemented using the aforementioned function, the DOM consistently displays the slot with the component inside, but the component itself appears empty: