QZ Tray Angular 11, 12, 13...

qz-tray-angular.md

See also https://qz.io/wiki/api-overrides which has been updated to include these examples.

1. QZ Tray uses the browser's path, but this is incompatible with Angular's browserless compiler. Allow the user of the browser's path by toggling this compiler feature off.

   package.json:

   -  }
   +  },
   +  "browser": {
   +    "path": false
   +  }
   }

2. QZ Tray does not ship as an Angular module. Make a stub "any" module (no type definitons)

   qz-tray.d.ts

   declare module 'qz-tray';

3. QZ Tray requires a special "any" import statement to work with Angular.

   import * as qz from 'qz-tray';

4. Now, to test that it's working, add a sample method definition to use the API: app.component.ts

   export class AppComponent {
     title = 'my-app';
   + connect() {
   +   qz.websocket.connect();
   + }
   }

5. Add a button to trigger this method: app.component.html

   <button (click)="connect()">Connect</button>