Is there a way to disable a lazy loading in Angular v19 standalone components?

In older versions of Angular, where we used to have module-based applications, it would load a module once and even if you close components that are exported by that module - it wouldn't load that module again, even if you opened the component once again. But now that we're slowly migrating to standalone components - I'm facing an interesting behavior regarding the lazy loading "feature". In the GIF below, by clicking a dropdown arrow - I'm rendering three instances of the same component, that has its' images and styles. As you can see, for a microsecond there, the layout is not styled initially and a scrollbar appears and disappears after the component's styles are fully loaded.



If you take a look at the network tab, we can see that it loads images of that component once and css file of that component each time we try to render it:



So as you can see, my goal here is to prevent that behavior from happening over and over again, ideally I would want to load it all initially, when the page is loaded. Here's the code for the component that's lazy loaded:

<div class="hive-info">
<img [src]="'beehive' | svgPath" class="hive-icon" />
<div class="hive-name">{{ hiveName }}</div>
<div class="hive-weight">{{ hiveWeight }}</div>
<action-icon iconPath="chart-icon" iconClass="img standard-img" iconTitle="Chart" />
</div>


@Component({
selector: 'hive-info',
imports: [SvgPathPipe, ActionIconComponent],
templateUrl: './hive-info.component.html',
styleUrl: './hive-info.component.scss'
})
export class HiveInfoComponent {
@Input() hiveName: string = 'Beehive 1';
@Input() hiveWeight: string = '20 kg'
}


And here's how that component is used in the other component:

@if (isDropdownToggled) {
@for (hive of hives; track hive.name) {
<hive-info [hiveName]="hive.name" [hiveWeight]="hive.weight" />
}
}


@Component({
selector: 'hive-group',
imports: [ActionIconComponent, SvgPathPipe, FormsModule, HiveInfoComponent],
templateUrl: './hive-group.component.html',
styleUrl: './hive-group.component.scss'
})
export class HiveGroupComponent {
@Input() groupName: string = '';

isEditing: boolean = false;
isDropdownToggled: boolean = false;
editableGroupName: string = '';

onEditClick(): void {
this.isEditing = true;
this.editableGroupName = this.groupName;
}

onConfirmClick(): void {
// TODO: send request to back-end to update group name (emit event with new group name to the parent component)
this.groupName = this.editableGroupName;
this.isEditing = false;
}

onCancelClick(): void {
this.isEditing = false;
}

toggleDropdown(): void {
this.isDropdownToggled = !this.isDropdownToggled;
}

hives = [
{name: "Hive 1", weight: "20 kg"},
{name: "Hive 2", weight: "15 kg"},
{name: "Hive 3", weight: "25 kg"}
];
}

Continue reading...