Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

svg2pdf.js: "path" dont works on angular build --prod #157

Open
Solangetatiana opened this issue Oct 7, 2020 · 4 comments
Open

svg2pdf.js: "path" dont works on angular build --prod #157

Solangetatiana opened this issue Oct 7, 2020 · 4 comments
Labels
difficulty:medium help wanted Help with creating a proper test-case, looking up the spec, or creating a pull request.

Comments

@Solangetatiana
Copy link

"path" dont works on angular build --prod
or even when file angular.json has the options below set to build in dev (the same when build --prod ):

            "aot": true,
            "optimization": true,

Steps to reproduce the behavior:
Foloow the github link:
https://github.com/Solangetatiana/example-path-svg2pdf

  1. 1 The SVG sample has rect, line, path and circle:
  <svg id="area_svg_print" xmlns="http://www.w3.org/2000/svg"
     width="400"
     height="400"
     viewBox="4.5 1.5 51 49"
     baseProfile="full" version="1.1" >
    <g id=desenho_total_print>
      <line x1="10" y1="7" x2="20" y2="17" style="stroke: green; fill: none; stroke-width: 0.1;" stroke-dasharray="0.5,0.5"></line>
      <rect x="5" y="5" width="10" height="10" style="stroke: green; fill: none; stroke-width: 0.1;"></rect>
      <path d="M 10 12 Q 15 7 20 12 " style="stroke: green; fill: none; stroke-width: 0.1;" stroke-dasharray="0.5,0.5"></path>
      <circle cx="10" cy="10" r="5" style="stroke: blue; fill: none; stroke-width: 0.1;" stroke-dasharray="0.5,0.5" />
    </g>
  </svg>

2.2

  async createPDF() {
    const areaSvg = document.getElementById('area_svg_print');
    const desenhoTotal = document.getElementById('desenho_total_print');

    const pdf = new jsPDF('portrait', 'cm', [21.0, 29.6]);

    await pdf.svg(areaSvg, { width: 21.0, height: 29.6 });
    const uri = pdf.output('datauristring');
    this.download(uri);
  }

  download(uri) {
    const  link = document.createElement('a');
    link.download = 'exemple.PDF';
    link.href = uri;
    link.click();
  }

  1. I The result is: rect, line and circle were generated on the PDF, except path.

Sample with the error (npm start when the file angular.json with "aot": true and "optimization": true)
ATTENTION: The same result as an angular build --prod

https://github.com/Solangetatiana/example-path-svg2pdf/blob/main/src/assets/exemple_ERROR_path_BUILD_DEV_with_config_BUILD_PROD.PDF

Sample without error (npm start when the file angular.json with "aot": false and without option "optimization": true)

https://github.com/Solangetatiana/example-path-svg2pdf/blob/main/src/assets/exemple_OK_BUILD_DEV_without_config_BUILD_PROD.PDF

@yGuy
Copy link
Member

yGuy commented Oct 7, 2020

Thanks for your report! Angular is known to break software that wasn't written by the angular team itself ;-) Specifically their "optimizer" prefers smaller over working code. Which exact version of angular and the build optimizer are you using? And did you already try to debug the issue?

@yGuy
Copy link
Member

yGuy commented Oct 7, 2020

Ah - this is about this set of versions - isn't it? So did you already try debugging it yourself?

@Solangetatiana
Copy link
Author

Yes!! The package.json has the versions! Angular 8.

I don't have a clear idea of how to debug and how to get around this before generating the build with minified code ...

@yGuy yGuy added difficulty:medium help wanted Help with creating a proper test-case, looking up the spec, or creating a pull request. labels Oct 7, 2020
@yGuy
Copy link
Member

yGuy commented Oct 12, 2020

Did you try with a more recent version of angular (newest version 9, or even 10?) I remember there were many issues in version 8. If you're looking to crash your software, use angular 8 "production" builds ;-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
difficulty:medium help wanted Help with creating a proper test-case, looking up the spec, or creating a pull request.
Projects
None yet
Development

No branches or pull requests

2 participants