Angular 17 - pdf export

Angular 17 - pdf export

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

• 

  cmayeux

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 29 April 2024, 9: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 30 April 2024, 8:25 am 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 2 May 2024, 4:37 am 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

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 6 September 2024, 1:02 am EST

  Hi,

  The engineering team found that this issue is not in Wijmo but rather an issue of Vite’s build process. This issue has been reported to the Vite team, you can refer to this link for more information: https://github.com/vitejs/vite/issues/18036

  We will update you when we have more information on this case.

  Regards

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 26 November 2024, 3:05 am EST

  Hi,

  The issue is now resolved by the Vite team, and the fix is available in “vite”: “6.0.0-beta.10” version. Hence, the issue will be resolved in the upcoming stable release of Vite.

  Unfortunately, Angular doesn’t provide an option to update the Vite version unless you want to use a custom builder for the project. So, you can either use a custom builder for your project using ‘angular-builders/custom-esbuild’ if you want to use Vite or use the previous builder which was used in Angular older versions, by using the workaround config we shared earlier.

  Regards