1

I am using this code to preload any new images the browser has to fetch so it gets presented immediately in one piece instead of part by part.

  preloadCardImages(produceCards:Array<ProduceCardDTO[]>){
      let imageDecodeObservables= new Array();
      produceCards.forEach(produceCardList =>{
          produceCardList.forEach(produceCard =>{
              let image= new Image();
              image.src = produceCard.previewImageUrl;
              imageDecodeObservables.push(from(image.decode()).pipe(catchError(error => of('failed to load image')))); //from maakt van de promise een observable, catchError voorkomt dat bij het niet kunnen laden van 1 plaatje gelijk de hee forkJoin afgebroken wordt.
            }
          );
      });
      forkJoin(imageDecodeObservables).subscribe(response => this.loading = false)
  }

Yet when i serve the webapplication with the ng serve command I get this error. error TS2339: Property 'decode' does not exist on type 'HTMLImageElement'.

This is just plain wrong because when i look in the property and method suggestions for the image variable i can clearly see decode being one of the possible selections.

Also, the image preloading works just fine, so i really don't know what this error is about. So does anyone know how i can get rid of this faulty error?

Thank you

EDIT: I use VScode as the IDE

EDIT 2: Heres the devDependencies of my package.json

  "devDependencies": {
    "@angular-devkit/build-angular": "^0.6.8",
    "@angular/cli": "^6.2.8",
    "@angular/compiler-cli": "^6.1.10",
    "@angular/language-service": "^6.1.10",
    "@types/jasmine": "^2.8.12",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "~10.1.2",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~3.1.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^2.0.5",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.4",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.3.0",
    "ts-node": "~6.0.3",
    "tslint": "~5.10.0",
    "typescript": "^2.9.2"
  }

EDIT: Heres proof that the method decode doe exist on Image()

enter image description here

Maurice
  • 6,698
  • 9
  • 47
  • 104
  • hii look at this link may b it can help, there is a example shows how to use the decode() method https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode – kushal shah Dec 28 '19 at 12:39
  • i was already aware of this page @kushalshah – Maurice Dec 28 '19 at 12:43
  • @Maurice your implementation looks correct, is there any other use of `decode` in your codebase. Since the error says `property`. There maybe somewhere else that you use `.decode` as a property and not as a method `.decode()` – C.OG Dec 28 '19 at 12:44
  • @C_Ogoo these are the only 2 occurrences `ERROR in src/app/components/calendars/produce-card-display/produce-card-display.component.ts(101,54): error TS2339: Property 'decode' does not exist on type 'HTMLImageElement'. src/app/components/calendars/result-list/result-list.component.ts(136,52): error TS2339: Property 'decode' does not exist on type 'HTMLImageElement'.` Also, i did not have this error yesterday. In the meantime i didn't change anything to the code so this is super annoying. Could it be VSCode related? Should i reinstall something? – Maurice Dec 28 '19 at 12:47
  • it also says 'failed to compile' yet the website is accessible via localhost... – Maurice Dec 28 '19 at 12:48
  • I dont think its a VSCode issue if you're seeing the error in the console also. Especially with the `failed to compile` message. Whats your `TypeScript` version and your `TypeScript Compiler` version. I couldnt recreate the issue on Stackblitz either – C.OG Dec 28 '19 at 12:55
  • @C_Ogoo see my package.json in the original post – Maurice Dec 28 '19 at 12:58
  • The native `HTMLImageElement` has no `decode` method. Where does the method come from? _"when i look in the property and method suggestions for the image variable"_ - which "suggestions" are you talking about? – Andreas Dec 28 '19 at 13:08
  • @Andreas please see the screenshot i've made of the suggestion, it really does exist and yesterday everything worked fine... I didn't change anything to the code. – Maurice Dec 28 '19 at 13:13
  • Something adds the method to the native `HTMLImageElement`. But TypeScript doesn't know about this change, hence it throws the mentioned error. – Andreas Dec 28 '19 at 13:17
  • @Andreas, how do i prevent this from happening? – Maurice Dec 28 '19 at 13:24
  • This would then be a dupe of: [How to extend String Prototype and use it next, in Typescript?](https://stackoverflow.com/questions/39877156/how-to-extend-string-prototype-and-use-it-next-in-typescript) or [How does prototype extend on typescript?](https://stackoverflow.com/questions/12766117/how-does-prototype-extend-on-typescript) – Andreas Dec 28 '19 at 13:27
  • I was able to reproduce this by dropping down to Angular 6.1.10, and Typescript 2.9.2. Works fine with Angular 8.2.14, and Typescript 3.5.3. Consider upgrading (if possible). Angular 6 is no longer LTS. – R. Richards Dec 28 '19 at 18:29
  • hello @R.Richards i'm in the process of upgrading to Angular 9 RC7 now. I had a hunch this had something to do with a bug within Anguler 6+ – Maurice Dec 28 '19 at 19:39
  • @Maurice good luck with the upgrade! – R. Richards Dec 28 '19 at 19:44

0 Answers0