Angular Integration Guide

SDK Initialization

SDK initialization should be done as early as possible, and only once. Angular apps usually contain a root component (named AppComponent by default). The AppComponent's ngOnInit is a convenient place to initialization the SDK, even better is to use a Service to encapsulate interaction with the SDK.

Using a Service

If you intend to read barcodes in multiple screens and not just in a single component, it makes sense to move common code into a Service. Good candidates for putting in a Service are:

Scanning results

Using an Observable in the Service allows propagating scanned codes to components.

Initialization

Singleton services are initialized once, which makes them a good fit for initialization (which also happens only once).

Configuration

Sharing common parts of BarcodeReader configuration avoids duplication.

Our Angular sample contains an example of such a Service: ScannerService

Using route guards to require SDK initialization for routes that need scanning

Using a route guard is an idiomatic way of requiring certain conditions to be met before accessing a part of your app.

Screens requiring a BarcodeReader rely on the SDK to be initialized. This can be achieved by putting a guard on the route that checks the SDK initialization status. Our Angular sample contains an example of a guard that will only permit navigating to a route if the SDK is initialized: sdkInitialized guard

Initializing BarcodeReader in ngAfterViewInit

The BarcodeReader requires a host element with known size to be present. An Angular component typically provides the host element in its template. Using the ngAfterViewInit lifecycle hook ensures that the component has finished initializing its view and child views, and is therefore an appropriate place to initialize the BarcodeReader.

• Angular component lifecycle

Calling destroy() when BarcodeReader is no longer needed

Components that include a BarcodeReader in their content need to destroy the BarcodeReader instance when they no longer intend to use it, otherwise the camera can remain in use, causing subsequent initializations to fail.

The ngOnDestroy component lifecycle hook is an appropriate place for calling BarcodeReader.destroy(), as it is invoked when the component is destroyed by Angular, for instance during a navigation event.

Serving your app during development

STRICH uses the smartphone camera to scan barcodes. Access to the smartphone camera is only available in secure origins, so your app needs to be served over HTTPS.

The Angular development server (ng serve) supports serving via HTTPS using the --ssl command-line argument Binding to 0.0.0.0 instead of localhost (the default) allows to easily test on a smartphone connected to the same network as the developer machine.

If you are using the popular ngrok tool to serve your app, you might instead serve over plain HTTP, but then you need to disable checking of the Host header.

Sample Project

In addition to this guide, we also provide a sample project showing how to integrate of the SDK into an Angular application. Some of the aspects that are shown are:

• Decoupling application logic from SDK and BarcodeReader by using a Service

• Wrapping BarcodeReader UI and lifecycle management into a Component

• Using route guards to enforce preconditions (SDK is initialized) and postconditions (BarcodeReader is destroyed) when entering and leaving a route