Using JavaScript Global Library in Angular CLI Application

Not like AngularJS 1.x written in JavaScript, Angular is a complete rewrite using TypeScript. When migrating your project from AngularJS to Angular, you may wonder how to use JavaScript global libraries, such as jQuery, in the new framework.  In this article, I will use DWT (Dynamic Web TWAIN) JavaScript library as an example to illustrate how to use a JavaScript global library in an Angular CLI application.

Angular Dynamic Web TWAIN

Environment

@angular/cli: 1.0.3
node: 7.9.0
os: win32 x64
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/core: 4.1.2
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/router: 4.1.2
@angular/cli: 1.0.3
@angular/compiler-cli: 4.1.2

Using Dynamic Web TWAIN with Angular

Install Angular CLI:

npm install -g @angular/cli

Initialize an Angular project:

ng new web-scan

There are many non-essential files generated. To get a clean project, create non-essential-files.txt by referring to https://github.com/angular/quickstart.:

.git
.gitignore
.travis.yml
*.spec*.ts
bs-config.e2e.json
CHANGELOG.md
e2e
favicon.ico
karma.conf.js
karma-test-shim.js
LICENSE
non-essential-files.txt
non-essential-files.osx.txt
protractor.config.js
README.md

Then delete these files using following commands on Windows:

for /f %i in (non-essential-files.txt) do del %i /F /S /QDelete non-essential files:
rd .git /s /q
rd e2e /s /q

Install Dynamic Web TWAIN JavaScript library – dynamsoft.webtwain.min.js:

npm install dwt --save

Install TypeScript declaration file (.d.ts) for Dynamic Web TWAIN:

npm install @types/dwt --save

Dynamic Web TWAIN JavaScript library is a global library as same as jQuery. To include the library, open .angular-cli.json and add the library path to scripts:

"scripts": ["../node_modules/dwt/dist/dynamsoft.webtwain.min.js"],

Alternatively, you can add the link to src/index.html:

<script type="text/javascript" src="http://www.dynamsoft.com/library/dwt/dynamsoft.webtwain.min.js"> </script>

Edit src/app/app.component.ts to add a function for scanning documents:

export class AppComponent {
  title = 'Using Dynamic Web TWAIN in Angular Project';

  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);
    }
  }
}

Add a button and a div element to src/app/app.component.html:

<button (click)="acquireImage()">Scan Document</button>
<div id="dwtcontrolContainer"></div>

That’s it. Try to run the app:

ng serve --open

I got an error message:

Angular cannot find name

‘Dynamsoft’ is not found. How to fix the issue? Can we use ‘require’ to get the reference?

Angular cannot find require

Apparently, it is not the right way. To make compiler recognize the reference, we can use triple-slash directives. Add either /// <reference path=”…” /> or /// <reference types=”…” /> to the top of src/app/app.component.ts:

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

import {Component} from '@angular/core';

The app is working now:

Angular web document scan

Source Code

https://github.com/dynamsoft-dwt/angular-cli-application

  • Mukesh Kumar Soni

    this solution is not working for me in angular 4. I am getting null against
    const dwObject = Dynamsoft.WebTwainEnv.GetWebTwain(‘dwtcontrolContainer’);

  • Pavan Penjandra

    Hi Xiao,
    We tried this but it did not work.Please provide the solution as we have release in this weekend (18-02-2018).We are not able to upload text-pdfs in image buffer.

  • http://www.dynamsoft.com/ Xiao Ling

    I’ve updated the index.d.ts file and sent a pull request to https://github.com/DefinitelyTyped/DefinitelyTyped/pull/23498. Although the latest version has not been merged to @types/dwt yet, you can get it via ‘npm install dwt’. The file is located at dwt/dist/index.d.ts.

  • Pavan Penjandra

    How to implement PDFRasterizer in Angular 4 ??
    for javascript, code given in the following link
    https://developer.dynamsoft.com/dwt/guide/using-add-ons/how-to-use-the-pdf-rasterizer

    But for angular4 ,typescript code for Dynamsoft PDF Addon missing in @types/dwt

  • Pavan Penjandra

    Thanks issue resolved

  • http://www.dynamsoft.com/ Xiao Ling

    Have you installed all dependent packages? “npm install @types/dwt” and “npm install dwt”.

  • Pavan Penjandra

    Hi Xiao Ling,
    I downloaded the your example from git ,Im facing same issue.
    ERROR TypeError: Cannot read property ‘SelectSource’ of null
    at AppComponent.webpackJsonp.117.AppComponent.acquireImage (app.component.ts:15)
    at Object.eval [as handleEvent] (AppComponent.html:5)
    at handleEvent (core.es5.js:11998)

  • frh

    How can I restrict in angular 4 the installation prompt to an specific component route

  • http://www.dynamsoft.com/ Xiao Ling

    Have you tried my sample?

  • Vignesh Vaidyanathan

    I am trying with Angular 4 application and I get null for the Dynamsoft.WebTwainEnv.GetWebTwain(‘dwtcontrolContainer’); line. Any idea on whats going wrong