Angular Maximum call stack size exceeded

Question

I'm loading some images from a service like suggested in this thread but sometimes I get the error Maximum call stack size exceeded. I'm using Angular 7, I tried changing the load option in

reader.addEventListener("load", () => {

with loadendhoping that it will trigger in a different way, but I discovered that it don't different from load, but it will trigger also when the load fails.

Here is the full error in console:

ERROR RangeError: Maximum call stack size exceeded
    at String.match (<anonymous>)
    at _sanitizeUrl (core.js:11206)
    at DomSanitizerImpl.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DomSanitizerImpl.sanitize (platform-browser.js:1817)
    at setElementProperty (core.js:21108)
    at checkAndUpdateElementValue (core.js:21060)
    at checkAndUpdateElementInline (core.js:21007)
    at checkAndUpdateNodeInline (core.js:23358)
    at checkAndUpdateNode (core.js:23324)
    at debugCheckAndUpdateNode (core.js:23958)
    at debugCheckRenderNodeFn (core.js:23944)

Edit adding requested code:

  getMainImageFromService() {
    this.mainImageLoading = true;
    this.vehicleImageWebService.getImage('1').subscribe(data => {
      this.createImageFromBlob(data);
      this.mainImageLoading = false;
    }, error => {
      this.mainImageLoading = false;
      console.log(error);
    });
  }
  createImageFromBlob(image: Blob) {
    const reader = new FileReader();
    reader.addEventListener('loadend', () => {
      this.mainImage = reader.result;
    }, false);

    if (image) {
      reader.readAsDataURL(image);
    }
  }

Edit2:

<img [src]="mainImage" style="max-width: 100%" *ngIf="!mainImageLoading && mainImage">

it means that somewhere in your code, you are calling a function which in turn calls another function and so forth, until you hit the call stack limit. — Joel Joseph, Jun 21 '19 at 09:57
Could you please show the binding and the code inside the load listener? — joka00, Jun 21 '19 at 09:58
post the code where you have bind the image url and also if you are using DomSanitizer to sanitize the url then post that part too — Joel Joseph, Jun 21 '19 at 09:59
@DavideQuaglio can you please post the html part too ? means the image binding in the template — Joel Joseph, Jun 21 '19 at 10:12
@DavideQuaglio I am facing the same issue. Have you manage to fix it. Can you please help me with it. — user2423768, Aug 28 '19 at 06:54
@user2423768 yes, I needed to change the implementation...Here is what I'm doing, image is of type Blob. this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(image)) — Davide Quaglio, Aug 29 '19 at 10:49

Angular Maximum call stack size exceeded

0 Answers0