QZ giving errors on angular install and websocket not found - service

Question

I am trying to get my angular webapp working with a star sp 700 receipt printer and am trying to integrate qz-tray into my software for that reason. I am getting an error when trying to install #types/qz-tray which is displayed below. Also I get an error
unresolved variable websocket
on the line 23 and
unresolved variable api
on line 16.
Can someone please tell me how to fix this and if there is a better way of printing to either this or another receipt printer through angular?
import { Injectable } from '#angular/core';
import { from as fromPromise, Observable, throwError } from 'rxjs';
import { HttpErrorResponse } from '#angular/common/http';
import { catchError, map } from 'rxjs/operators';
import * as qz from 'qz-tray';
import { sha256 } from 'js-sha256';
#Injectable({
providedIn: 'root'
})
export class PrinterService {
//npm install qz-tray js-sha256 rsvp --save
constructor() {
qz.api.setSha256Type(data => sha256(data));
qz.api.setPromiseType(resolver => new Promise(resolver));
}
// Get the list of printers connected
getPrinters(): Observable<string[]> {
console.log('+++++++++PrinterService+++++');
return fromPromise(
qz.websocket.connect().then(() => qz.printers.find())
)
map((printers: string[]) => printers)
, catchError(this.errorHandler);
}
// Get the SPECIFIC connected printer
getPrinter(printerName: string): Observable<string> {
return fromPromise(
qz.websocket.connect()
.then(() => qz.printers.find(printerName))
)
map((printer: string) => printer)
, catchError(this.errorHandler);
}
// Print data to chosen printer
printData(printer: string, data: any): Observable<any> {
const config = qz.configs.create(printer);
return fromPromise(qz.print(config, data))
map((anything: any) => anything)
, catchError(this.errorHandler);
}
private errorHandler(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
console.log(error.error);
console.log('An error occurred:', error.status);
return throwError(error.error);
} else {
console.log('An error occurred:', error.status);
console.log(error.error);
return throwError(error.error);
}
};
}

Answer 1

unresolved variable websocket
unresolved variable api
These are both signs that qz-tray.js did not load properly.
The objects qz.api and qz.websocket are both part of the qz namespace. If they're not available, then qz was never imported properly.
Here's a working example of QZ Tray running in Angular:
https://stackblitz.com/edit/angular-3h4cnv
The import line appears to be correct and matches that of the QZ Tray angular quickstart guide.
The import * as qz should be valid according to TypeScript guidelines on exporting the default export of a module however you can safely convert it to import { default as qz } from "qz-tray";
As a troubleshooting step, you can call:
console.log(qz);
If loaded properly, it should show something like this:
Another troubleshooting technique would be to remove and reinstall qz-tray using your preferred package manager npm uninstall qz-tray; npm install qz-tray, etc.