Notice some intermittent load failure when opening up the ngx-bootstrap-modal to load the ngx-image-cropper. Did some try and error, I've noticed that as long as I open the modal before loadImageFailed() triggered. The cropper will load and everything seems to work fine. Is it got to do with not rendering to the DOM?
I can't find the cause of it though, or am I missing something?
Hope to get some light on this.
Thanks in advance.
Here is how the modal looks like:
<!-- EDIT MODAL -->
<article bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="dialog-sizes-name1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form (ngSubmit)="instructorService.updateCover(instructor.id)">
<section class="modal-header">
<h4 id="dialog-sizes-name1" class="modal-title pull-left">EDIT BANNER</h4>
<button type="button" class="close pull-right" (click)="lgModal.hide()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</section>
<section class="modal-body">
<cropper></cropper>
</section>
<section class="modal-footer d-flex bd-highlight">
<div class="mr-auto p-2 bd-highlight">
<input class="overflow-x" type="file" (change)="onSelectFile($event)" hidden #browser>
<button type="button" class="btn btn-pri" (click)="browser.click()"><b>BROWSE</b></button>
</div>
<div class="p-2 bd-highlight">
<button type="button" class="btn btn-sec btn-block"
(click)="lgModal.hide()"><b>CANCEL</b></button>
</div>
<div class="p-2 bd-highlight">
<button type="submit" class="btn btn-dark btn-block px-4"
(click)="lgModal.hide()"><b>SAVE</b></button>
</div>
</section>
</form>
</div>
</div>
</article>
Manage to solve it by hooking it up to the lazy-loading component method. But I think that this might just be a workaround. But hey, While waiting for someone else to shine some light, this might just be of help to any of you to pass by.
For how to lazy-load a component. I found this great article by Netanel Basal.
https://netbasal.com/welcome-to-the-ivy-league-lazy-loading-components-in-angular-v9-e76f0ee2854a
Cheers~