Search code examples
cordovaionic-frameworkionic3tesseract

Property 'set' does not exist on type 'NgProgress' & Property 'complete' does not exist on type 'NgProgress'


I'm new to this development of mobile applications and this is the code i got from a tutorial online here I have completely no idea how to do this

this is the code from home.ts

     recognizeImage() {
    Tesseract.recognize(this.selectedImage)
    .progress(message => {
      if (message.status === 'recognizing text')
      this.progress.set(message.progress);
    })
    .catch(err => console.error(err))
    .then(result => {
      this.imageText = result.text;
    })
    .finally(resultOrError => {
      this.progress.complete();
    });
  }

this is the code from home.html

    <ion-content padding>
  <ng-progress [min]="0" [max]="1"></ng-progress>

  <button ion-button full (click)="selectSource()">Select Image</button>
  <button ion-button full (click)="recognizeImage()" [disabled]="!selectedImage">Recognize Image</button>

  <img [src]="selectedImage" *ngIf="selectedImage">

  <ion-card *ngIf="imageText">
    <ion-card-header>
      Image Text
    </ion-card-header>
    <ion-card-content>
      {{ imageText }}
    </ion-card-content>
  </ion-card>
</ion-content>

Solution

  • The problem is your Angular's version doesn't compatible with ngx-progressbar's version. You can upgrade your angular or downgrade ngx-progressbar.

    In my project I downgraded ngx-progressbar to version 4. For example: npm install @ngx-progressbar/core@v4.3.0

    You can check the documentation in Git for more infomations. There are 2 docs 1 supports Angular >= 5 and another for Angular 2.x & 4.x