QZ 在角度安装和 websocket 未找到错误答案

【问题标题】：QZ giving errors on angular install and websocket not foundQZ 在角度安装和 websocket 未找到错误
【发布时间】：2019-11-24 16:42:32
【问题描述】：

我正在尝试让我的 angular webapp 与 star sp 700 收据打印机一起使用，并因此尝试将 qz-tray 集成到我的软件中。尝试安装下面显示的@types/qz-tray 时出现错误。我也得到一个错误

unresolved variable websocket

在第 23 行和

unresolved variable api

在第 16 行。

谁能告诉我如何解决这个问题，以及是否有更好的方法可以通过 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);
    }
  };
}

【问题讨论】：

标签： service angular6 network-printers qz-tray

【解决方案1】：

未解决的变量websocket
未解析的变量api

这些都是qz-tray.js 没有正确加载的迹象。

对象qz.api 和qz.websocket 都是qz 命名空间的一部分。如果它们不可用，则 qz 从未正确导入。

这是一个在 Angular 中运行的 QZ Tray 的工作示例： https://stackblitz.com/edit/angular-3h4cnv

导入行似乎是正确的，并且与 QZ Tray angular quickstart guide 的行匹配。
import * as qz 应该是 valid according to TypeScript guidelines on exporting the default export of a module 但是您可以安全地将其转换为 import { default as qz } from "qz-tray";

作为故障排除步骤，您可以致电：

console.log(qz);

如果加载正确，它应该显示如下内容：

另一种故障排除技术是使用您首选的包管理器npm uninstall qz-tray; npm install qz-tray 等删除并重新安装qz-tray。

【讨论】：