update to web-twain 18.3

Author: Ellie-dynamsoft

README.md

@@ -3,7 +3,7 @@
 This project demonstrates how to build an Angular scanning project with [Dynamsoft Web TWAIN SDK](https://www.dynamsoft.com/web-twain/overview/).  
 
 ## Usage
-Environment: Node.js v16.20.0
+Environment: Node.js v18.16.0
 1. Apply for a [30-day free trial license](https://www.dynamsoft.com/customer/license/trialLicense?product=dwt) of Dynamic Web TWAIN.
 
 2. Update the license key in `src\app\dwt\dwt.component.ts` file:

package.json

@@ -11,37 +11,37 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.0.0",
-    "@angular/common": "~12.0.0",
-    "@angular/compiler": "~12.0.0",
-    "@angular/core": "~12.0.0",
-    "@angular/forms": "~12.0.0",
-    "@angular/platform-browser": "~12.0.0",
-    "@angular/platform-browser-dynamic": "~12.0.0",
-    "@angular/router": "~12.0.0",
-    "dwt": "18.2.0",
-    "rxjs": "~6.6.0",
-    "tslib": "^2.1.0",
-    "zone.js": "~0.11.4"
+    "@angular/animations": "~16.0.0",
+    "@angular/common": "~16.0.0",
+    "@angular/compiler": "~16.0.0",
+    "@angular/core": "~16.0.0",
+    "@angular/forms": "~16.0.0",
+    "@angular/platform-browser": "~16.0.0",
+    "@angular/platform-browser-dynamic": "~16.0.0",
+    "@angular/router": "~16.0.0",
+    "dwt": "18.3.0",
+    "rxjs": "~7.8.1",
+    "tslib": "^2.5.2",
+    "zone.js": "~0.13.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.0.0",
-    "@angular/cli": "~12.0.0",
-    "@angular/compiler-cli": "~12.0.0",
-    "@angular/language-service": "~12.0.0",
-    "@types/node": "^12.11.1",
-    "@types/jasmine": "~3.6.0",
-    "codelyzer": "^5.1.2",
-    "jasmine-core": "~3.7.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~6.3.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.0",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
-    "protractor": "~5.4.3",
-    "ts-node": "~8.3.0",
-    "tslint": "~6.1.0",
-    "typescript": "~4.2.3"
+    "@angular-devkit/build-angular": "~16.0.0",
+    "@angular/cli": "~16.0.0",
+    "@angular/compiler-cli": "~16.0.0",
+    "@angular/language-service": "~16.0.0",
+    "@types/node": "^20.2.5",
+    "@types/jasmine": "~4.3.2",
+    "codelyzer": "^6.0.2",
+    "jasmine-core": "~4.0.0",
+    "jasmine-spec-reporter": "~7.0.0",
+    "karma": "~6.4.2",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage-istanbul-reporter": "~3.0.3",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "^2.0.0",
+    "protractor": "~7.0.0",
+    "ts-node": "~10.9.1",
+    "tslint": "~6.1.3",
+    "typescript": "~4.9.5"
   }
 }

src/app/dwt/dwt.component.ts

@@ -11,32 +11,28 @@ export class DwtComponent implements OnInit {
   DWObject: WebTwain;
   selectSources: HTMLSelectElement;
   containerId = 'dwtcontrolContainer';
-  bWASM = false;
   deviceList=[];
   constructor() { }
   ngOnInit(): void {
     Dynamsoft.DWT.Containers = [{ WebTwainId: 'dwtObject', ContainerId: this.containerId, Width: '300px', Height: '400px' }];
     Dynamsoft.DWT.RegisterEvent('OnWebTwainReady', () => { this.Dynamsoft_OnReady(); });
     Dynamsoft.DWT.ResourcesPath = '/assets/dwt-resources';
-	  Dynamsoft.DWT.ProductKey = 't0100CgEAAI/Kalkph+rANa7xvFeYzy2ZJaF0sV188r8K/knF/akFHHvAHdHAtGHQJrpxP+nqlDJkXOD65sKMbWhdmp6b7QgCWLr5A0huNQqu+DW0v3gAgcFwAvEGSBQj0nwHo981mg==';
+	  Dynamsoft.DWT.ProductKey = 't0106KwEAAHS5i/IQMtobY1KiE0ohnvp0rYQ6Odqe3YSTuwoeLvNCke4y7UccAqchMe1OUgSW/vPP42qfMZqjyorwWR/DnRUBbMP5AyjcPbyr+HVod/EEDJNDB2wFSOh/Xnlxg6lISUkO19Q75w==';
     Dynamsoft.DWT.Load();
   }
 
   Dynamsoft_OnReady(): void {
     this.DWObject = Dynamsoft.DWT.GetWebTwain('dwtcontrolContainer');
-    this.bWASM = Dynamsoft.Lib.env.bMobile || !Dynamsoft.DWT.UseLocalService;
     this.selectSources = <HTMLSelectElement>document.getElementById("sources");
-    if(!Dynamsoft.Lib.env.bMobile){
-      this.DWObject.GetDevicesAsync().then((devices)=>{
-        this.selectSources.options.length = 0;    
-        for (var i = 0; i < devices.length; i++) { // Get how many sources are installed in the system
-            this.selectSources.options.add(new Option(devices[i].displayName, i.toString())); // Add the sources in a drop-down list
-            this.deviceList.push(devices[i]);
-          }
-        }).catch(function (exp) {
-          alert(exp.message);
-        });
-    }		
+    this.DWObject.GetDevicesAsync().then((devices)=>{
+      this.selectSources.options.length = 0;    
+      for (var i = 0; i < devices.length; i++) { // Get how many sources are installed in the system
+          this.selectSources.options.add(new Option(devices[i].displayName, i.toString())); // Add the sources in a drop-down list
+          this.deviceList.push(devices[i]);
+        }
+      }).catch(function (exp) {
+        alert(exp.message);
+      });	
   }
 
   acquireImage(): void {

tsconfig.json

@@ -10,7 +10,7 @@
     "module": "esnext",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2022",
     "lib": [
       "es2018",
       "dom"