Angular 4 DWT JavaScript Library not working in mo

Question

Currently, I want use DWT Javascript library to scan the documents I followed these steps http://www.codepool.biz/javascript-global-library-angular-cli.html for a new project, it worked perfectly fine. When I try to incorporate into my main project I'm facing few issues like the progress bar model is will be present all the time no matter what happens.

but when using the same code inside the model, not able to get the result.

code

<ng-template #scanModal let-c="close " let-d="dismiss ">
   <div class="modal-header ">
      <h6 class="modal-title text-uppercase ">Scan Document</h6>
      <button type="button " class="close pointer" aria-label="Close " (click)="d( 'Cross click') ">
      <span aria-hidden="true ">&times;</span>
      </button>
   </div>
   <div class="modal-body">
      <button (click)="acquireImage()">Scan Document</button>
      <div id="dwtcontrolContainer"></div>
   </div>
   <span id="alert alert-danger">&nbsp; </span>
   <div id="info" style="display:none; padding:20px 30px; width: 350px; border: solid 1px #e7e7e7;">
      The <strong>PDF Rasterizer</strong> is not installed on this PC
      <br />Please click the button below to get it installed
      <p> <button (click)="downloadPDFR();">Install PDF Rasterizer</button></p>
      <i><strong>The installation is a one-time process</strong> <br />
      It might take some time depending on your network.</i>
   </div>
   <br/>
   </div>
</ng-template>

when the model opens I'm getting this error

RegisterComponent.html:376 ERROR TypeError: Cannot read property 'SelectSource' of null

there is no change in the TS code i just pasted HTML snippet into the model.

TS code

acquireImage(): void {
    const dwObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
    const bSelected = dwObject.SelectSource();
    if (bSelected) {
      const onAcquireImageSuccess = () => { dwObject.CloseSource(); };
      const onAcquireImageFailure = onAcquireImageSuccess;
      dwObject.OpenSource();
      dwObject.AcquireImage({}, onAcquireImageSuccess, onAcquireImageFailure);
    }
  }

Thanks in advance.

Answer 1

For the first problem, please check out the other post dwt-java-script-library-progress-dialogue-automatically-displays-with-angular-5

For the 2nd problem. If would appear to be caused by missing of Types definition. Have you included the following line in your TS?

/// <reference types="dwt" />