How to Use Dynamsoft JavaScript Barcode SDK in Angular

Dynamsoft JavaScript barcode SDK is built based on WebAssembly. In this article, I will illustrate how to build a simple web barcode reader app by using Dynamsoft JavaScript barcode SDK and Angular.

Using JavaScript Barcode SDK in an Angular CLI Project

Create an Angular CLI project

Install Angular CLI:

npm install -g @angular/cli

Create a new project:

ng new barcode-reader

Build and run the app:

ng serve --open

Use Dynamsoft JavaScript barcode library

Open src/index.html to add <script> elements. Declare ‘dynamsoft’ as a global variable:

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script id="script"></script>
  <script >var dynamsoft = self.dynamsoft || {};

Add an HTMLImageElement (loading animation), an HTMLInputElement (file picker) and an HTMLDivElement (text display) to src/app/app.component.html:

<div style="text-align:left">
    Welcome to {{ title }}!
  <img src="assets/loading.gif" style="margin-top:10px" id="anim-loading">
    <input id="uploadImage" type="file" accept="image/bmp,image/jpeg,image/png,image/gif" (input)="readBarcode()">
  <div><b>Barcode result:</b> {{results}}</div>

In src/app/app.component.ts, add a constructor() to initialize ‘dynamsoft’ and dynamically load the Dynamsoft JavaScript barcode library:

export class AppComponent {
    title = 'Dynamsoft Barcode Reader';
    results = '';

    constructor() {
        const env = this;
        dynamsoft.dbrEnv = dynamsoft.dbrEnv || {};
        dynamsoft.dbrEnv.resourcesPath = '';
        dynamsoft.dbrEnv.licenseKey =
        dynamsoft.dbrEnv.bUseWorker = true;
        dynamsoft.dbrEnv.onAutoLoadWasmSuccess = function() {
            env.reader = new dynamsoft.BarcodeReader();
            document.getElementById('anim-loading').style.display = 'none';
        dynamsoft.dbrEnv.onAutoLoadWasmError = function(ex) {

        let bMobileSafari =
            /Safari/.test(navigator.userAgent) &&
            /iPhone/.test(navigator.userAgent) &&

        let script = document.getElementById('script');
        if (!bMobileSafari) {
            script.src = '';
        } else {
            // bMobileSafari
            // js for mobile(safari especially): smaller, compile quicker, need less memory, but not that stable
            script.src = '';

Create a function readBarcode() for binding the HTMLInputElement:

readBarcode(): void {
        const env = this;
        let image = document.getElementById('uploadImage').files[0];
        if (!image) {
            alert('Please add an image');
            .then(function(results) {
                var txts = [];
                for (var i = 0; i < results.length; ++i) {
                env.results = JSON.stringify(txts);
            .catch((ex) => {

That’s it. I can now successfully run the app:

Angular WebAssembly barcode

Fix Angular CLI errors

Although the web barcode reader runs well, there are some errors displayed in the command line tool:

angular error

Seeing so many errors makes me uncomfortable, and thus I have to fix them.

‘dynamsoft’ is a global variable which is invisible in app.component.ts. We can declare it as follows:

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

declare var dynamsoft: any;

    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]

To fix the property error, we can cast the corresponding HTML Elements with specific types:

if (!bMobileSafari) {
            (<HTMLScriptElement >script).src = '';
        } else {
            // bMobileSafari
            // js for mobile(safari especially): smaller, compile quicker, need less memory, but not that stable
            (<HTMLScriptElement >script).src = '';
let image = (<HTMLInputElement>document.getElementById('uploadImage')).files[0];

Source Code