Angular 17 - pdf export

Angular 17 - pdf export

Posted by: cmayeux on 29 April 2024, 12:05 am EST

• 

  cmayeux

  • Post Options:
  • Link
    Copy

  Posted 29 April 2024, 12:05 am EST

  Hello,

  Since we switched to Angular 17, we’ve encountered a critical error during PDF export (see the end of this message).

  When looking at the following example, we couldn’t figure out the source of the error:
  
  https://developer.mescius.com/wijmo/demos/Grid/ImportExportPrint/PDF/ExportToFile/angular

  After downloading the code (click the zip icon), I realized that this example used Angular 16 and wasn’t integrated into a real Angular application. So, I created a new Angular 17 application using the following command:

  npx @angular/cli new

  I chose “sass” for the style and responded “no” for server-side rendering (SSR). Then, I copied and pasted the example into this new Angular application.

  Then, I served the application.

  When I clicked on the export button, I reproduced the error.

  In the provided zip file, make sure to use the pdf-export-bug branch and then run npm ci.

  The problem seems to originate from the following function:

  function _asPdfFont(e, t) {
  
  void 0 === t && (t = true);
  
  assert(null == e && t || e instanceof PdfFont, _Errors.InvalidArg(“value”));
  
  return e;
  
  }

  More specifically, the problem seems to come from the instanceof PdfFont condition, which returns false even when setting the font as follows:

  doc.setFont(new PdfFont(‘Helvetica’, 12));

  We also noticed an error with the use of doc.drawSvg, where we get the following error message:

  ERROR ** Assertion failed in Wijmo: This method cannot be used until the current path is finished.

  I didn’t try to reproduce this error, because I think it is similar to the one encountered with exporting the grid to a PDF.
  
  => You just need to test your code examples in a real Angular 17 application.

  Export pdf grid :
  
  ERROR ** Assertion failed in Wijmo: Invalid argument: “value”. assert@http://localhost:4200/@fs/C:/aefface/Grid_ImportExportPrint_PDF_ExportToPdfDocument_Ang/pdf-export-wijmo/.angular/cache/17.3.6/vite/deps/chunk-C3FHCRWA.js?v=d01ed2a0:935:13
  
  _asPdfPen@http://localhost:4200/@fs/C:/aefface/Grid_ImportExportPrint_PDF_ExportToPdfDocument_Ang/pdf-export-wijmo/.angular/cache/17.3.6/vite/deps/@mescius_wijmo__pdf.js?v=d01ed2a0:15056:9
  
  pdf-export-wijmo.7z

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 29 April 2024, 11:25 pm EST

  Hi,

  Thank you for sharing the sample, we are investigating this issue, it will take some time. We will update you on its progress, as soon as possible.

  Regards

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 1 May 2024, 7:37 pm EST

  Hi,

  On deeply investigating the issue, we found that there has been a change in the build process in Angular 17, which has caused this issue. ESBuild is used as a default tool for building the application in Angular 17, earlier Webpack was used by default. We have forwarded this issue to the dev for further investigation with internal tracking ID - WJM-33837. We will update you on its progress, as soon as we have a response from the dev team.

  For now, as a workaround you can switch to the previous build tool in your Angular application, here are the configuration changes required in the ‘angular.json’ file -

  // Default Config
  ...
  "architect": {
          "build": {
            "builder": "@angular-devkit/build-angular:application",
            "options": {
              ...
              "browser": "src/main.ts",
              ...
            }
  ...
  
  // Updated Config
  ...
  "architect": {
          "build": {
            // update builder
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
              // replace 'browser' property with 'main'
              "main": "src/main.ts",
              ...
            }
  ...

  Please refer to the updated sample for the same.

  Regards

  pdf-export-wijmo_Updated.zip