Angular Integration Example WASM

Please find below a sample code that will help you get through the integration problem with Angular.

Here is the link where you can download the code to get started WASM / Angular Integration Sample and unpack it in your preferred location.

It's based on Angular 16 dependencies but it shouldn't be any different in earlier or later versions of the Angular framework. The main implementation is in app.component.ts

The steps for using this project are:

                npm install

npm run build
            

Note that the 2nd command creates a production-ready build, which is meant to be deployed under a production web server (Apache, etc). In that case, before executing the 2nd command, you should modify the package.json file:

                "build": "ng build --base-href /path/angular_demo/dist/barkoder-angular-demo/",
            

in the above line, the path should be changed to the actual path where the angular_demo directory will be w.r.t. the web server root directory.

Another way of trying out the project is with:

                npm start
            

which will host the app on http://localhost:4200/

One thing to note, if you are trying to do the same in your own project, is the usage of wasm binary files. These are copied during prebuild (package.json), and are listed as assets (angular.json):

                    "assets": [
                  "src/favicon.ico",
                  "src/assets",
         "src/barkoder.wasm",
         "src/barkoder_nosimd.wasm"
                ],
            

so if you want to match our demo, you should match what is done in package.json and in angular.json for the barkoder.wasm and barkoder_nosimd.wasm files. The main goal is for those resources to be part of the module system, and to be added in the generated build.

Enabling Symbologies #

Here's a detailed and refined explanation of how you can enable individual symbologies for barcode scanning using both direct configuration and JSON configuration in JavaScript:

Enabling Symbologies Directly #

You can enable individual symbologies directly by passing the decoders (symbologies) to enable as arguments. Here's a method that demonstrates how to do this:

                this.Barkoder.setEnabledDecoders(
    this.Barkoder.constants.Decoders.QR,
    this.Barkoder.constants.Decoders.Ean8,
    this.Barkoder.constants.Decoders.PDF417
);
            

This is the entire list of all decoders/symbologies:#

                    Barkoder.constants.Decoders.Aztec
    Barkoder.constants.Decoders.AztecCompact
    Barkoder.constants.Decoders.QR
    Barkoder.constants.Decoders.QRMicro
    Barkoder.constants.Decoders.Code128
    Barkoder.constants.Decoders.Code93
    Barkoder.constants.Decoders.Code39
    Barkoder.constants.Decoders.Codabar
    Barkoder.constants.Decoders.Code11
    Barkoder.constants.Decoders.Msi
    Barkoder.constants.Decoders.UpcA
    Barkoder.constants.Decoders.UpcE
    Barkoder.constants.Decoders.UpcE1
    Barkoder.constants.Decoders.Ean13
    Barkoder.constants.Decoders.Ean8
    Barkoder.constants.Decoders.PDF417
    Barkoder.constants.Decoders.PDF417Micro
    Barkoder.constants.Decoders.Datamatrix
    Barkoder.constants.Decoders.Code25
    Barkoder.constants.Decoders.Interleaved25
    Barkoder.constants.Decoders.ITF14
    Barkoder.constants.Decoders.IATA25
    Barkoder.constants.Decoders.Matrix25
    Barkoder.constants.Decoders.Datalogic25
    Barkoder.constants.Decoders.COOP25
    Barkoder.constants.Decoders.Code32
    Barkoder.constants.Decoders.Telepen
    Barkoder.constants.Decoders.Dotcode
    Barkoder.constants.Decoders.Databar14
    Barkoder.constants.Decoders.DatabarLimited
    Barkoder.constants.Decoders.DatabarExpanded